Skip to content

V
V8
Commit 3bb3c99d authored by Danylo Boiko's avatar Danylo Boiko Committed by V8 LUCI CQ
Browse files
Options

[turbolizer] Initial HTML&CSS code refactoring 

Change-Id: Ic2c2ccbc68b95d02aed610e96c57ee5739836cc6
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3673299Reviewed-by: 's avatarTobias Tebbi <tebbi@chromium.org>
Commit-Queue: Tobias Tebbi <tebbi@chromium.org>
Cr-Commit-Position: refs/heads/main@{#80804}
parent 07e11a64
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 116 deletions
tools/turbolizer/css/tabs.css 0 → 100644
View file @ 3bb3c99d
.content {
display: grid;
grid-template-areas:
"tabs"
"window";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
min-height: calc(100vh);
}
.nav-tabs-container {
grid-area: tabs;
padding: 0;
background-color: #999999;
border-bottom: 4px solid #CCCCCC;
}
.tab-content {
grid-area: window;
background-color: white;
padding: 0;
display: none;
}
.tab-content.tab-default {
display: block;
}
ul.nav-tabs {
padding: 0;
margin: 0;
overflow: auto;
display: table-row;
min-height: 2ex;
}
.nav-tabs li {
display: inline-block;
padding: 4px 10px;
min-width: 20px;
text-decoration: none;
color: black;
text-align: center;
user-select: none;
cursor: pointer;
}
.nav-tabs li:hover {
background-color: #EEEEEE;
}
.nav-tabs li.active {
background-color: #CCCCCC;
}
tools/turbolizer/turbo-visualizer.css → tools/turbolizer/css/turbo-visualizer.css
View file @ 3bb3c99d
......@@ -87,7 +87,7 @@ ol.linenums {
background-color: #CCCCCC;
}
.prettyprint ol.linenums>li.selected {
.prettyprint ol.linenums > li.selected {
background-color: #FFFF33 !important;
}
......@@ -95,7 +95,7 @@ li.selected .line-number {
background-color: #FFFF33;
}
.prettyprint ol.linenums>li {
.prettyprint ol.linenums > li {
list-style-type: decimal;
display: block;
}
......@@ -106,10 +106,7 @@ li.selected .line-number {
.code-header {
background-color: #CCCCCC;
padding-left: 1em;
padding-right: 1em;
padding-top: 1ex;
padding-bottom: 1ex;
padding: 1ex 1em;
font-family: monospace;
user-select: none;
}
......@@ -150,7 +147,6 @@ li.selected .line-number {
padding: 2px;
}
html,
body {
margin: 0;
......@@ -163,7 +159,7 @@ body {
p {
text-align: center;
overflow: overlay;
overflow: auto;
position: relative;
}
......@@ -297,7 +293,7 @@ path.link.selected {
pre.prettyprint {
border: none !important;
padding: 0px;
padding: 0;
}
li.L1,
......@@ -313,9 +309,9 @@ li.nolinenums {
}
ul.noindent {
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-padding-start: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
input:hover,
......@@ -464,7 +460,7 @@ text {
content: "";
display: inline-block;
bottom: -1ex;
width: 0px;
width: 0;
margin-left: -4px;
margin-right: -4px;
margin-bottom: -1ex;
......@@ -521,11 +517,11 @@ text {
font-weight: bold;
}
.schedule-block>.block-id::before {
.schedule-block > .block-id::before {
content: "Block B";
}
.schedule-block.deferred>.block-id::after {
.schedule-block.deferred > .block-id::after {
content: " (deferred)";
}
......@@ -593,7 +589,7 @@ text {
/* display: none; */
}
.schedule-block>.instr-marker {
.schedule-block > .instr-marker {
display: inline;
}
......@@ -645,11 +641,11 @@ text {
padding-right: .5ex;
}
.gap>*:before {
.gap > *:before {
content: "(";
}
.gap>*:after {
.gap > *:after {
content: ")";
}
......@@ -669,20 +665,20 @@ text {
font-weight: bold;
}
.comma-sep-list>* {
.comma-sep-list > * {
padding-right: 1ex;
}
.comma-sep-list>*:after {
.comma-sep-list > *:after {
content: ",";
}
.comma-sep-list>*:last-child:after {
.comma-sep-list > *:last-child:after {
content: "";
}
.comma-sep-list>*:last-child {
padding-right: 0ex;
.comma-sep-list > *:last-child {
padding-right: 0;
}
.temps:before {
......@@ -704,15 +700,15 @@ ul.disassembly-list .block-id {
padding-top: 2px;
}
div.highlight-gap-instructions [data-instruction-kind="gap"]+span+span {
div.highlight-gap-instructions [data-instruction-kind="gap"] + span + span {
background-color: #FAEEEE;
}
div.highlight-gap-instructions [data-instruction-kind="arch"]+span+span {
div.highlight-gap-instructions [data-instruction-kind="arch"] + span + span {
background-color: #EEFFEE;
}
div.highlight-gap-instructions [data-instruction-kind="condition"]+span+span {
div.highlight-gap-instructions [data-instruction-kind="condition"] + span + span {
background-color: #FFFFEE;
}
......
tools/turbolizer/index.html
View file @ 3bb3c99d
......@@ -7,44 +7,43 @@ code is governed by a BSD-style license that can be found in the LICENSE file.
<head>
<meta charset="utf-8">
<title>V8 Turbolizer</title>
<link rel="stylesheet" href="turbo-visualizer.css">
<link rel="stylesheet" href="turbo-visualizer-ranges.css">
<link rel="stylesheet" href="tabs.css">
<link rel="icon" type="image/png" href="turbolizer.png">
<link rel="stylesheet" href="css/turbo-visualizer.css">
<link rel="stylesheet" href="css/turbo-visualizer-ranges.css">
<link rel="stylesheet" href="css/tabs.css">
<link rel="icon" href="turbolizer.png">
</head>
<body>
<div id="left" class="content"></div>
<div id="resizer-left" class="resizer"></div>
<div id="middle">
<div id="load-file">
<input id="upload-helper" type="file">
<input id="upload" type="image" title="load graph" class="button-input" src="upload-icon.png" alt="upload graph">
<input type="file" id="upload-helper">
<input type="image" id="upload" class="button-input" title="load graph" src="img/upload-icon.png" alt="upload graph">
</div>
<div id="resizer-ranges" class="resizer" style="visibility:hidden;"></div>
<div id="ranges" class="content" style="visibility:hidden;"></div>
<div id="show-hide-ranges" class="show-hide-pane" style="visibility: hidden">
<input id="ranges-expand-vert" type="image" title="show ranges" src="up-arrow.png" class="button-input invisible">
<input id="ranges-shrink-vert" type="image" title="hide ranges" src="down-arrow.png" class="button-input">
<input id="ranges-expand-hor" type="image" title="show ranges" src="left-arrow.png" class="button-input invisible">
<input id="ranges-shrink-hor" type="image" title="hide ranges" src="right-arrow.png" class="button-input invisible">
<div id="show-hide-ranges" class="show-hide-pane" style="visibility: hidden;">
<input type="image" id="ranges-expand-vert" class="button-input invisible" title="show ranges" src="img/arrows/up-arrow.png">
<input type="image" id="ranges-shrink-vert" class="button-input" title="hide ranges" src="img/arrows/down-arrow.png">
<input type="image" id="ranges-expand-hor" class="button-input invisible" title="show ranges" src="img/arrows/left-arrow.png">
<input type="image" id="ranges-shrink-hor" class="button-input invisible" title="hide ranges" src="img/arrows/right-arrow.png">
</div>
</div>
<div id="resizer-right" class="resizer"></div>
<div id="right" class="content"></div>
<div id="show-hide-source" class="show-hide-pane">
<input id="source-expand" type="image" title="show source" src="right-arrow.png" class="button-input invisible">
<input id="source-shrink" type="image" title="hide source" src="left-arrow.png" class="button-input">
<input type="image" id="source-expand" class="button-input invisible" title="show source" src="img/arrows/right-arrow.png">
<input type="image" id="source-shrink" class="button-input" title="hide source" src="img/arrows/left-arrow.png">
</div>
<div id="show-hide-disassembly" class="show-hide-pane">
<input id="disassembly-expand" type="image" title="show disassembly" src="left-arrow.png" class="button-input invisible">
<input id="disassembly-shrink" type="image" title="hide disassembly" src="right-arrow.png" class="button-input">
<input type="image" id="disassembly-expand" class="button-input invisible" title="show disassembly" src="img/arrows/left-arrow.png">
<input type="image" id="disassembly-shrink" class="button-input" title="hide disassembly" src="img/arrows/right-arrow.png">
</div>
<div id="text-placeholder" width="0" height="0" style="position: absolute; top:100000px;">
<div id="text-placeholder" style="width: 0; height: 0; position: absolute; top:100000px;">
<svg>
<text text-anchor="right">
<tspan white-space="inherit" id="text-measure">
<text style="text-anchor: end;">
<tspan id="text-measure" style="white-space: inherit;"></tspan>
</text>
</svg>
</div>
......
tools/turbolizer/info-view.html
View file @ 3bb3c99d
<div>This is view contains hints about available keyboard shortcuts.</div>
<div class="info-topic" id="info-global">
<div id="info-global" class="info-topic">
<div class="info-topic-header">Global shortcuts</div>
<div class="info-topic-content">
<table>
......@@ -14,7 +14,7 @@
</table>
</div>
</div>
<div class="info-topic" id="info-graph-view">
<div id="info-graph-view" class="info-topic">
<div class="info-topic-header">Graph view</div>
<div class="info-topic-content">
<table>
......@@ -57,7 +57,7 @@
</table>
</div>
</div>
<div class="info-topic" id="info-graph-nodes">
<div id="info-graph-nodes" class="info-topic">
<div class="info-topic-header">TurboFan graph nodes</div>
<div class="info-topic-content">
<div>The following commands transform node selections, i.e. each operation will be applied
......@@ -95,7 +95,7 @@
</table>
</div>
</div>
<div class="info-topic" id="info-graph-search">
<div id="info-graph-search" class="info-topic">
<div class="info-topic-header">Graph search</div>
<div class="info-topic-content">
<table>
......@@ -109,9 +109,7 @@
<td>Select nodes according to regular expression, always including invisible nodes regardless of checkbox.</td>
</tr>
</table>
<div style="font-weight: bold">
Useful patterns
</div>
<div style="font-weight: bold;">Useful patterns</div>
<table>
<tr>
<td>IfTrue</td>
......
tools/turbolizer/rollup.config.js
View file @ 3bb3c99d
......@@ -4,8 +4,7 @@
import typescript from 'rollup-plugin-typescript2';
import node from 'rollup-plugin-node-resolve';
import path from 'path'
import path from 'path';
const onwarn = warning => {
// Silence circular dependency warning for moment package
......
tools/turbolizer/search2.png deleted 100644 → 0
View file @ 07e11a64
This diff was suppressed by a .gitattributes entry.
tools/turbolizer/src/graph-view.ts
View file @ 3bb3c99d
......@@ -239,7 +239,7 @@ export class GraphView extends PhaseView {
input.setAttribute("id", id);
input.setAttribute("type", "image");
input.setAttribute("title", title);
input.setAttribute("src", `img/${id}-icon.png`);
input.setAttribute("src", `img/toolbox/${id}-icon.png`);
input.className = "button-input graph-toolbox-item";
input.addEventListener("click", onClick);
return input;
......
tools/turbolizer/tabs.css deleted 100644 → 0
View file @ 07e11a64
.content {
display: grid;
grid-template-areas:
"tabs"
"window";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
min-height: calc(100vh);
}
.nav-tabs-container {
grid-area: tabs;
padding: 0px;
background-color: #999999;
border-bottom: 4px solid #CCCCCC;
}
.tab-content {
grid-area: window;
background-color: white;
padding: 0px;
display:none;
}
.tab-content.tab-default {
display: block;
}
ul.nav-tabs {
padding: 0px;
margin: 0px;
overflow: auto;
display: table-row;
min-height: 2ex;
}
.nav-tabs li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
min-width: 20px;
text-decoration: none;
color: black;
text-align: center;
user-select: none;
cursor: pointer;
}
.nav-tabs li:hover {
background-color: #EEEEEE;
}
.nav-tabs li.active {
background-color: #CCCCCC;
}
\ No newline at end of file
tools/turbolizer/tsconfig.test.json
View file @ 3bb3c99d
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment