diff --git a/src/irvisualizer/StmtToViz_dependencies.template.html b/src/irvisualizer/StmtToViz_dependencies.template.html
index d3ffe395d9d2..e8122c67ae91 100644
--- a/src/irvisualizer/StmtToViz_dependencies.template.html
+++ b/src/irvisualizer/StmtToViz_dependencies.template.html
@@ -1,15 +1,9 @@
-
-
-
-
-
-
@@ -23,9 +17,9 @@
diff --git a/src/irvisualizer/StmtToViz_javascript.template.html b/src/irvisualizer/StmtToViz_javascript.template.html
index 3be2060ed617..c8d1f4a99275 100644
--- a/src/irvisualizer/StmtToViz_javascript.template.html
+++ b/src/irvisualizer/StmtToViz_javascript.template.html
@@ -84,15 +84,29 @@
}
/* Expand/Collapse buttons in Viz */
- function toggleViz(id) {
- var buttonShow = document.getElementById(id + '-show');
- var buttonHide = document.getElementById(id + '-hide');
- var body = document.getElementById(id);
- var re = /(?:\-([^-]+))?$/;
- var ccost_btn = document.getElementById("vcc-" + re.exec(id)[1]);
- var dcost_btn = document.getElementById("vdc-" + re.exec(id)[1]);
- var ccost_tt = document.getElementById("tooltip-vcc-" + re.exec(id)[1]);
- var dcost_tt = document.getElementById("tooltip-vdc-" + re.exec(id)[1]);
+ function toggleVizByElem(body) {
+ var id = body.id;
+ var group = body.parentElement;
+ var header = group.firstElementChild;
+ const safe_but_slow_code = false;
+ if (safe_but_slow_code) {
+ var buttonShow = header.querySelector('#' + id + '-show');
+ var buttonHide = header.querySelector('#' + id + '-hide');
+ var re = /(?:\-([^-]+))?$/;
+ var viz_id = re.exec(id)[1];
+ var ccost_btn = header.querySelector("#vcc-" + viz_id);
+ var dcost_btn = header.querySelector("#vdc-" + viz_id);
+ var ccost_tt = header.querySelector("#tooltip-vcc-" + viz_id);
+ var dcost_tt = header.querySelector("#tooltip-vdc-" + viz_id);
+ } else {
+ var buttonHide = header.firstElementChild; // #id-hide
+ var buttonShow = header.firstElementChild.nextElementSibling; // #id-show
+ var cost_div = header.lastElementChild; // #box-header > .viz-cost-btns
+ var ccost_btn = cost_div.firstElementChild; // # vcc-id
+ var dcost_btn = cost_div.lastElementChild; // # vdc-id
+ var ccost_tt = ccost_btn.firstElementChild; // #tooltip-vcc-id
+ var dcost_tt = dcost_btn.firstElementChild; // #tooltip-vdc-id
+ }
if (body.classList.contains("collapsed-viz")) {
body.classList.remove("collapsed-viz");
buttonShow.style.display = 'none';
@@ -128,6 +142,10 @@
}
};
+ function toggleViz(id) {
+ toggleVizByElem(document.getElementById(id));
+ }
+
/* Scroll to visualization from IR code */
function scrollToViz(id) {
var container = document.getElementById('ir-visualization-tab');
@@ -308,40 +326,9 @@
}
// Tooltips
- function update(buttonElement, tooltipElement) {
- window.FloatingUIDOM.computePosition(buttonElement, tooltipElement, {
- placement: 'top',
- middleware: [
- window.FloatingUIDOM.offset(6),
- window.FloatingUIDOM.flip(),
- window.FloatingUIDOM.shift({
- padding: 5
- }),
- ],
- }).then(({
- x,
- y,
- placement,
- middlewareData
- }) => {
- Object.assign(tooltipElement.style, {
- left: `${x}px`,
- top: `${y}px`,
- });
- // Accessing the data
- const staticSide = {
- top: 'bottom',
- right: 'left',
- bottom: 'top',
- left: 'right',
- }[placement.split('-')[0]];
- });
- }
-
function showTooltip(buttonElement, tooltipElement) {
tooltipElement.style.display = 'block';
tooltipElement.style.opacity = '1';
- update(buttonElement, tooltipElement);
}
function hideTooltip(tooltipElement) {
@@ -349,7 +336,7 @@
tooltipElement.style.opacity = '0';
}
- function init_tooltips(btns, prefix) {
+ function init_tooltips(btns) {
for (var i = 0; i < btns.size(); i++) {
const button = btns[i];
const tooltip = button.firstElementChild;
@@ -374,11 +361,11 @@
}
}
- init_tooltips($('button[id^="cond-"]'), "cond-tooltip-"); // span#
- init_tooltips($('div[id^="cc-"]'), "tooltip-cc-"); // span#
- init_tooltips($('div[id^="dc-"]'), "tooltip-dc-"); // span#
- init_tooltips($('div[id^="vcc-"]'), "tooltip-vcc-"); // span#
- init_tooltips($('div[id^="vdc-"]'), "tooltip-vdc-"); // span#
+ init_tooltips($('button[id^="cond-"]')); // span#cond-tooltip-
+ init_tooltips($('div[id^="cc-"]')); // span#tooltip-cc-
+ init_tooltips($('div[id^="dc-"]')); // span#tooltip-dc-
+ init_tooltips($('div[id^="vcc-"]')); // span#tooltip-vcc-
+ init_tooltips($('div[id^="vdc-"]')); // span#tooltip-vdc-
function depth(elem) {
if (elem.id == 'ir-visualization-tab') {
@@ -394,16 +381,22 @@
$('div[id^="viz-"]').filter((idx, val) => {
return depth(val) > 1;
}).each((idx, val) => {
- toggleViz(val.id);
+ toggleVizByElem(val);
});
function scrollToAsm(lno) {
- document.getElementsByClassName("shj-numbers")[0].children[lno].scrollIntoView({
- behavior: "smooth"
+ var asmContent = document.getElementById("assemblyContent");
+ var line_height = window.getComputedStyle(asmContent).getPropertyValue("line-height");
+ line_height = parseInt(line_height, 10);
+ document.getElementById("assembly-tab").scrollTo({
+ behavior: "smooth",
+ top: lno * line_height
});
}
- collapse_assembly_tab();
+ // Instead of calling 'collapse_assembly_tab();' we use the
+ // last bit of it, which skips a whole Layout Recalculation.
+ assemblyCodeDiv.style.display = 'none';
// Cost model js
var re = /(?:\-([^-]+))?$/;
diff --git a/src/irvisualizer/StmtToViz_stylesheet.template.html b/src/irvisualizer/StmtToViz_stylesheet.template.html
index 11b6289938be..45b2b1dfa392 100644
--- a/src/irvisualizer/StmtToViz_stylesheet.template.html
+++ b/src/irvisualizer/StmtToViz_stylesheet.template.html
@@ -60,6 +60,13 @@
position: relative;
}
+ button#highlight-button {
+ margin: 0.4em;
+ padding: 0.5em;
+ border-radius: 4px;
+ }
+
+
/* Resize bars */
div#visualization-tabs div.resize-bar {
background: rgb(201, 231, 190);
@@ -469,10 +476,11 @@
}
span.tooltip {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
+ opacity: 1;
+ visibility: hidden;
+ position: relative;
+ left: 50px;
+ top: -10px;
width: max-content;
padding: 8px;
background: #fff7e0;
@@ -484,6 +492,10 @@
text-indent: 0px;
}
+ div.cost-btn:hover span.tooltip {
+ visibility: visible;
+ }
+
.conditionTooltip {
width: 300px;
padding: 5px;
@@ -540,12 +552,6 @@
border-style: dashed;
}
- /* CodeMirror */
- .CodeMirror {
- height: 100%;
- width: 100%;
- }
-
/* Cost model */
div.node-cost {
@@ -553,9 +559,8 @@
left: 35px;
display: flex;
}
-
div.cost-btn {
- width: 10px;
+ width: 15px;
height: 14px;
margin-top: 2px;
}