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
--- 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 */