Bug 1508656 - migrate cancel picker to nodePicker; r=ochameau
authoryulia <ystartsev@mozilla.com>
Tue, 18 Dec 2018 08:45:16 +0000
changeset 452253 d78f0458b4d92593467b0e0060b63818d07ab94c
parent 452252 a20625c5026f87156401153a08a285f4d4ea31ae
child 452254 fbf96ce2270ba895f2a331105648d00340589f10
push id35299
push userbtara@mozilla.com
push dateWed, 02 Jan 2019 21:34:59 +0000
treeherdermozilla-central@7e75579b27d0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersochameau
bugs1508656
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1508656 - migrate cancel picker to nodePicker; r=ochameau Depends on D12126 Differential Revision: https://phabricator.services.mozilla.com/D12290
devtools/client/framework/toolbox.js
devtools/client/inspector/markup/markup.js
devtools/client/inspector/test/browser_inspector_highlighter-cancel.js
devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
devtools/shared/fronts/inspector/node-picker.js
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1289,46 +1289,44 @@ Toolbox.prototype = {
    * functionality instead of the default behavior of toggling the console.
    */
   _onPickerKeypress: function(event) {
     if (event.keyCode === KeyCodes.DOM_VK_ESCAPE) {
       const currentPanel = this.getCurrentPanel();
       if (currentPanel.cancelPicker) {
         currentPanel.cancelPicker();
       } else {
-        this.highlighterUtils.cancelPicker();
+        this.inspector.nodePicker.cancel();
       }
       // Stop the console from toggling.
       event.stopImmediatePropagation();
     }
   },
 
   _onPickerStarting: async function() {
     this.pickerButton.isChecked = true;
     await this.selectTool("inspector", "inspect_dom");
     this.on("select", this.inspector.nodePicker.stop);
   },
 
   _onPickerStarted: async function() {
     this.doc.addEventListener("keypress", this._onPickerKeypress, true);
-    this.inspector.nodePicker.on("picker-node-canceled", this._onPickerCanceled);
   },
 
   _onPickerStopped: function() {
     this.off("select", this.inspector.nodePicker.stop);
-    this.inspector.nodePicker.off("picker-node-canceled", this._onPickerCanceled);
     this.doc.removeEventListener("keypress", this._onPickerKeypress, true);
     this.pickerButton.isChecked = false;
   },
 
   /**
    * When the picker is canceled, make sure the toolbox
    * gets the focus.
    */
-  _onPickerCanceled: function(data) {
+  _onPickerCanceled: function() {
     this.win.focus();
   },
 
   /**
    * The element picker button enables the ability to select a DOM node by clicking
    * it on the page.
    */
   _buildPickerButton() {
@@ -2723,16 +2721,17 @@ Toolbox.prototype = {
         this._inspector = await this.target.getInspector();
         this._walker = this.inspector.walker;
         this._highlighter = this.inspector.highlighter;
         this._selection = this.inspector.selection;
 
         this.inspector.nodePicker.on("picker-starting", this._onPickerStarting);
         this.inspector.nodePicker.on("picker-started", this._onPickerStarted);
         this.inspector.nodePicker.on("picker-stopped", this._onPickerStopped);
+        this.inspector.nodePicker.on("picker-node-canceled", this._onPickerCanceled);
         this.walker.on("highlighter-ready", this._highlighterReady);
         this.walker.on("highlighter-hide", this._highlighterHidden);
         this._selection.on("new-node-front", this._onNewSelectedNodeFront);
       }.bind(this))();
     }
     return this._initInspector;
   },
 
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -116,17 +116,19 @@ function MarkupView(inspector, frame, co
   this._elt.addEventListener("mousemove", this._onMouseMove);
   this._elt.addEventListener("mouseout", this._onMouseOut);
   this._frame.addEventListener("focus", this._onFocus);
   this.inspector.selection.on("new-node-front", this._onNewSelection);
   this.walker.on("display-change", this._onDisplayChange);
   this.walker.on("mutations", this._mutationObserver);
   this.win.addEventListener("copy", this._onCopy);
   this.win.addEventListener("mouseup", this._onMouseUp);
-  this.toolbox.on("picker-canceled", this._onToolboxPickerCanceled);
+  this.inspector.inspector.nodePicker.on(
+    "picker-node-canceled", this._onToolboxPickerCanceled
+  );
   this.toolbox.on("picker-node-hovered", this._onToolboxPickerHover);
 
   if (flags.testing) {
     // In tests, we start listening immediately to avoid having to simulate a mousemove.
     this._initTooltips();
   } else {
     this._elt.addEventListener("mousemove", () => {
       this._initTooltips();
--- a/devtools/client/inspector/test/browser_inspector_highlighter-cancel.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cancel.js
@@ -26,17 +26,17 @@ add_task(async function() {
 
   await cancelPickerByShortcut();
   ok(isSelectedMarkupNodeInView(),
      "The currently selected node is focused back on the screen.");
 
   function cancelPickerByShortcut() {
     info("Key pressed. Waiting for picker to be canceled.");
     testActor.synthesizeKey({key: "VK_ESCAPE", options: {}});
-    return inspector.toolbox.once("picker-canceled");
+    return inspector.inspector.nodePicker.once("picker-node-canceled");
   }
 
   function moveMouseOver(selector) {
     info(`Waiting for element ${selector} to be hovered in the markup view`);
     testActor.synthesizeMouse({
       options: {type: "mousemove"},
       center: true,
       selector: selector,
--- a/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js
@@ -19,17 +19,17 @@ add_task(async function() {
   testActor.synthesizeMouse({
     options: {type: "mousemove"},
     center: true,
     selector: "div",
   });
   await onHover;
 
   info("Press escape and wait for the picker to stop");
-  const onPickerStopped = toolbox.inspector.nodePicker.once("picker-stopped");
+  const onPickerStopped = toolbox.inspector.nodePicker.once("picker-node-canceled");
   testActor.synthesizeKey({
     key: "VK_ESCAPE",
     options: {},
   });
   await onPickerStopped;
 
   info("Press escape again and wait for the split console to open");
   const onSplitConsole = toolbox.once("split-console");
--- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -164,17 +164,17 @@ class SwatchColorPickerTooltip extends S
   }
 
   _openEyeDropper() {
     const {inspector, toolbox, telemetry} = this.inspector;
 
     telemetry.getHistogramById(TELEMETRY_PICKER_EYEDROPPER_OPEN_COUNT).add(true);
 
     // cancelling picker(if it is already selected) on opening eye-dropper
-    toolbox.highlighterUtils.cancelPicker();
+    inspector.nodePicker.cancel();
 
     // pickColorFromPage will focus the content document. If the devtools are in a
     // separate window, the colorpicker tooltip will be closed before pickColorFromPage
     // resolves. Flip the flag early to avoid issues with onTooltipHidden().
     this.eyedropperOpen = true;
 
     inspector.pickColorFromPage({copyOnSelect: false}).then(() => {
       // close the colorpicker tooltip so that only the eyedropper is open.
--- a/devtools/shared/fronts/inspector/node-picker.js
+++ b/devtools/shared/fronts/inspector/node-picker.js
@@ -95,18 +95,18 @@ class NodePicker extends EventEmitter {
     this.walker.off("picker-node-canceled", this._onCanceled);
     this.emit("picker-stopped");
   }
 
   /**
    * Stop the picker, but also emit an event that the picker was canceled.
    */
   async cancel() {
+    await this.stop();
     this.emit("picker-node-canceled");
-    await this.stop();
   }
 
   /**
    * When a node is hovered by the mouse when the highlighter is in picker mode
    * @param {Object} data Information about the node being hovered
    */
   _onHovered(data) {
     this.emit("picker-node-hovered", data.node);