Bug 1382600 - update inspector/shared to new event emitter. r=nchevobbe,pbro

MozReview-Commit-ID: LvRT0b6rpu3

--HG--
extra : rebase_source : 2ec1ebed5d42c1d272a6c547cb3e1125430b380c

devtools/client/inspector/flexbox/flexbox.js

@@ -20,7 +20,8 @@ class FlexboxInspector {
     this.store = inspector.store;
     this.walker = inspector.walker;
 
-    this.onHighlighterChange = this.onHighlighterChange.bind(this);
+    this.onHighlighterShown = this.onHighlighterShown.bind(this);
+    this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
     this.onReflow = throttle(this.onReflow, 500, this);
     this.onSidebarSelect = this.onSidebarSelect.bind(this);
     this.onToggleFlexboxHighlighter = this.onToggleFlexboxHighlighter.bind(this);
@@ -43,16 +44,16 @@ class FlexboxInspector {
       return;
     }
 
-    this.highlighters.on("flexbox-highlighter-hidden", this.onHighlighterChange);
-    this.highlighters.on("flexbox-highlighter-shown", this.onHighlighterChange);
+    this.highlighters.on("flexbox-highlighter-hidden", this.onHighlighterHidden);
+    this.highlighters.on("flexbox-highlighter-shown", this.onHighlighterShown);
     this.inspector.sidebar.on("select", this.onSidebarSelect);
 
     this.onSidebarSelect();
   }
 
   destroy() {
-    this.highlighters.off("flexbox-highlighter-hidden", this.onHighlighterChange);
-    this.highlighters.off("flexbox-highlighter-shown", this.onHighlighterChange);
+    this.highlighters.off("flexbox-highlighter-hidden", this.onHighlighterHidden);
+    this.highlighters.off("flexbox-highlighter-shown", this.onHighlighterShown);
     this.inspector.selection.off("new-node-front", this.onUpdatePanel);
     this.inspector.sidebar.off("select", this.onSidebarSelect);
     this.inspector.off("new-root", this.onUpdatePanel);
@@ -82,21 +83,47 @@ class FlexboxInspector {
            this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar.getCurrentTabID() === "layoutview";
   }
+  /**
+   * Handler for "flexbox-highlighter-shown" events emitted from the
+   * HighlightersOverlay. Passes nodefront and highlight status to
+   * handleHighlighterChange.  Required since on and off events need
+   * the same reference object.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the flex container element for which the flexbox
+   *         highlighter is shown for.
+   */
+  onHighlighterShown(nodeFront) {
+    return this.onHighlighterChange(true, nodeFront);
+  }
+
+  /**
+   * Handler for "flexbox-highlighter-hidden" events emitted from the
+   * HighlightersOverlay. Passes nodefront and highlight status to
+   * handleHighlighterChange.  Required since on and off events need
+   * the same reference object.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the flex container element for which the flexbox
+   *         highlighter is shown for.
+   */
+  onHighlighterHidden(nodeFront) {
+    return this.onHighlighterChange(false, nodeFront);
+  }
 
   /**
    * Handler for "flexbox-highlighter-shown" and "flexbox-highlighter-hidden" events
    * emitted from the HighlightersOverlay. Updates the flex container highlighted state
    * only if the provided NodeFront is the current selected flex container.
    *
-   * @param  {Event} event
-   *         Event that was triggered.
+   * @param  {Boolean} highlighted
+   *          If the change is to highlight or hide the overlay.
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the flex container element for which the flexbox
    *         highlighter is shown for.
    */
-  onHighlighterChange(event, nodeFront) {
+  onHighlighterChange(highlighted, nodeFront) {
     const { flexbox } = this.store.getState();
-    const highlighted = event === "flexbox-highlighter-shown";
 
     if (flexbox.nodeFront === nodeFront && flexbox.highlighted !== highlighted) {
       this.store.dispatch(updateFlexboxHighlighted(highlighted));

devtools/client/inspector/grids/grid-inspector.js

@@ -57,7 +57,8 @@ class GridInspector {
     this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
     this.updateGridPanel = this.updateGridPanel.bind(this);
 
-    this.onHighlighterChange = this.onHighlighterChange.bind(this);
+    this.onHighlighterShown = this.onHighlighterShown.bind(this);
+    this.onHighlighterHidden = this.onHighlighterHidden.bind(this);
     this.onNavigate = this.onNavigate.bind(this);
     this.onReflow = throttle(this.onReflow, 500, this);
     this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
@@ -95,8 +96,8 @@ class GridInspector {
       }
     );
 
-    this.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange);
-    this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange);
+    this.highlighters.on("grid-highlighter-hidden", this.onHighlighterHidden);
+    this.highlighters.on("grid-highlighter-shown", this.onHighlighterShown);
     this.inspector.sidebar.on("select", this.onSidebarSelect);
     this.inspector.on("new-root", this.onNavigate);
 
@@ -108,8 +109,8 @@ class GridInspector {
    * and cleans up references.
    */
   destroy() {
-    this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange);
-    this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange);
+    this.highlighters.off("grid-highlighter-hidden", this.onHighlighterHidden);
+    this.highlighters.off("grid-highlighter-shown", this.onHighlighterShown);
     this.inspector.sidebar.off("select", this.onSidebarSelect);
     this.inspector.off("new-root", this.onNavigate);
 
@@ -355,21 +356,49 @@ class GridInspector {
     this.store.dispatch(updateGrids(grids));
     this.inspector.emit("grid-panel-updated");
   }
+  /**
+   * Handler for "grid-highlighter-shown" events emitted from the
+   * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
+   * Required since on and off events need the same reference object.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the flex container element for which the flexbox
+   *         highlighter is shown for.
+   * @param  {Object} options
+   *         The highlighter options used for the highlighter being shown/hidden.
+   */
+  onHighlighterShown(nodeFront, options) {
+    return this.onHighlighterChange(true, nodeFront, options);
+  }
+
+  /**
+   * Handler for "grid-highlighter-hidden" events emitted from the
+   * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange.
+   * Required since on and off events need the same reference object.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The NodeFront of the flex container element for which the flexbox
+   *         highlighter is shown for.
+   * @param  {Object} options
+   *         The highlighter options used for the highlighter being shown/hidden.
+   */
+  onHighlighterHidden(nodeFront, options) {
+    return this.onHighlighterChange(false, nodeFront, options);
+  }
 
   /**
    * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted
    * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state.
    *
-   * @param  {Event} event
-   *         Event that was triggered.
+   * @param  {Boolean} highlighted
+   *         If the grid should be updated to highlight or hide.
    * @param  {NodeFront} nodeFront
    *         The NodeFront of the grid container element for which the grid highlighter
    *         is shown for.
    * @param  {Object} options
    *         The highlighter options used for the highlighter being shown/hidden.
    */
-  onHighlighterChange(event, nodeFront, options = {}) {
-    let highlighted = event === "grid-highlighter-shown";
+  onHighlighterChange(highlighted, nodeFront, options = {}) {
     let { color } = options;
 
     // Only tell the store that the highlighter changed if it did change.

devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js

@@ -62,7 +62,7 @@ add_task(function* () {
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown",
-    (event, nodeFront, options) => {
+    (nodeFront, options) => {
       info("Checking the grid highlighter display settings.");
       let {
         color,

devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js

@@ -55,7 +55,7 @@ add_task(function* () {
 
   info("Hovering over grid cell A in the grid outline.");
   let onCellAHighlight = highlighters.once("grid-highlighter-shown",
-    (event, nodeFront, options) => {
+    (nodeFront, options) => {
       info("Checking the grid highlighter options for the show grid area" +
       "and cell parameters.");
       const { showGridCell, showGridArea } = options;

devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js

@@ -46,7 +46,7 @@ add_task(function* () {
 
   info("Hovering over grid cell A in the grid outline.");
   let onCellAHighlight = highlighters.once("grid-highlighter-shown",
-    (event, nodeFront, options) => {
+    (nodeFront, options) => {
       info("Checking show grid cell options are correct.");
       const { showGridCell } = options;
       const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell;

devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js

@@ -48,7 +48,7 @@ add_task(function* () {
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   let onHighlighterShown = highlighters.once("grid-highlighter-shown",
-    (event, nodeFront, options) => {
+    (nodeFront, options) => {
       info("Checking the grid highlighter display settings.");
       let {
         color,

devtools/client/inspector/rules/views/text-property-editor.js

@@ -1043,7 +1043,7 @@ TextPropertyEditor.prototype = {
    * @param {String} point
    *        The point to highlight.
    */
-  _onHoverShapePoint: function(event, point) {
+  _onHoverShapePoint: function(point) {
     // If there is no shape toggle, or it is not active, return.
     let shapeToggle = this.valueSpan.querySelector(".ruleview-shapeswatch.active");
     if (!shapeToggle) {

devtools/client/inspector/shared/dom-node-preview.js

@@ -4,7 +4,7 @@
 "use strict";
 
 const {Task} = require("devtools/shared/task");
-const EventEmitter = require("devtools/shared/old-event-emitter");
+const EventEmitter = require("devtools/shared/event-emitter");
 const {createNode} = require("devtools/client/animationinspector/utils");
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
@@ -255,7 +255,7 @@ DomNodePreview.prototype = {
     }
   },
 
-  onHighlighterLocked: function(e, domNodePreview) {
+  onHighlighterLocked: function(domNodePreview) {
     if (domNodePreview !== this) {
       this.highlightNodeEl.classList.remove("selected");
     }

devtools/client/inspector/shared/highlighters-overlay.js

@@ -7,7 +7,7 @@
 "use strict";
 
 const Services = require("Services");
-const EventEmitter = require("devtools/shared/old-event-emitter");
+const EventEmitter = require("devtools/shared/event-emitter");
 const {
   VIEW_NODE_VALUE_TYPE,
   VIEW_NODE_SHAPE_POINT_TYPE