Bug 1448123 - Remove the xul scale in the Canvas Debugger;r=jryans draft
authorBrian Grinstead <bgrinstead@mozilla.com>
Thu, 22 Mar 2018 13:14:31 -0700
changeset 771243 7b9591f3279b109eff902b6fae5093073f4796cf
parent 771093 7771df14ea181add1dc4133f0f5559bf620bf976
push id103631
push userbgrinstead@mozilla.com
push dateThu, 22 Mar 2018 20:14:44 +0000
reviewersjryans
bugs1448123, 1448126
milestone61.0a1
Bug 1448123 - Remove the xul scale in the Canvas Debugger;r=jryans The same behavior can be achieved by scrolling through the calls. This is the only remaining non-test <xul:scale>, so once we stop using it here it can be removed (Bug 1448126). can be removed after MozReview-Commit-ID: 163a8o5e7BO
devtools/client/canvasdebugger/callslist.js
devtools/client/canvasdebugger/canvasdebugger.xul
devtools/client/canvasdebugger/test/browser.ini
devtools/client/canvasdebugger/test/browser_canvas-frontend-slider-01.js
devtools/client/canvasdebugger/test/browser_canvas-frontend-slider-02.js
devtools/client/themes/canvasdebugger.css
--- a/devtools/client/canvasdebugger/callslist.js
+++ b/devtools/client/canvasdebugger/callslist.js
@@ -10,46 +10,36 @@
  * (the calls list, rendering preview, thumbnails filmstrip etc.).
  */
 var CallsListView = extend(WidgetMethods, {
   /**
    * Initialization function, called when the tool is started.
    */
   initialize: function () {
     this.widget = new SideMenuWidget($("#calls-list"));
-    this._slider = $("#calls-slider");
     this._searchbox = $("#calls-searchbox");
     this._filmstrip = $("#snapshot-filmstrip");
 
     this._onSelect = this._onSelect.bind(this);
-    this._onSlideMouseDown = this._onSlideMouseDown.bind(this);
-    this._onSlideMouseUp = this._onSlideMouseUp.bind(this);
-    this._onSlide = this._onSlide.bind(this);
     this._onSearch = this._onSearch.bind(this);
     this._onScroll = this._onScroll.bind(this);
     this._onExpand = this._onExpand.bind(this);
     this._onStackFileClick = this._onStackFileClick.bind(this);
     this._onThumbnailClick = this._onThumbnailClick.bind(this);
 
     this.widget.addEventListener("select", this._onSelect);
-    this._slider.addEventListener("mousedown", this._onSlideMouseDown);
-    this._slider.addEventListener("mouseup", this._onSlideMouseUp);
-    this._slider.addEventListener("change", this._onSlide);
     this._searchbox.addEventListener("input", this._onSearch);
     this._filmstrip.addEventListener("wheel", this._onScroll);
   },
 
   /**
    * Destruction function, called when the tool is closed.
    */
   destroy: function () {
     this.widget.removeEventListener("select", this._onSelect);
-    this._slider.removeEventListener("mousedown", this._onSlideMouseDown);
-    this._slider.removeEventListener("mouseup", this._onSlideMouseUp);
-    this._slider.removeEventListener("change", this._onSlide);
     this._searchbox.removeEventListener("input", this._onSearch);
     this._filmstrip.removeEventListener("wheel", this._onScroll);
   },
 
   /**
    * Populates this container with a list of function calls.
    *
    * @param array functionCalls
@@ -134,24 +124,16 @@ var CallsListView = extend(WidgetMethods
       if (CanvasFront.INTERESTING_CALLS.has(call.name)) {
         view.setAttribute("interesting-call", "");
       }
     }
 
     // Flushes all the prepared function call items into this container.
     this.commit();
     window.emit(EVENTS.CALL_LIST_POPULATED);
-
-    // Resetting the function selection slider's value (shown in this
-    // container's toolbar) would trigger a selection event, which should be
-    // ignored in this case.
-    this._ignoreSliderChanges = true;
-    this._slider.value = 0;
-    this._slider.max = functionCalls.length - 1;
-    this._ignoreSliderChanges = false;
   },
 
   /**
    * Displays an image in the rendering preview of this container, generated
    * for the specified draw call in the recorded animation frame snapshot.
    *
    * @param array screenshot
    *        A single "snapshot-image" instance received from the backend.
@@ -260,22 +242,16 @@ var CallsListView = extend(WidgetMethods
       $("#step-over").setAttribute("disabled", "true");
       $("#step-out").setAttribute("disabled", "true");
     } else {
       $("#resume").removeAttribute("disabled");
       $("#step-over").removeAttribute("disabled");
       $("#step-out").removeAttribute("disabled");
     }
 
-    // Correlate the currently selected item with the function selection
-    // slider's value. Avoid triggering a redundant selection event.
-    this._ignoreSliderChanges = true;
-    this._slider.value = this.selectedIndex;
-    this._ignoreSliderChanges = false;
-
     // Can't generate screenshots for function call actors loaded from disk.
     // XXX: Bug 984844.
     if (callItem.attachment.actor.isLoadedFromDisk) {
       return;
     }
 
     // To keep continuous selection buttery smooth (for example, while pressing
     // the DOWN key or moving the slider), only display the screenshot after
@@ -288,64 +264,16 @@ var CallsListView = extend(WidgetMethods
       frameSnapshot.generateScreenshotFor(functionCall).then(screenshot => {
         this.showScreenshot(screenshot);
         this.highlightedThumbnail = screenshot.index;
       }).catch(console.error);
     });
   },
 
   /**
-   * The mousedown listener for the call selection slider.
-   */
-  _onSlideMouseDown: function () {
-    this._isSliding = true;
-  },
-
-  /**
-   * The mouseup listener for the call selection slider.
-   */
-  _onSlideMouseUp: function () {
-    this._isSliding = false;
-  },
-
-  /**
-   * The change listener for the call selection slider.
-   */
-  _onSlide: function () {
-    // Avoid performing any operations when programatically changing the value.
-    if (this._ignoreSliderChanges) {
-      return;
-    }
-    let selectedFunctionCallIndex = this.selectedIndex = this._slider.value;
-
-    // While sliding, immediately show the most relevant thumbnail for a
-    // function call, for a nice diff-like animation effect between draws.
-    let thumbnails = SnapshotsListView.selectedItem.attachment.thumbnails;
-    let thumbnail = getThumbnailForCall(thumbnails, selectedFunctionCallIndex);
-
-    // Avoid drawing and highlighting if the selected function call has the
-    // same thumbnail as the last one.
-    if (thumbnail.index == this.highlightedThumbnail) {
-      return;
-    }
-    // If a thumbnail wasn't found (e.g. the backend avoids creating thumbnails
-    // when rendering offscreen), simply defer to the first available one.
-    if (thumbnail.index == -1) {
-      thumbnail = thumbnails[0];
-    }
-
-    let { index, width, height, flipped, pixels } = thumbnail;
-    this.highlightedThumbnail = index;
-
-    let screenshotNode = $("#screenshot-image");
-    screenshotNode.setAttribute("flipped", flipped);
-    drawBackground("screenshot-rendering", width, height, pixels);
-  },
-
-  /**
    * The input listener for the calls searchbox.
    */
   _onSearch: function (e) {
     let lowerCaseSearchToken = this._searchbox.value.toLowerCase();
 
     this.filterContents(e => {
       let call = e.attachment.actor;
       let name = call.name.toLowerCase();
--- a/devtools/client/canvasdebugger/canvasdebugger.xul
+++ b/devtools/client/canvasdebugger/canvasdebugger.xul
@@ -101,19 +101,16 @@
                              oncommand="CallsListView._onStepIn()"/>
               <toolbarbutton id="step-out"
                              class="devtools-toolbarbutton"
                              oncommand="CallsListView._onStepOut()"/>
             </hbox>
             <toolbarbutton id="debugging-toolbar-sizer-button"
                            class="devtools-toolbarbutton"
                            label=""/>
-            <scale id="calls-slider"
-                   movetoclick="true"
-                   flex="100"/>
             <textbox id="calls-searchbox"
                      class="devtools-filterinput"
                      placeholder="&canvasDebuggerUI.searchboxPlaceholder;"
                      type="search"
                      flex="1"/>
           </toolbar>
           <vbox id="calls-list" flex="1"/>
         </vbox>
--- a/devtools/client/canvasdebugger/test/browser.ini
+++ b/devtools/client/canvasdebugger/test/browser.ini
@@ -48,18 +48,16 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_canvas-frontend-img-thumbnails-02.js]
 [browser_canvas-frontend-open.js]
 [browser_canvas-frontend-record-01.js]
 [browser_canvas-frontend-record-02.js]
 [browser_canvas-frontend-record-03.js]
 [browser_canvas-frontend-record-04.js]
 [browser_canvas-frontend-reload-01.js]
 [browser_canvas-frontend-reload-02.js]
-[browser_canvas-frontend-slider-01.js]
-[browser_canvas-frontend-slider-02.js]
 [browser_canvas-frontend-snapshot-select-01.js]
 [browser_canvas-frontend-snapshot-select-02.js]
 [browser_canvas-frontend-stepping.js]
 [browser_canvas-frontend-stop-01.js]
 [browser_canvas-frontend-stop-02.js]
 [browser_canvas-frontend-stop-03.js]
 [browser_profiling-canvas.js]
 [browser_profiling-webgl.js]
deleted file mode 100644
--- a/devtools/client/canvasdebugger/test/browser_canvas-frontend-slider-01.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-/**
- * Tests if the slider in the calls list view works as advertised.
- */
-
-async function ifTestingSupported() {
-  let { target, panel } = await initCanvasDebuggerFrontend(SIMPLE_CANVAS_URL);
-  let { window, $, EVENTS, SnapshotsListView, CallsListView } = panel.panelWin;
-
-  await reload(target);
-
-  let recordingFinished = once(window, EVENTS.SNAPSHOT_RECORDING_FINISHED);
-  let callListPopulated = once(window, EVENTS.CALL_LIST_POPULATED);
-  SnapshotsListView._onRecordButtonClick();
-  await Promise.all([recordingFinished, callListPopulated]);
-
-  is(CallsListView.selectedIndex, -1,
-    "No item in the function calls list should be initially selected.");
-
-  is($("#calls-slider").value, 0,
-    "The slider should be moved all the way to the start.");
-  is($("#calls-slider").min, 0,
-    "The slider minimum value should be 0.");
-  is($("#calls-slider").max, 7,
-    "The slider maximum value should be 7.");
-
-  CallsListView.selectedIndex = 1;
-  is($("#calls-slider").value, 1,
-    "The slider should be changed according to the current selection.");
-
-  $("#calls-slider").value = 2;
-  is(CallsListView.selectedIndex, 2,
-    "The calls selection should be changed according to the current slider value.");
-
-  await teardown(panel);
-  finish();
-}
deleted file mode 100644
--- a/devtools/client/canvasdebugger/test/browser_canvas-frontend-slider-02.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-/**
- * Tests if the slider in the calls list view works as advertised.
- */
-
-async function ifTestingSupported() {
-  let { target, panel } = await initCanvasDebuggerFrontend(SIMPLE_CANVAS_URL);
-  let { window, $, EVENTS, gFront, SnapshotsListView, CallsListView } = panel.panelWin;
-
-  await reload(target);
-
-  let recordingFinished = once(window, EVENTS.SNAPSHOT_RECORDING_FINISHED);
-  let callListPopulated = once(window, EVENTS.CALL_LIST_POPULATED);
-  let thumbnailsDisplayed = once(window, EVENTS.THUMBNAILS_DISPLAYED);
-  SnapshotsListView._onRecordButtonClick();
-  await Promise.all([recordingFinished, callListPopulated, thumbnailsDisplayed]);
-
-  let firstSnapshot = SnapshotsListView.getItemAtIndex(0);
-  let firstSnapshotOverview = await firstSnapshot.attachment.actor.getOverview();
-
-  let thumbnails = firstSnapshotOverview.thumbnails;
-  is(thumbnails.length, 4,
-    "There should be 4 thumbnails cached for the snapshot item.");
-
-  let thumbnailImageElementSet = waitForMozSetImageElement(window);
-  $("#calls-slider").value = 1;
-  let thumbnailPixels = await thumbnailImageElementSet;
-
-  ok(sameArray(thumbnailPixels, thumbnails[0].pixels),
-    "The screenshot element should have a thumbnail as an immediate background.");
-
-  await once(window, EVENTS.CALL_SCREENSHOT_DISPLAYED);
-  ok(true, "The full-sized screenshot was displayed for the item at index 1.");
-
-  thumbnailImageElementSet = waitForMozSetImageElement(window);
-  $("#calls-slider").value = 2;
-  thumbnailPixels = await thumbnailImageElementSet;
-
-  ok(sameArray(thumbnailPixels, thumbnails[1].pixels),
-    "The screenshot element should have a thumbnail as an immediate background.");
-
-  await once(window, EVENTS.CALL_SCREENSHOT_DISPLAYED);
-  ok(true, "The full-sized screenshot was displayed for the item at index 2.");
-
-  thumbnailImageElementSet = waitForMozSetImageElement(window);
-  $("#calls-slider").value = 7;
-  thumbnailPixels = await thumbnailImageElementSet;
-
-  ok(sameArray(thumbnailPixels, thumbnails[3].pixels),
-    "The screenshot element should have a thumbnail as an immediate background.");
-
-  await once(window, EVENTS.CALL_SCREENSHOT_DISPLAYED);
-  ok(true, "The full-sized screenshot was displayed for the item at index 7.");
-
-  thumbnailImageElementSet = waitForMozSetImageElement(window);
-  $("#calls-slider").value = 4;
-  thumbnailPixels = await thumbnailImageElementSet;
-
-  ok(sameArray(thumbnailPixels, thumbnails[2].pixels),
-    "The screenshot element should have a thumbnail as an immediate background.");
-
-  await once(window, EVENTS.CALL_SCREENSHOT_DISPLAYED);
-  ok(true, "The full-sized screenshot was displayed for the item at index 4.");
-
-  thumbnailImageElementSet = waitForMozSetImageElement(window);
-  $("#calls-slider").value = 0;
-  thumbnailPixels = await thumbnailImageElementSet;
-
-  ok(sameArray(thumbnailPixels, thumbnails[0].pixels),
-    "The screenshot element should have a thumbnail as an immediate background.");
-
-  await once(window, EVENTS.CALL_SCREENSHOT_DISPLAYED);
-  ok(true, "The full-sized screenshot was displayed for the item at index 0.");
-
-  await teardown(panel);
-  finish();
-}
-
-function waitForMozSetImageElement(panel) {
-  return new Promise((resolve, reject) => {
-    panel._onMozSetImageElement = resolve;
-  });
-}
-
-function sameArray(a, b) {
-  if (a.length != b.length) {
-    return false;
-  }
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) {
-      return false;
-    }
-  }
-  return true;
-}
--- a/devtools/client/themes/canvasdebugger.css
+++ b/devtools/client/themes/canvasdebugger.css
@@ -123,24 +123,16 @@
 #step-in {
   list-style-image: url(images/debugger-step-in.svg);
 }
 
 #step-out {
   list-style-image: url(images/debugger-step-out.svg);
 }
 
-#calls-slider {
-  padding-inline-end: 24px;
-}
-
-#calls-slider .scale-slider {
-  margin: 0;
-}
-
 #debugging-toolbar-sizer-button {
   /* This button's only purpose in life is to make the
      container .devtools-toolbar have the right height. */
   visibility: hidden;
   min-width: 1px;
 }
 
 /* Calls list pane */