Bug 1173049 - Markers on the edge of time range are hard to interact with, r=jsantell

browser/devtools/performance/modules/widgets/marker-details.js

@@ -36,23 +36,44 @@ function MarkerDetails(parent, splitter) {
 
   this._parent.addEventListener("click", this._onClick);
   this._splitter.addEventListener("mouseup", this._onSplitterMouseUp);
+
+  this.hidden = true;
 }
 
 MarkerDetails.prototype = {
   /**
    * Sets this view's width.
-   * @param boolean
+   * @param number
    */
   set width(value) {
     this._parent.setAttribute("width", value);
   },
 
+  /**
+   * Sets this view's width.
+   * @return number
+   */
+  get width() {
+    return +this._parent.getAttribute("width");
+  },
+
   /**
    * Sets this view's visibility.
    * @param boolean
    */
   set hidden(value) {
-    this._parent.hidden = value;
+    if (this._parent.hidden != value) {
+      this._parent.hidden = value;
+      this.emit("resize");
+    }
+  },
+
+  /**
+   * Gets this view's visibility.
+   * @param boolean
+   */
+  get hidden() {
+    return this._parent.hidden;
   },
 
   /**

browser/devtools/performance/modules/widgets/marker-view.js

@@ -11,14 +11,15 @@
 const { Cc, Ci, Cu, Cr } = require("chrome");
 const { Heritage } = require("resource:///modules/devtools/ViewHelpers.jsm");
 const { AbstractTreeItem } = require("resource:///modules/devtools/AbstractTreeItem.jsm");
+
 loader.lazyRequireGetter(this, "MarkerUtils",
   "devtools/performance/marker-utils");
 
-
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 const LEVEL_INDENT = 10; // px
 const ARROW_NODE_OFFSET = -15; // px
+const WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS = 20; // px
 const WATERFALL_MARKER_SIDEBAR_WIDTH = 175; // px
 const WATERFALL_MARKER_TIMEBAR_WIDTH_MIN = 5; // px
 
@@ -55,7 +56,9 @@ MarkerView.prototype = Heritage.extend(AbstractTreeItem.prototype, {
    * This should be invoked every time the container node is resized.
    */
   recalculateBounds: function() {
-    this.root._waterfallWidth = this.bounds.width - WATERFALL_MARKER_SIDEBAR_WIDTH;
+    this.root._waterfallWidth = this.bounds.width
+      - WATERFALL_MARKER_SIDEBAR_WIDTH
+      - WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS;
   },
 
   /**
@@ -289,4 +292,5 @@ function isMarkerInRange(e, start, end) {
 }
 
 exports.MarkerView = MarkerView;
+exports.WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS = WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS;
 exports.WATERFALL_MARKER_SIDEBAR_WIDTH = WATERFALL_MARKER_SIDEBAR_WIDTH;

browser/devtools/performance/test/browser_timeline-waterfall-background.js

@@ -9,6 +9,7 @@
 function* spawnTest() {
   let { target, panel } = yield initPerformance(SIMPLE_URL);
   let { $, EVENTS, PerformanceController, OverviewView, DetailsView, WaterfallView } = panel.panelWin;
+  let { WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS } = devtools.require("devtools/performance/marker-view");
 
   yield startRecording(panel);
   ok(true, "Recording has started.");
@@ -38,7 +39,8 @@ function* spawnTest() {
   let sidebarWidth = $(".waterfall-sidebar").getBoundingClientRect().width;
   let detailsWidth = $("#waterfall-details").getBoundingClientRect().width;
   let waterfallWidth = WaterfallView._markersRoot._waterfallWidth;
-  is(waterfallWidth, parentWidth - sidebarWidth - detailsWidth,
+
+  is(waterfallWidth, parentWidth - sidebarWidth - detailsWidth - WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS,
     "The waterfall width is correct.")
 
   ok(WaterfallView._waterfallHeader._canvas,

browser/devtools/performance/test/browser_timeline-waterfall-generic.js

@@ -7,7 +7,8 @@
 
 function* spawnTest() {
   let { target, panel } = yield initPerformance(SIMPLE_URL);
-  let { $, $$, EVENTS, PerformanceController, OverviewView, WaterfallView } = panel.panelWin;
+  let { $, $$, EVENTS, PerformanceController, OverviewView, WaterfallView, DetailsView } = panel.panelWin;
+  let { WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS } = devtools.require("devtools/performance/marker-view");
 
   yield startRecording(panel);
   ok(true, "Recording has started.");
@@ -20,9 +21,17 @@ function* spawnTest() {
   ok((yield waitUntil(() => PerformanceController.getCurrentRecording().getMarkers().length > 0)),
     "There are some markers available.");
 
+  let rendered = Promise.all([
+    DetailsView.selectView("waterfall"),
+    once(WaterfallView, EVENTS.WATERFALL_RENDERED)
+  ]);
+
   yield stopRecording(panel);
   ok(true, "Recording has ended.");
 
+  yield rendered;
+  ok(true, "Recording has rendered.");
+
   // Test the header container.
 
   ok($(".waterfall-header-container"),
@@ -58,6 +67,43 @@ function* spawnTest() {
   ok($$(".waterfall-tree-item > .waterfall-marker > .waterfall-marker-bar").length,
     "Some marker color bars should have been created inside the waterfall.");
 
+  // Test the sidebar
+
+  let detailsView = WaterfallView.details;
+  let markersRoot = WaterfallView._markersRoot;
+
+  let parentWidthBefore = $("#waterfall-view").getBoundingClientRect().width;
+  let sidebarWidthBefore = $(".waterfall-sidebar").getBoundingClientRect().width;
+  let detailsWidthBefore = $("#waterfall-details").getBoundingClientRect().width;
+
+  ok(detailsView.hidden,
+    "The details view in the waterfall view is hidden by default.");
+  is(detailsWidthBefore, 0,
+    "The details view width should be 0 when hidden.");
+  is(markersRoot._waterfallWidth, parentWidthBefore - sidebarWidthBefore - WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS,
+    "The waterfall width is correct.")
+
+  let receivedFocusEvent = markersRoot.once("focus");
+  let waterfallRerendered = once(WaterfallView, EVENTS.WATERFALL_RENDERED);
+  WaterfallView._markersRoot.getChild(0).focus();
+  yield receivedFocusEvent;
+  yield waterfallRerendered;
+
+  let parentWidthAfter = $("#waterfall-view").getBoundingClientRect().width;
+  let sidebarWidthAfter = $(".waterfall-sidebar").getBoundingClientRect().width;
+  let detailsWidthAfter = $("#waterfall-details").getBoundingClientRect().width;
+
+  ok(!detailsView.hidden,
+    "The details view in the waterfall view is now visible.");
+  is(parentWidthBefore, parentWidthAfter,
+    "The parent view's width should not have changed.");
+  is(sidebarWidthBefore, sidebarWidthAfter,
+    "The sidebar view's width should not have changed.");
+  isnot(detailsWidthAfter, 0,
+    "The details view width should not be 0 when visible.");
+  is(markersRoot._waterfallWidth, parentWidthAfter - sidebarWidthAfter - detailsWidthAfter - WATERFALL_MARKER_SIDEBAR_SAFE_BOUNDS,
+    "The waterfall width is correct (2).")
+
   yield teardown(panel);
   finish();
 }