AuroraMiddleware/v8
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

[turbolizer] Style improvements.

Browse Source 
- Remove duplicated CSS.
- Expand landing area of upload button.
- Give the toolbox a transparent white background.
- Make the phase-select box look nicer before file load.
- Remove the margin at the top of the screen.

The height of the margin was exactly the height of span#graph-toolbox,
and due to the semantics of position:relative, space was reserved for it
at the top of div#middle.

BUG=
R=danno

Review-Url: https://codereview.chromium.org/2164373002
Cr-Commit-Position: refs/heads/master@{#38003}
This commit is contained in:
bgeron 2016-07-25 02:48:34 -07:00 committed by Commit bot
parent a474e84181
commit 7ef24ad99c
2 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
tools/turbolizer/index.html
View File

@ -10,24 +10,29 @@
</div>
</div>
<div id="middle">
<span id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png"
alt="layout graph" class="button-input">
<input id="show-all" type="image" title="show all nodes" src="expand-all.jpg"
alt="show all nodes" class="button-input">
<input id="hide-unselected" type="image" title="hide unselected nodes"
src="hide-unselected.png" alt="hide unselected nodes" class="button-input">
<input id="hide-selected" type="image" title="hide selected nodes"
src="hide-selected.png" alt="hide selected nodes" class="button-input">
<input id="zoom-selection" type="image" title="zoom to selection"
src="search.png" alt="zoom to selection" class="button-input">
<input id="toggle-types" type="image" title="show/hide types"
src="types.png" alt="show/hide types" class="button-input">
<input id="search-input" type="text" title="search nodes for regex"
alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector"></select>
</span>
<div id="graph-toolbox-anchor">
<span id="graph-toolbox">
<input id="layout" type="image" title="layout graph" src="layout-icon.png"
alt="layout graph" class="button-input">
<input id="show-all" type="image" title="show all nodes" src="expand-all.jpg"
alt="show all nodes" class="button-input">
<input id="hide-unselected" type="image" title="hide unselected nodes"
src="hide-unselected.png" alt="hide unselected nodes" class="button-input">
<input id="hide-selected" type="image" title="hide selected nodes"
src="hide-selected.png" alt="hide selected nodes" class="button-input">
<input id="zoom-selection" type="image" title="zoom to selection"
src="search.png" alt="zoom to selection" class="button-input">
<input id="toggle-types" type="image" title="show/hide types"
src="types.png" alt="show/hide types" class="button-input">
<input id="search-input" type="text" title="search nodes for regex"
alt="search node for regex" class="search-input"
placeholder="find with regexp&hellip;">
<select id="display-selector">
<option disabled selected>(please open a file)</option>
</select>
</span>
</div>
<div id="load-file">
<input type="file" id="hidden-file-upload">
<input id="upload" type="image" title="load graph" class="button-input"

28
tools/turbolizer/turbo-visualizer.css
View File

@ -280,22 +280,8 @@ span.linkable-text:hover {
left: 0;
}
#graph-toolbox {
position: relative;
top: 1em;
left: 0.7em;
border: 2px solid #eee8d5;
border-radius: 5px;
padding: 0.7em;
z-index: 5;
}
#disassembly-collapse {
right: 0;
}
#source-collapse {
left: 0;
#graph-toolbox-anchor {
height: 0px;
}
#graph-toolbox {
@ -306,21 +292,25 @@ span.linkable-text:hover {
border-radius: 5px;
padding: 0.7em;
z-index: 5;
background: rgba(100%, 100%, 100%, 0.7);
}
#load-file {
background: #A0A0A0;
position: absolute;
top: 0;
right: 0;
margin-top: 0.5em;
margin-right: 0.5em;
border-radius: 5px;
padding: 0.5em;
z-index: 5;
opacity: 0.7;
}
#load-file input {
background: #A0A0A0;
border-radius: 5px;
padding: 0.5em;
}
#hidden-file-upload{
display: none;
}