Usability improvements to tracing UI.

Including:
- Rewrite to use WebUI tabs instead of homebrew tabs
- Draw vsync lines without transform so they dont get fat on zoomin
- Compute vsync line boundary even when selection.length > 1
- Show scroll bars in the right place if a trace with lots of threads is loaded
- Track mousemoves on the window rather than div so dragging outside the div doesn't
  lead to unexpected behavior.
- Make -webkit-user-select:none default; turn on only when directly requested
- Add more colors to color pallette for big traces

TBR=jhawkins@chromium.org

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@86982 0039d316-1c4b-4281-b951-d872f2087c98

16 files changed, 229 insertions, 421 deletions

diff --git a/chrome/browser/resources/gpu_internals.html b/chrome/browser/resources/gpu_internals.html
index 24719f1..31dbe35 100644
--- a/chrome/browser/resources/gpu_internals.html
+++ b/chrome/browser/resources/gpu_internals.html
@@ -10,6 +10,7 @@ found in the LICENSE file.
 <style>
 * {
   box-sizing: border-box;
+  -webkit-user-select: none;
 }
 
 html, body, #main-tabs {
@@ -31,19 +32,24 @@ body {
   border: 1px solid red;
 }
 
+tabbox tabpanels {
+  padding: 1px;
+}
+
 </style>
 <link rel="stylesheet" href="gpu_internals/info_view.css">
 <link rel="stylesheet" href="gpu_internals/overlay.css">
 <link rel="stylesheet" href="gpu_internals/profiling_view.css">
-<link rel="stylesheet" href="gpu_internals/tab_control.css">
 <link rel="stylesheet" href="gpu_internals/timeline_view.css">
 <link rel="stylesheet" href="gpu_internals/timeline.css">
 <link rel="stylesheet" href="gpu_internals/tracing_controller.css">
+<link rel="stylesheet" href="chrome://resources/css/tabs.css">
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>
 <script src="chrome://resources/js/cr/ui.js"></script>
+<script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
+<script src="chrome://resources/js/cr/ui/tabs.js"></script>
 <script src="chrome://resources/js/util.js"></script>
-<script src="gpu_internals/tab_control.js"></script>
 <script src="gpu_internals/overlay.js"></script>
 <script src="gpu_internals/browser_bridge.js"></script>
 <script src="gpu_internals/tracing_controller.js"></script>
@@ -77,10 +83,10 @@ function onLoad() {
 
   // Create the main tab control
   var tabs = $('main-tabs');
-  cr.ui.decorate(tabs, gpu.TabControl);
+  cr.ui.decorate(tabs, cr.ui.TabBox);
 
   // Sync the main-tabs selectedTabs in-sync with the location.
-  tabs.addEventListener('selectedTabChange', function() {
+  tabs.addEventListener('selectedChange', function() {
     if (tabs.selectedTab.id) {
       history.pushState('', '', '#' + tabs.selectedTab.id);
     }
@@ -88,8 +94,7 @@ function onLoad() {
   window.onhashchange = function() {
     var cur = window.location.hash;
     if (cur == '#' || cur == '') {
-      if (tabs.tabs.length)
-        tabs.selectedTab = tabs.tabs[0];
+      tabs.selectedTab = $('info-view');
     } else {
       var tab = $(window.location.hash.substr(1));
       if (tab)
@@ -107,9 +112,15 @@ document.addEventListener('DOMContentLoaded', onLoad);
   <div id="debug-div">
   </div>
   <!-- Tabs -->
-  <div id="main-tabs">
-    <include src="gpu_internals/info_view.html">
-    <div id="profiling-view" label="Profiling"></div>
+  <tabbox id="main-tabs">
+    <tabs>
+      <tab>GPU Info</tab>
+      <tab>Profiling</tab>
+    </tabs>
+    <tabpanels>
+      <include src="gpu_internals/info_view.html">
+      <tabpanel id="profiling-view"</div>
+    </tabpanels>
   </div>
 </body>
 </html>
diff --git a/chrome/browser/resources/gpu_internals/info_view.css b/chrome/browser/resources/gpu_internals/info_view.css
index aebe98d..3e2ad0b6 100644
--- a/chrome/browser/resources/gpu_internals/info_view.css
+++ b/chrome/browser/resources/gpu_internals/info_view.css
@@ -5,10 +5,25 @@ found in the LICENSE file.
 */
 #info-view {
   padding: 10px;
+  overflow: auto;
+  -webkit-box-flex: 1;
+}
+#info-view * {
+  -webkit-user-select: text;
+}
+
+#info-view[selected] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
 }
 
-#info-view h3 {
-  margin-bottom: 5px;
+#info-view h3,
+#info-view ul {
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+#info-view > div {
+  -webkit-margin-after: 1em;
 }
 
 #info-view .row-title {
diff --git a/chrome/browser/resources/gpu_internals/info_view.html b/chrome/browser/resources/gpu_internals/info_view.html
index 94e1911..5a14de9 100644
--- a/chrome/browser/resources/gpu_internals/info_view.html
+++ b/chrome/browser/resources/gpu_internals/info_view.html
@@ -3,21 +3,27 @@ Copyright (c) 2010 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
-<div id=info-view label="GPU Info">
-  <h3>Graphics Feature Status</h3>
-  <ul class="feature-status-list">
-  </ul>
+<tabpanel id="info-view">
+  <div>
+    <h3>Graphics Feature Status</h3>
+    <ul class="feature-status-list">
+    </ul>
+  </div>
   <div class='problems-div'>
     <h3>Problems Detected</h3>
     <ul class="problems-list">
     </ul>
   </div>
 
-  <h3>Version Information</h3>
-  <div id="client-info"></div>
+  <div>
+    <h3>Version Information</h3>
+    <div id="client-info"></div>
+  </div>
 
-  <h3>Driver Information</h3>
-  <div id="basic-info"></div>
+  <div>
+    <h3>Driver Information</h3>
+    <div id="basic-info"></div>
+  </div>
 
   <div class="diagnostics">
     <h3>Diagnostics</h3>
@@ -53,4 +59,4 @@ found in the LICENSE file.
       </table>
     </div>
   </div>
-</div>
+</tabpanel>
diff --git a/chrome/browser/resources/gpu_internals/info_view.js b/chrome/browser/resources/gpu_internals/info_view.js
index 45e4240..7f9abfa 100644
--- a/chrome/browser/resources/gpu_internals/info_view.js
+++ b/chrome/browser/resources/gpu_internals/info_view.js
@@ -14,13 +14,13 @@ cr.define('gpu', function() {
    * @constructor
    * @extends {Tab}
    */
-  var InfoView = cr.ui.define(gpu.Tab);
+  var InfoView = cr.ui.define(cr.ui.TabPanel);
 
   InfoView.prototype = {
-    __proto__: gpu.Tab.prototype,
+    __proto__: cr.ui.TabPanel.prototype,
 
     decorate: function() {
-      gpu.Tab.prototype.decorate.apply(this);
+      cr.ui.TabPanel.prototype.decorate.apply(this);
 
       browserBridge.addEventListener('gpuInfoUpdate', this.refresh.bind(this));
       browserBridge.addEventListener('logMessagesChange',
diff --git a/chrome/browser/resources/gpu_internals/profiling_view.css b/chrome/browser/resources/gpu_internals/profiling_view.css
index cb7e10d..94b63a1 100644
--- a/chrome/browser/resources/gpu_internals/profiling_view.css
+++ b/chrome/browser/resources/gpu_internals/profiling_view.css
@@ -15,13 +15,12 @@ found in the LICENSE file.
 
 #profiling-view > .control {
   display: -webkit-box;
-  overflow: auto;
+  border-bottom: 1px solid #555;
 }
 
 #profiling-view > .container {
   display: -webkit-box;
   -webkit-box-flex: 1;
-  overflow: auto;
 }
 
 .profiling-overlay {
diff --git a/chrome/browser/resources/gpu_internals/profiling_view.js b/chrome/browser/resources/gpu_internals/profiling_view.js
index b0661e9..eb8a2e2 100644
--- a/chrome/browser/resources/gpu_internals/profiling_view.js
+++ b/chrome/browser/resources/gpu_internals/profiling_view.js
@@ -13,14 +13,16 @@ cr.define('gpu', function() {
    * @constructor
    * @extends {gpu.Tab}
    */
-  ProfilingView = cr.ui.define(gpu.Tab);
+  ProfilingView = cr.ui.define(cr.ui.TabPanel);
 
   ProfilingView.prototype = {
-    __proto__: gpu.Tab.prototype,
+    __proto__: cr.ui.TabPanel.prototype,
 
     traceEvents_: [],
 
     decorate: function() {
+      cr.ui.TabPanel.prototype.decorate.apply(this);
+
       // make the <list>/add/save/record element
       this.controlDiv_ = document.createElement('div');
       this.controlDiv_.className = 'control';
@@ -52,6 +54,8 @@ cr.define('gpu', function() {
       this.container_.appendChild(this.timelineView_);
       this.appendChild(this.container_);
 
+      document.addEventListener('keypress', this.onKeypress_.bind(this));
+
       tracingController.addEventListener('traceEnded',
           this.onRecordDone_.bind(this));
       tracingController.addEventListener('loadTraceFileComplete',
@@ -73,6 +77,14 @@ cr.define('gpu', function() {
       this.timelineView_.traceEvents = this.traceEvents_;
     },
 
+    onKeypress_: function(event) {
+      if (event.keyCode == 114 && !tracingController.isTracingEnabled) {
+        if (!this.selected)
+          this.selected = true;
+        this.onRecord_();
+      }
+    },
+
     ///////////////////////////////////////////////////////////////////////////
 
     onRecord_: function() {
diff --git a/chrome/browser/resources/gpu_internals/tab_control.css b/chrome/browser/resources/gpu_internals/tab_control.css
deleted file mode 100644
index 29c7538..0000000
--- a/chrome/browser/resources/gpu_internals/tab_control.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-Copyright (c) 2011 The Chromium Authors. All rights reserved.
-Use of this source code is governed by a BSD-style license that can be
-found in the LICENSE file.
-*/
-.tab-control {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-pack: start;
-
-  padding: 0;
-  margin: 0;
-}
-
-.tab-control > .tab-strip {
-  font-family: sans-serif;
-  background: #aaa;
-  border-bottom: 1px solid #555;
-
-  -webkit-user-select: none;
-
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: start;
-}
-
-.tab-control > .tabs {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: auto;
-}
-
-.tab-control > .tabs > :not([selected]) {
-  display: none;
-}
-
-.tab-control .tab-button {
-  -webkit-margin-start: 5px;
-  text-decoration: none;
-  text-align: center;
-  display: inline-block;
-  margin-top: 4px;
-  padding: 5px 10px 3px 10px;
-  border-top-right-radius: 8px;
-  border-top-left-radius: 8px;
-  background-clip: border-box;
-  background: #ccc;
-}
-
-.tab-control .tab-button:hover {
-  background: #eee;
-}
-
-
-.tab-control .tab-button:visited,
-.tab-control .tab-button {
-  color: blue;
-}
-
-.tab-control .tab-button[selected] {
-  position: relative;
-  top: 1px;
-  color: black;
-  background: white;
-}
diff --git a/chrome/browser/resources/gpu_internals/tab_control.js b/chrome/browser/resources/gpu_internals/tab_control.js
deleted file mode 100644
index dcd3e0a..0000000
--- a/chrome/browser/resources/gpu_internals/tab_control.js
+++ /dev/null
@@ -1,250 +0,0 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-
-/**
- * @fileoverview This implements a tab control.
- *
- * An individual tab within a tab control is, unsurprisingly, a Tab.
- * Tabs must be explicitly added/removed from the control.
- *
- * Tab titles are based on the label attribute of each child:
- *
- * <div>
- * <div label='Tab 1'>Hello</div>
- * <div label='Tab 2'>World</div>
- * </div>
- *
- * Results in:
- *
- * ---------------
- * | Tab1 | Tab2 |
- * | ---------------------------------------
- * | Hello World |
- * -----------------------------------------
- *
- */
-cr.define('gpu', function() {
-  /**
-   * Creates a new tab element. A tab element is one of multiple tabs
-   * within a TabControl.
-   * @constructor
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @extends {HTMLDivElement}
-   */
-  var Tab = cr.ui.define('div');
-  Tab.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    decorate: function() {
-    }
-  };
-
-  /**
-   * Title for the tab.
-   * @type {String}
-   */
-  cr.defineProperty(Tab, 'label', cr.PropertyKind.ATTR);
-
-  /**
-   * Whether the item is selected.
-   * @type {boolean}
-   */
-  cr.defineProperty(Tab, 'selected', cr.PropertyKind.BOOL_ATTR);
-
-
-  /**
-   * Creates a new tab button element in the tabstrip
-   * @constructor
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @extends {HTMLDivElement}
-   */
-  var TabButton = cr.ui.define('a');
-  TabButton.prototype = {
-    __proto__: HTMLAnchorElement.prototype,
-
-    decorate: function() {
-      this.classList.add('tab-button');
-      this.onclick = function() {
-        if (this.tab_)
-          this.parentNode.parentNode.selectedTab = this.tab_;
-      }.bind(this);
-    },
-    get tab() {
-      return this.tab_;
-    },
-    set tab(tab) {
-      if (this.tab_)
-        throw Error('Cannot set tab once set.');
-      this.tab_ = tab;
-      this.tab_.addEventListener('titleChange', this.onTabChanged_.bind(this));
-      this.tab_.addEventListener('selectedChange',
-                                 this.onTabChanged_.bind(this));
-      this.onTabChanged_();
-    },
-
-    onTabChanged_: function(e) {
-      if (this.tab_) {
-        this.textContent = this.tab_.label;
-        this.selected = this.tab_.selected;
-      }
-    }
-
-  };
-
-  /**
-   * Whether the TabButton is selected.
-   * @type {boolean}
-   */
-  cr.defineProperty(TabButton, 'selected', cr.PropertyKind.BOOL_ATTR);
-
-
-  /**
-   * Creates a new tab control element.
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @constructor
-   * @extends {HTMLDivElement}
-   */
-  var TabControl = cr.ui.define('div');
-  TabControl.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    selectedTab_: null,
-
-    /**
-     * Initializes the tab control element.
-     * Any child elements pre-existing on the element will become tabs.
-     */
-    decorate: function() {
-      this.classList.add('tab-control');
-
-      this.tabStrip_ = this.ownerDocument.createElement('div');
-      this.tabStrip_.classList.add('tab-strip');
-
-      this.tabs_ = this.ownerDocument.createElement('div');
-      this.tabs_.classList.add('tabs');
-
-      this.insertBefore(this.tabs_, this.firstChild);
-      this.insertBefore(this.tabStrip_, this.firstChild);
-
-      this.boundOnTabSelectedChange_ = this.onTabSelectedChange_.bind(this);
-
-      // Reparent existing tabs to the tabs_ div.
-      while (this.children.length > 2)
-        this.addTab(this.children[2]);
-    },
-
-    /**
-     * Adds an element to the tab control.
-     */
-    addTab: function(tab) {
-      if (tab.parentNode == this.tabs_)
-        throw Error('Tab is already part of this control.');
-      if (!(tab instanceof Tab))
-        throw Error('Provided element is not instanceof Tab.');
-      this.tabs_.appendChild(tab);
-
-      tab.addEventListener('selectedChange', this.boundOnTabSelectedChange_);
-
-      var button = new TabButton();
-      button.tab = tab;
-      tab.tabStripButton_ = button;
-
-      this.tabStrip_.appendChild(button);
-
-      if (this.tabs_.length == 1)
-        this.tabs_.children[0].selected = true;
-    },
-
-    /**
-     * Removes a tab from the tab control.
-     * changing the selected tab if needed.
-     */
-    removeTab: function(tab) {
-      if (tab.parentNode != this.tabs_)
-        throw new Error('Tab is not attached to this control.');
-
-      tab.removeEventListener('selectedChange', this.boundOnTabSelectedChange_);
-
-      if (this.selectedTab_ == tab) {
-        if (this.tabs_.children.length) {
-          this.tabs_.children[0].selected = true;
-        } else {
-          this.selectedTab_ = undefined;
-        }
-      }
-
-      this.tabs_.removeChild(tab);
-      tab.tabStripButton_.parentNode.removeChild(
-          tab.tabStripButton_);
-    },
-
-    /**
-     * Gets the currently selected tab element.
-     */
-    get selectedTab() {
-      return this.selectedTab_;
-    },
-
-    /**
-     * Sets the currently selected tab element.
-     */
-    set selectedTab(tab) {
-      if (tab.parentNode != this.tabs_)
-        throw Error('Tab is not part of this TabControl.');
-      tab.selected = true;
-    },
-
-    /**
-     * Hides the previously selected tab element and dispatches a
-     * 'selectedTabChanged' event.
-     */
-    onTabSelectedChange_: function(e) {
-      var tab = e.target;
-      if (!e.newValue) {
-        // Usually we can ignore this event, as the tab becoming unselected
-        // needs no corrective action. However, if the currently selected
-        // tab is deselected, we do need to do some work.
-        if (tab == this.selectedTab_) {
-          var previousTab = this.selectedTab_;
-          var newTab;
-          for (var i = 0; i < this.tabs_.children.length; ++i) {
-            if (this.tabs_.children[i] != tab) {
-              newTab = this.tabs_.children[i];
-              break;
-            }
-          }
-          if (newTab) {
-            newTab.selected = true;
-          } else {
-            this.selectedTab_ = undefined;
-            cr.dispatchPropertyChange(
-                this, 'selectedTab', this.selectedTab_, previousTab);
-          }
-        }
-      } else {
-        var previousTab = this.selectedTab_;
-        this.selectedTab_ = tab;
-        if (previousTab)
-          previousTab.selected = false;
-        cr.dispatchPropertyChange(
-            this, 'selectedTab', this.selectedTab_, previousTab);
-      }
-    },
-
-    /**
-     * Returns an array of all the tabs within this control.  This is
-     * not the same as this.children because the actual tab elements are
-     * attached to the tabs_ element.
-     */
-    get tabs() {
-      return Array.prototype.slice.call(this.tabs_.children);
-    }
-  };
-
-  return {
-    Tab: Tab,
-    TabControl: TabControl
-  };
-});
diff --git a/chrome/browser/resources/gpu_internals/timeline.css b/chrome/browser/resources/gpu_internals/timeline.css
index 2486fc3..99e9578 100644
--- a/chrome/browser/resources/gpu_internals/timeline.css
+++ b/chrome/browser/resources/gpu_internals/timeline.css
@@ -3,10 +3,6 @@ Copyright (c) 2011 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 */
-.timeline {
-  -webkit-user-select: none;
-}
-
 .timeline-drag-box {
   position: fixed;
   background-color: rgba(0, 0, 255, 0.25);
diff --git a/chrome/browser/resources/gpu_internals/timeline.js b/chrome/browser/resources/gpu_internals/timeline.js
index cc67e01..13621c5 100644
--- a/chrome/browser/resources/gpu_internals/timeline.js
+++ b/chrome/browser/resources/gpu_internals/timeline.js
@@ -183,9 +183,9 @@ cr.define('gpu', function() {
       }.bind(this), 250);
 
       document.addEventListener('keypress', this.onKeypress_.bind(this));
-      this.addEventListener('mousedown', this.onMouseDown_.bind(this));
-      this.addEventListener('mousemove', this.onMouseMove_.bind(this));
-      this.addEventListener('mouseup', this.onMouseUp_.bind(this));
+      document.addEventListener('mousedown', this.onMouseDown_.bind(this));
+      this.onMouseMoveBoundToThis_ = this.onMouseMove_.bind(this);
+      this.onMouseUpBoundToThis_ = this.onMouseUp_.bind(this);
       this.lastMouseViewPos_ = {x: 0, y: 0};
 
       this.selection_ = [];
@@ -341,11 +341,13 @@ cr.define('gpu', function() {
     },
 
     showDragBox_: function() {
-      this.dragBox_.hidden = false;
     },
 
     hideDragBox_: function() {
-      this.dragBox_.hidden = true;
+      this.dragBox_.style.left = '-1000px';
+      this.dragBox_.style.top = '-1000px';
+      this.dragBox_.style.width = 0;
+      this.dragBox_.style.height = 0;
     },
 
     setDragBoxPosition_: function(eDown, eCur) {
@@ -373,15 +375,13 @@ cr.define('gpu', function() {
     },
 
     onGridToggle_: function(left) {
-      if (!this.selection_ || this.selection_.length != 1) {
-        window.alert('You must have an item selected to turn on the grid.');
-        return;
-      }
       var tb;
       if (left)
-        tb = this.selection_[0].slice.start;
+        tb = Math.min.apply(Math, this.selection_.map(
+            function(x) { return x.slice.start; }));
       else
-        tb = this.selection_[0].slice.end;
+        tb = Math.max.apply(Math, this.selection_.map(
+            function(x) { return x.slice.end; }));
 
       // Shift the timebase left until its just left of minTimestamp.
       var numInterfvalsSinceStart = Math.ceil((tb - this.model_.minTimestamp) /
@@ -392,11 +392,18 @@ cr.define('gpu', function() {
     },
 
     onMouseDown_: function(e) {
+      if (e.clientX < this.offsetLeft ||
+          e.clientX >= this.offsetLeft + this.offsetWidth ||
+          e.clientY < this.offsetTop ||
+          e.clientY >= this.offsetTop + this.offsetHeight)
+        return;
+
       var canv = this.firstCanvas;
       var pos = {
         x: e.clientX - canv.offsetLeft,
         y: e.clientY - canv.offsetTop
       };
+
       var wX = this.viewport_.xViewToWorld(pos.x);
 
       // Update the drag box position
@@ -404,10 +411,13 @@ cr.define('gpu', function() {
       this.setDragBoxPosition_(e, e);
       this.dragBeginEvent_ = e;
       e.preventDefault();
+
+      document.addEventListener('mousemove', this.onMouseMoveBoundToThis_);
+      document.addEventListener('mouseup', this.onMouseUpBoundToThis_);
     },
 
     onMouseMove_: function(e) {
-      if (!this.firstCanvas)
+      if (!this.firstCanvas || !this.dragBeginEvent_)
         return;
       var canv = this.firstCanvas;
       var pos = {
@@ -457,8 +467,9 @@ cr.define('gpu', function() {
           var track = this.tracks_.children[i];
 
           // Only check tracks that insersect the rect.
-          var a = Math.max(loY, track.offsetTop);
-          var b = Math.min(hiY, track.offsetTop + track.offsetHeight);
+          var trackClientRect = track.getBoundingClientRect();
+          var a = Math.max(loY, trackClientRect.top);
+          var b = Math.min(hiY, trackClientRect.bottom);
           if (a <= b) {
             track.pickRange(loWX, hiWX, loY, hiY, addHit);
           }
@@ -470,6 +481,10 @@ cr.define('gpu', function() {
           this.selection_[i].slice.selected = true;
         }
         this.invalidate();  // Cause tracks to redraw.
+
+        // Remove move listeners.
+        document.removeEventListener('mousemove', this.onMouseMoveBoundToThis_);
+        document.removeEventListener('mouseup', this.onMouseUpBoundToThis_);
       }
     }
   };
diff --git a/chrome/browser/resources/gpu_internals/timeline_model.js b/chrome/browser/resources/gpu_internals/timeline_model.js
index 0cb9b90..0de1ea3 100644
--- a/chrome/browser/resources/gpu_internals/timeline_model.js
+++ b/chrome/browser/resources/gpu_internals/timeline_model.js
@@ -146,7 +146,7 @@ cr.define('gpu', function() {
 
 
       // Threadstate
-      const numColorIds = 12;
+      const numColorIds = 30;
       function ThreadState(tid) {
         this.openSlices = [];
         this.openNonNestedSlices = {};
@@ -160,8 +160,9 @@ cr.define('gpu', function() {
           // coloring across traces.
           var hash = 0;
           for (var i = 0; i < name.length; ++i)
-            hash = (hash + 37 * hash + name.charCodeAt(i)) % 0xFFFFFFFF;
+            hash = (hash + 37 * hash + 11 * name.charCodeAt(i)) % 0xFFFFFFFF;
           nameToColorMap[name] = hash % numColorIds;
+          console.log(name, nameToColorMap[name]);
         }
         return nameToColorMap[name];
       }
diff --git a/chrome/browser/resources/gpu_internals/timeline_track.js b/chrome/browser/resources/gpu_internals/timeline_track.js
index fe582e0..f3495a7 100644
--- a/chrome/browser/resources/gpu_internals/timeline_track.js
+++ b/chrome/browser/resources/gpu_internals/timeline_track.js
@@ -11,18 +11,36 @@
 cr.define('gpu', function() {
 
   const palletteBase = [
-    {r: 0x45, g: 0x85, b: 0xaa},
-    {r: 0xdc, g: 0x73, b: 0xa8},
-    {r: 0x77, g: 0xb6, b: 0x94},
-    {r: 0x23, g: 0xae, b: 0x6e},
-    {r: 0x76, g: 0x5d, b: 0x9e},
-    {r: 0x48, g: 0xd8, b: 0xfb},
-    {r: 0xa9, g: 0xd7, b: 0x93},
-    {r: 0x7c, g: 0x2d, b: 0x52},
-    {r: 0x69, g: 0xc2, b: 0x75},
-    {r: 0x76, g: 0xcf, b: 0xee},
-    {r: 0x3d, g: 0x85, b: 0xd1},
-    {r: 0x71, g: 0x0b, b: 0x54}];
+    {r: 138, g: 113, b: 152},
+    {r: 175, g: 112, b: 133},
+    {r: 127, g: 135, b: 225},
+    {r: 93, g: 81, b: 137},
+    {r: 116, g: 143, b: 119},
+    {r: 178, g: 214, b: 122},
+    {r: 87, g: 109, b: 147},
+    {r: 119, g: 155, b: 95},
+    {r: 114, g: 180, b: 160},
+    {r: 132, g: 85, b: 103},
+    {r: 157, g: 210, b: 150},
+    {r: 148, g: 94, b: 86},
+    {r: 164, g: 108, b: 138},
+    {r: 139, g: 191, b: 150},
+    {r: 110, g: 99, b: 145},
+    {r: 80, g: 129, b: 109},
+    {r: 125, g: 140, b: 149},
+    {r: 93, g: 124, b: 132},
+    {r: 140, g: 85, b: 140},
+    {r: 104, g: 163, b: 162},
+    {r: 132, g: 141, b: 178},
+    {r: 131, g: 105, b: 147},
+    {r: 135, g: 183, b: 98},
+    {r: 152, g: 134, b: 177},
+    {r: 141, g: 188, b: 141},
+    {r: 133, g: 160, b: 210},
+    {r: 126, g: 186, b: 148},
+    {r: 112, g: 198, b: 205},
+    {r: 180, g: 122, b: 195},
+    {r: 203, g: 144, b: 152}];
 
   function brighten(c) {
     return {r: Math.min(255, c.r + Math.floor(c.r * 0.45)),
@@ -131,9 +149,9 @@ cr.define('gpu', function() {
      */
     pick: function(wX, wY, onHitCallback) {
       for (var i = 0; i < this.tracks_.length; i++) {
-        var track = this.tracks_[i];
-        if (wY >= track.offsetTop && wY < track.offsetTop + track.offsetHeight)
-          return track.pick(wX, onHitCallback);
+        var trackClientRect = this.tracks_[i].getBoundingClientRect();
+        if (wY >= trackClientRect.top && wY < trackClientRect.bottom)
+          return this.tracks_[i].pick(wX, onHitCallback);
       }
       return false;
     },
@@ -153,9 +171,9 @@ cr.define('gpu', function() {
      */
     pickRange: function(loWX, hiWX, loY, hiY, onHitCallback) {
       for (var i = 0; i < this.tracks_.length; i++) {
-        var a = Math.max(loY, this.tracks_[i].offsetTop);
-        var b = Math.min(hiY, this.tracks_[i].offsetTop +
-                         this.tracks_[i].offsetHeight);
+        var trackClientRect = this.tracks_[i].getBoundingClientRect();
+        var a = Math.max(loY, trackClientRect.top);
+        var b = Math.min(hiY, trackClientRect.bottom);
         if (a <= b)
           this.tracks_[i].pickRange(loWX, hiWX, loY, hiY, onHitCallback);
       }
@@ -234,18 +252,18 @@ cr.define('gpu', function() {
       var viewLWorld = vp.xViewToWorld(0);
       var viewRWorld = vp.xViewToWorld(canvasW);
 
-      // begin rendering in world space
-      ctx.save();
-      vp.applyTransformToCanavs(ctx);
-
-      // grid
+      // Draw grid without a transform because the scale
+      // affects line width.
       if (vp.gridEnabled) {
         var x = vp.gridTimebase;
         ctx.beginPath();
         while (x < viewRWorld) {
           if (x >= viewLWorld) {
-            ctx.moveTo(x, 0);
-            ctx.lineTo(x, canvasH);
+            // Do conversion to viewspace here rather than on
+            // x to avoid precision issues.
+            var vx = vp.xWorldToView(x);
+            ctx.moveTo(vx, 0);
+            ctx.lineTo(vx, canvasH);
           }
           x += vp.gridStep;
         }
@@ -253,6 +271,10 @@ cr.define('gpu', function() {
         ctx.stroke();
       }
 
+      // begin rendering in world space
+      ctx.save();
+      vp.applyTransformToCanavs(ctx);
+
       // tracks
       var tr = new gpu.FastRectRenderer(ctx, viewLWorld, 2 * pixWidth,
                                         2 * pixWidth, viewRWorld, pallette);
@@ -304,7 +326,8 @@ cr.define('gpu', function() {
      * @return {boolean} true if a slice was found, otherwise false.
      */
     pick: function(wX, wY, onHitCallback) {
-      if (wY < this.offsetTop || wY >= this.offsetTop + this.offsetHeight)
+      var clientRect = this.getBoundingClientRect();
+      if (wY < clientRect.top || wY >= clientRect.bottom)
         return false;
       var x = gpu.findLowIndexInSortedIntervals(this.slices_,
           function(x) { return x.start; },
@@ -331,8 +354,9 @@ cr.define('gpu', function() {
      *     intersecting the interval.
      */
     pickRange: function(loWX, hiWX, loY, hiY, onHitCallback) {
-      var a = Math.max(loY, this.offsetTop);
-      var b = Math.min(hiY, this.offsetTop + this.offsetHeight);
+      var clientRect = this.getBoundingClientRect();
+      var a = Math.max(loY, clientRect.top);
+      var b = Math.min(hiY, clientRect.bottom);
       if (a > b)
         return;
 
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.css b/chrome/browser/resources/gpu_internals/timeline_view.css
index ab5a354..9828137 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.css
+++ b/chrome/browser/resources/gpu_internals/timeline_view.css
@@ -16,8 +16,17 @@ found in the LICENSE file.
   overflow: auto;
 }
 
-.timeline-view > .timeline > .timeline {
+.timeline-view .timeline-container {
   -webkit-box-flex: 1;
+  display: -webkit-box;
+  overflow: auto;
+}
+
+.timeline-view .timeline-container > * {
+  -webkit-box-flex: 1;
+}
+.timeline-view .summary-container * {
+  -webkit-user-select: text;
 }
 
 .timeline-view .summary-container {
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.js b/chrome/browser/resources/gpu_internals/timeline_view.js
index 5765b74..c4e1c3e 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.js
+++ b/chrome/browser/resources/gpu_internals/timeline_view.js
@@ -53,10 +53,10 @@ cr.define('gpu', function() {
       var summaryContainer_ = document.createElement('div');
       summaryContainer_.className = 'summary-container';
 
-      this.summary_ = document.createElement('pre');
-      this.summary_.className = 'summary';
+      this.summaryEl_ = document.createElement('pre');
+      this.summaryEl_.className = 'summary';
 
-      summaryContainer_.appendChild(this.summary_);
+      summaryContainer_.appendChild(this.summaryEl_);
       this.appendChild(this.timelineContainer_);
       this.appendChild(summaryContainer_);
 
@@ -88,9 +88,10 @@ cr.define('gpu', function() {
       console.log('selection changed');
       var timeline = this.timeline_;
       var selection = timeline.selection;
-      var outputDiv = this.summary_;
       if (!selection.length) {
-        outputDiv.textContent = timeline.keyHelp;
+        var oldScrollTop = this.timelineContainer_.scrollTop;
+        this.summaryEl_.textContent = timeline.keyHelp;
+        this.timelineContainer_.scrollTop = oldScrollTop;
         return;
       }
 
@@ -169,7 +170,9 @@ cr.define('gpu', function() {
       }
 
       // done
-      outputDiv.textContent = text;
+      var oldScrollTop = this.timelineContainer_.scrollTop;
+      this.summaryEl_.textContent = text;
+      this.timelineContainer_.scrollTop = oldScrollTop;
     }
   };
 
diff --git a/chrome/browser/resources/gpu_internals/tracing_controller_tests.js b/chrome/browser/resources/gpu_internals/tracing_controller_tests.js
index a331b9b..c361d24 100644
--- a/chrome/browser/resources/gpu_internals/tracing_controller_tests.js
+++ b/chrome/browser/resources/gpu_internals/tracing_controller_tests.js
@@ -44,6 +44,62 @@ var allTracingControllerTestDataSets;
          {'cat':'PERF','pid':22630,'tid':22631,'ts':827,'ph':'B','name':'A','args':{}},
          {'cat':'PERF','pid':22630,'tid':22631,'ts':854,'ph':'E','name':'A','args':{}}
        ]
+     },
+     {
+       name: "tall_trace",
+       events: [
+         {"cat":"PERF","pid":22630,"tid":22630,"ts":826,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22630,"ts":827,"ph":"B","name":"Asub","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22630,"ts":828,"ph":"E","name":"Asub","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22630,"ts":829,"ph":"B","name":"Asub","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22630,"ts":832,"ph":"E","name":"Asub","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22630,"ts":833,"ph":"E","name":"","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22631,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22631,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22632,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22632,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22633,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22633,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22634,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22634,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22635,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22635,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22636,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22636,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22637,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22637,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22638,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22638,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22639,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22639,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22610,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22610,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22611,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22611,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22612,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22612,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22613,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22613,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22614,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22614,"ts":848,"ph":"E","name":"A","args":{}},
+
+         {"cat":"PERF","pid":22630,"tid":22615,"ts":840,"ph":"B","name":"A","args":{}},
+         {"cat":"PERF","pid":22630,"tid":22615,"ts":848,"ph":"E","name":"A","args":{}},
+       ]
      }
    ];
    allTracingControllerTestDataSets = dataSets;
diff --git a/chrome/browser/resources/shared/js/cr/ui/tabs.js b/chrome/browser/resources/shared/js/cr/ui/tabs.js
index b2a4641..6afa566 100644
--- a/chrome/browser/resources/shared/js/cr/ui/tabs.js
+++ b/chrome/browser/resources/shared/js/cr/ui/tabs.js
@@ -2,29 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-
-/**
- * @fileoverview This implements a tabbox and related element.
- *
- * Usage:
- *  <tabbox>
- *    <tabs>
- *      <tab>Hello</tab>
- *      <tab>World</tab>
- *    </tabs>
- *    <tabpanels>
- *      <tabpanel>Hi</tabpanel>
- *      <tabpanel>Tellus</tabpanel>
- *    </tabpanels>
- *  </tabbox>
- *
- *  <script>
- *  cr.ui.decorate('tabbox', cr.ui.TabBox);
- *  </script>
- *
- *  The tab and tabpanel elements have a selected property and the tabbox have a
- *  selectedIndex property reflecting the selected tab.
- */
 cr.define('cr.ui', function() {
 
   /**