Various fixes to gpu tracing UI

- Use hidden instead of css style to hide things.
- Add keyboard short help to summary when there is no selection.
- For summation, report total per group as well as total across all slices
- Fix stalling during mousemove by not showing duration text. Not best fix but better than nothing
- Uniquely generate slice colors based on string hashcode.

Review URL: http://codereview.chromium.org/6792039

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

8 files changed, 83 insertions, 38 deletions

diff --git a/chrome/browser/resources/gpu_internals/info_view.js b/chrome/browser/resources/gpu_internals/info_view.js
index bd62909..d4d5ff7 100644
--- a/chrome/browser/resources/gpu_internals/info_view.js
+++ b/chrome/browser/resources/gpu_internals/info_view.js
@@ -132,7 +132,7 @@ cr.define('gpu', function() {
               link.textContent = bugid;
               link.href = 'http://crbug.com/' + bugid;
               reasonEl.appendChild(link);
-              nreasons ++;
+              nreasons++;
             }
 
             for (j = 0; j < reason.webkit_bugs.length; ++j) {
@@ -148,7 +148,7 @@ cr.define('gpu', function() {
 
               link.href = 'https://bugs.webkit.org/show_bug.cgi?id=' + bugid;
               reasonEl.appendChild(link);
-              nreasons ++;
+              nreasons++;
             }
 
             reasonsEl.appendChild(reasonEl);
diff --git a/chrome/browser/resources/gpu_internals/sorted_array_utils.js b/chrome/browser/resources/gpu_internals/sorted_array_utils.js
index edb4349..b99d369 100644
--- a/chrome/browser/resources/gpu_internals/sorted_array_utils.js
+++ b/chrome/browser/resources/gpu_internals/sorted_array_utils.js
@@ -126,7 +126,7 @@ cr.define('gpu', function() {
       return;
     }
 
-    for(var n = ary.length; i < n; i++) {
+    for (var n = ary.length; i < n; i++) {
       var lo = mapLoFn(ary[i]);
       if (lo >= hiVal)
         break;
diff --git a/chrome/browser/resources/gpu_internals/timeline.css b/chrome/browser/resources/gpu_internals/timeline.css
index 3de191b..0c9780f 100644
--- a/chrome/browser/resources/gpu_internals/timeline.css
+++ b/chrome/browser/resources/gpu_internals/timeline.css
@@ -18,10 +18,6 @@ found in the LICENSE file.
   height: 18px;
 }
 
-.timeline-drag-box-hidden {
-  display: 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 997cb9e..0e994b4 100644
--- a/chrome/browser/resources/gpu_internals/timeline.js
+++ b/chrome/browser/resources/gpu_internals/timeline.js
@@ -136,7 +136,7 @@ cr.define('gpu', function() {
       this.appendChild(this.tracks_);
 
       this.dragBox_ = this.ownerDocument.createElement('div');
-      this.dragBox_.className = 'timeline-drag-box timeline-drag-box-hidden';
+      this.dragBox_.className = 'timeline-drag-box';
       this.appendChild(this.dragBox_);
 
       // The following code uses a setInterval to monitor the timeline control
@@ -290,6 +290,13 @@ cr.define('gpu', function() {
       }
     },
 
+    get keyHelp() {
+      return 'Keyboard shortcuts:\n' +
+          ' w/s   : Zoom in/out\n' +
+          ' a/d   : Pan left/right\n' +
+          ' e     : Center on mouse';
+    },
+
     get selection() {
       return this.selection_;
     },
@@ -300,11 +307,11 @@ cr.define('gpu', function() {
     },
 
     showDragBox_: function() {
-      this.dragBox_.classList.remove('timeline-drag-box-hidden');
+      this.dragBox_.hidden = false;
     },
 
     hideDragBox_: function() {
-      this.dragBox_.classList.add('timeline-drag-box-hidden');
+      this.dragBox_.hidden = true;
     },
 
     setDragBoxPosition_: function(eDown, eCur) {
diff --git a/chrome/browser/resources/gpu_internals/timeline_model.js b/chrome/browser/resources/gpu_internals/timeline_model.js
index 2196c11..d02ee0a 100644
--- a/chrome/browser/resources/gpu_internals/timeline_model.js
+++ b/chrome/browser/resources/gpu_internals/timeline_model.js
@@ -138,11 +138,14 @@ cr.define('gpu', function() {
       var threadStateByPTID = {};
 
       var nameToColorMap = {};
-      var nextColorId = 0;
       function getColor(name) {
         if (!(name in nameToColorMap)) {
-          nameToColorMap[name] = nextColorId;
-          nextColorId = (nextColorId + 1) % numColorIds;
+          // Compute a simplistic hashcode of the string so we get consistent
+          // coloring across traces.
+          var hash = 0;
+          for (var i = 0; i < name.length; ++i)
+            hash = (hash + 37 * hash + name.charCodeAt(i)) % 0xFFFFFFFF;
+          nameToColorMap[name] = hash % numColorIds;
         }
         return nameToColorMap[name];
       }
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.css b/chrome/browser/resources/gpu_internals/timeline_view.css
index 90d3a4a..c418360 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.css
+++ b/chrome/browser/resources/gpu_internals/timeline_view.css
@@ -23,13 +23,18 @@ found in the LICENSE file.
   -webkit-box-flex: 1;
 }
 
-#timeline-selection-summary {
+#timeline-selection-summary-container {
   border-top: 1px solid black;
-  max-height: 300px;
-  min-height: 100px;
+  max-height: 250px;
+  min-height: 250px;
   font-family: monospace;
+  overflow: auto;
+}
+
+#timeline-selection-summary {
+  margin: 2px;
 }
 
 #timeline-selection-summary ul {
   margin: 0px;
-}
\ No newline at end of file
+}
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.html b/chrome/browser/resources/gpu_internals/timeline_view.html
index e908dca..30e4641 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.html
+++ b/chrome/browser/resources/gpu_internals/timeline_view.html
@@ -6,6 +6,8 @@ found in the LICENSE file.
 <div id="timeline-view" label="Timeline">
   <div id="timeline-view-timeline-container">
   </div>
-  <pre id="timeline-selection-summary">
-  </pre>
+  <div id="timeline-selection-summary-container">
+    <pre id="timeline-selection-summary">
+    </pre>
+  </div>
 </div>
diff --git a/chrome/browser/resources/gpu_internals/timeline_view.js b/chrome/browser/resources/gpu_internals/timeline_view.js
index d0a3a4f..12f9dea 100644
--- a/chrome/browser/resources/gpu_internals/timeline_view.js
+++ b/chrome/browser/resources/gpu_internals/timeline_view.js
@@ -11,6 +11,28 @@ cr.define('gpu', function() {
   function tsRound(ts) {
     return Math.round(ts * 100.0) / 100.0;
   }
+  function getPadding(text, width) {
+    width = width || 0;
+
+    if (typeof text != 'string')
+      text = String(text);
+
+    if (text.length >= width)
+      return '';
+
+    var pad = '';
+    for (var i = 0; i < width - text.length; i++)
+      pad += ' ';
+    return pad;
+  }
+
+  function leftAlign(text, width) {
+    return text + getPadding(text, width);
+  }
+
+  function rightAlign(text, width) {
+    return getPadding(text, width) + text;
+  }
 
   /**
    * TimelineView
@@ -64,29 +86,21 @@ cr.define('gpu', function() {
         this.timeline_.model = this.timelineModel_;
         timelineContainer.appendChild(this.timeline_);
         this.timeline_.onResize();
-        this.timeline_.addEventListener('selectionChanging',
-                                        this.onSelectionChanging_.bind(this));
         this.timeline_.addEventListener('selectionChange',
                                         this.onSelectionChanged_.bind(this));
+        this.onSelectionChanged_();
       } else {
         this.timeline_ = null;
       }
     },
-    onSelectionChanging_: function(e) {
-      var text =
-          'Start:    ' + tsRound(e.loWX) + 'ms\n' +
-          'End:      ' + tsRound(e.hiWX) + 'ms\n' +
-          'Duration: ' + tsRound(e.hiWX - e.loWX) + 'ms\n';
-      var outputElem = $('timeline-selection-summary');
-      outputElem.textContent = text;
-    },
 
     onSelectionChanged_: function(e) {
+      console.log('selection changed');
       var timeline = this.timeline_;
       var selection = timeline.selection;
       if (!selection.length) {
         var outputDiv = $('timeline-selection-summary');
-        outputDiv.textContent = '';
+        outputDiv.textContent = timeline.keyHelp;
         return;
       }
 
@@ -96,12 +110,9 @@ cr.define('gpu', function() {
       var tsHi = Math.max.apply(Math, selection.map(
           function(s) {return s.slice.end;}));
 
-      text += 'Start:    ' + tsRound(tsLo) + 'ms<br>';
-      text += 'Duration: ' + tsRound(tsHi - tsLo) + 'ms<br>';
-
       // compute total selection duration
       var titles = selection.map(function(i) { return i.slice.title; });
-      text += '<ul>';
+
       var slicesByTitle = {};
       for (var i = 0; i < selection.length; i++) {
         var slice = selection[i].slice;
@@ -111,13 +122,34 @@ cr.define('gpu', function() {
           };
         slicesByTitle[slice.title].slices.push(slice);
       }
+      var totalDuration = 0;
       for (var sliceGroupTitle in slicesByTitle) {
         var sliceGroup = slicesByTitle[sliceGroupTitle];
-        text += '<li>' +
-            sliceGroupTitle + ': ' + sliceGroup.slices.length +
-            '</li>';
+        var duration = 0;
+        for (i = 0; i < sliceGroup.slices.length; i++)
+          duration += sliceGroup.slices[i].duration;
+        totalDuration += duration;
+
+        text += ' ' +
+            leftAlign(sliceGroupTitle, 55) + ': ' +
+            rightAlign(tsRound(duration) + 'ms', 12) + '   ' +
+            rightAlign(String(sliceGroup.slices.length), 5) + ' occurrences' +
+            '\n';
       }
-      text += '</ul>';
+
+      text += leftAlign('*Totals', 55) + ' : ' +
+          rightAlign(tsRound(totalDuration) + 'ms', 12) + '   ' +
+          rightAlign(String(selection.length), 5) + ' occurrences' +
+            '\n';
+
+      text += '\n';
+
+      text += leftAlign('Selection start', 55) + ' : ' +
+          rightAlign(tsRound(tsLo) + 'ms', 12) +
+            '\n';
+      text += leftAlign('Selection extent', 55) + ' : ' +
+          rightAlign(tsRound(tsHi - tsLo) + 'ms', 12) +
+            '\n';
 
       // done
       var outputDiv = $('timeline-selection-summary');