[turbolizer] Style improvements.

- 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}

tools/turbolizer/index.html

@@ -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"

tools/turbolizer/turbo-visualizer.css

@@ -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;
 }