Add collapse button on tall tracks to about:tracing

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

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

3 files changed, 96 insertions, 18 deletions

diff --git a/chrome/browser/resources/tracing/timeline.css b/chrome/browser/resources/tracing/timeline.css
index a0c7324..5aea296 100644
--- a/chrome/browser/resources/tracing/timeline.css
+++ b/chrome/browser/resources/tracing/timeline.css
@@ -23,24 +23,34 @@
   position: relative;
 }
 
-.timeline-track-close-button {
-  left: 0px;
-  position: absolute;
-  top: 0px;
-}
-
 .timeline-track-button {
-  color: rgba(0,0,0,0.1);
+  background-color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0,0,0,0.2);
   font-size: 10px;
   height: 12px;
   text-align: center;
   width: 12px;
 }
+
 .timeline-track-button:hover {
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 255, 255, 1.0);
+  border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 25%;
   box-shadow: 0 0 .05em rgba(0,0,0,0.4);
-  color: rgba(0,0,0,0.5);
+  color: rgba(0,0,0,1);
+}
+
+.timeline-track-close-button {
+  left: 0px;
+  position: absolute;
+  top: 0px;
+}
+
+.timeline-track-collapse-button {
+  left: 15px;
+  position: absolute;
+  top: 0px;
 }
 
 .timeline-thread-track:not(:first-child) {
diff --git a/chrome/browser/resources/tracing/timeline_track.js b/chrome/browser/resources/tracing/timeline_track.js
index 3f57185..0c73d06 100644
--- a/chrome/browser/resources/tracing/timeline_track.js
+++ b/chrome/browser/resources/tracing/timeline_track.js
@@ -111,7 +111,7 @@ cr.define('tracing', function() {
     }
   };
 
-  function addCloseButtonElement(el) {
+  function addControlButtonElements(el, canCollapse) {
     var closeEl = document.createElement('div');
     closeEl.classList.add('timeline-track-button');
     closeEl.classList.add('timeline-track-close-button');
@@ -120,6 +120,22 @@ cr.define('tracing', function() {
       el.style.display = 'None';
     });
     el.appendChild(closeEl);
+
+    if (canCollapse) {
+      var collapseEl = document.createElement('div');
+      collapseEl.classList.add('timeline-track-button');
+      collapseEl.classList.add('timeline-track-collapse-button');
+      var minus = "\u2212"; // minus sign;
+      var plus = "\u002b"; // plus sign;
+      collapseEl.textContent = minus;
+      var collapsed = false;
+      collapseEl.addEventListener('click', function() {
+        collapsed = !collapsed;
+        el.collapsedDidChange(collapsed);
+        collapseEl.textContent = collapsed ? plus : minus;
+      });
+      el.appendChild(collapseEl);
+    }
   }
 
   /**
@@ -214,7 +230,26 @@ cr.define('tracing', function() {
           }
         }
       }
-      addCloseButtonElement(this);
+      addControlButtonElements(this, this.tracks_.length >= 4);
+    },
+
+    collapsedDidChange: function(collapsed) {
+      if (collapsed) {
+        var h = parseInt(this.tracks_[0].height);
+        for (var i = 0; i < this.tracks_.length; ++i) {
+          if (h > 2) {
+            this.tracks_[i].height = Math.floor(h) + 'px';
+          } else {
+            this.tracks_[i].style.display = 'None';
+          }
+          h = h * 0.5;
+        }
+      } else {
+        for (var i = 0; i < this.tracks_.length; ++i) {
+          this.tracks_[i].height = this.tracks_[0].height;
+          this.tracks_[i].style.display = "";
+        }
+      }
     }
   };
 
@@ -282,7 +317,7 @@ cr.define('tracing', function() {
         this.tracks_[0].heading = this.heading_;
         this.tracks_[0].tooltip = this.tooltip_;
       }
-      addCloseButtonElement(this);
+      addControlButtonElements(this, false);
     }
   };
 
@@ -369,10 +404,13 @@ cr.define('tracing', function() {
         if (!this.viewport_)
           return;
 
-        if (this.canvas_.width != this.canvasContainer_.clientWidth)
-          this.canvas_.width = this.canvasContainer_.clientWidth;
-        if (this.canvas_.height != this.canvasContainer_.clientHeight)
-          this.canvas_.height = this.canvasContainer_.clientHeight;
+        var style = window.getComputedStyle(this.canvasContainer_);
+        var style_width = parseInt(style.width);
+        var style_height = parseInt(style.height);
+        if (this.canvas_.width != style_width)
+          this.canvas_.width = style_width;
+        if (this.canvas_.height != style_height)
+          this.canvas_.height = style_height;
 
         this.redraw();
       }.bind(this), this);
@@ -488,8 +526,13 @@ cr.define('tracing', function() {
       this.invalidate();
     },
 
+    get height() {
+      return window.getComputedStyle(this).height;
+    },
+
     set height(height) {
       this.style.height = height;
+      this.invalidate();
     },
 
     labelWidth: function(title) {
@@ -877,7 +920,7 @@ cr.define('tracing', function() {
 
     decorate: function() {
       this.classList.add('timeline-counter-track');
-      addCloseButtonElement(this);
+      addControlButtonElements(this, false);
     },
 
     get counter() {
diff --git a/chrome/browser/resources/tracing/timeline_track_test.html b/chrome/browser/resources/tracing/timeline_track_test.html
index e62a779..7708093 100644
--- a/chrome/browser/resources/tracing/timeline_track_test.html
+++ b/chrome/browser/resources/tracing/timeline_track_test.html
@@ -321,7 +321,32 @@ found in the LICENSE file.
     track.thread = thread;
     track.viewport = new TimelineViewport(testEl);
     track.viewport.setPanAndScale(0,
-        track.clientWidth / (1.1 * (thread.maxTimestamp - thread.minTimestamp));
+        track.clientWidth / (1.1 * (thread.maxTimestamp - thread.minTimestamp)));
+  }
+
+  function testTimelineThreadTrackWithTallSlices() {
+    var testEl = getTestDiv('testTimelineThreadTrackWithTallSlices');
+    var track = TimelineThreadTrack();
+    testEl.appendChild(track);
+    track.heading = 'testTimelineThreadTrackWithTallSlices';
+    var thread = new TimelineThread(new TimelineProcess(7), 1);
+    thread.subRows = [
+      [new TimelineThreadSlice('a', 1, 0, {}, 1)],
+      [new TimelineThreadSlice('b', 2, 0.1, {}, 0.8)],
+      [new TimelineThreadSlice('c', 3, 0.15, {}, 0.70)],
+      [new TimelineThreadSlice('d', 4, 0.20, {}, 0.50)],
+      [new TimelineThreadSlice('e', 5, 0.30, {}, 0.28)],
+      [new TimelineThreadSlice('e', 6, 0.35, {}, 0.20)],
+      [new TimelineThreadSlice('f', 7, 0.40, {}, 0.10)]
+    ];
+    thread.updateBounds();
+    track.heading = 'thread tall';
+    track.headingWidth = '150px';
+    track.toolTip = thread.userFriendlyDetails + ':';
+    track.thread = thread;
+    track.viewport = new TimelineViewport(testEl);
+    track.viewport.setPanAndScale(0,
+        track.clientWidth / (1.1 * (thread.maxTimestamp - thread.minTimestamp)));
   }
 
   function testTimelineThreadTrackWithRegularAndAsyncSlices() {