Bug 1382601 - update inspector to use new event emitter. r=nchevobbe,pbro
☠☠ backed out by 958b3aa1565a ☠ ☠
authoryulia <ystartsev@mozilla.com>
Fri, 16 Mar 2018 14:27:46 +0100
changeset 768787 3ab8cedcdaf055e2426ba25c1b67ece7344d0889
parent 768786 8adea36318222e2461edadd91e53403c986a05e6
child 768788 f9e45b228c63bd25ffe58eb4f720e18f7d05904b
push id102980
push userbmo:bdahl@mozilla.com
push dateFri, 16 Mar 2018 20:57:15 +0000
reviewersnchevobbe, pbro
bugs1382601
milestone61.0a1
Bug 1382601 - update inspector to use new event emitter. r=nchevobbe,pbro MozReview-Commit-ID: 8hGCpkC1eHz
devtools/client/inspector/boxmodel/test/head.js
devtools/client/inspector/breadcrumbs.js
devtools/client/inspector/inspector-search.js
devtools/client/inspector/inspector.js
devtools/client/inspector/markup/markup.js
devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
devtools/client/inspector/markup/test/browser_markup_mutation_01.js
devtools/client/inspector/markup/views/element-editor.js
devtools/client/inspector/rules/test/head.js
devtools/client/inspector/rules/views/class-list-previewer.js
devtools/client/inspector/shared/dom-node-preview.js
devtools/client/inspector/shared/highlighters-overlay.js
devtools/client/inspector/toolsidebar.js
--- a/devtools/client/inspector/boxmodel/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -51,17 +51,17 @@ function isNodeVisible(node) {
  * @param  {InspectorPanel} inspector
  *         The instance of InspectorPanel currently loaded in the toolbox.
  * @param  {Boolean} waitForSelectionUpdate
  *         Should the boxmodel-view-updated event come from a new selection.
  * @return {Promise} a promise
  */
 function waitForUpdate(inspector, waitForSelectionUpdate) {
   return new Promise(resolve => {
-    inspector.on("boxmodel-view-updated", function onUpdate(e, reasons) {
+    inspector.on("boxmodel-view-updated", function onUpdate(reasons) {
       // Wait for another update event if we are waiting for a selection related event.
       if (waitForSelectionUpdate && !reasons.includes("new-selection")) {
         return;
       }
 
       inspector.off("boxmodel-view-updated", onUpdate);
       resolve();
     });
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -10,17 +10,17 @@ const promise = require("promise");
 
 const {ELLIPSIS} = require("devtools/shared/l10n");
 
 const MAX_LABEL_LENGTH = 40;
 
 const NS_XHTML = "http://www.w3.org/1999/xhtml";
 const SCROLL_REPEAT_MS = 100;
 
-const EventEmitter = require("devtools/shared/old-event-emitter");
+const EventEmitter = require("devtools/shared/event-emitter");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 
 // Some margin may be required for visible element detection.
 const SCROLL_MARGIN = 1;
 
 /**
  * Component to replicate functionality of XUL arrowscrollbox
  * for breadcrumbs
@@ -396,21 +396,22 @@ HTMLBreadcrumbs.prototype = {
 
     // Last selected node in nodeHierarchy.
     this.currentIndex = -1;
 
     // Used to build a unique breadcrumb button Id.
     this.breadcrumbsWidgetItemId = 0;
 
     this.update = this.update.bind(this);
+    this.updateWithMutations = this.updateWithMutations.bind(this);
     this.updateSelectors = this.updateSelectors.bind(this);
     this.selection.on("new-node-front", this.update);
     this.selection.on("pseudoclass", this.updateSelectors);
     this.selection.on("attribute-changed", this.updateSelectors);
-    this.inspector.on("markupmutation", this.update);
+    this.inspector.on("markupmutation", this.updateWithMutations);
     this.update();
   },
 
   /**
 
    * Build a string that represents the node: tagName#id.class1.class2.
    * @param {NodeFront} node The node to pretty-print
    * @return {String}
@@ -607,17 +608,17 @@ HTMLBreadcrumbs.prototype = {
 
   /**
    * Remove nodes and clean up.
    */
   destroy: function() {
     this.selection.off("new-node-front", this.update);
     this.selection.off("pseudoclass", this.updateSelectors);
     this.selection.off("attribute-changed", this.updateSelectors);
-    this.inspector.off("markupmutation", this.update);
+    this.inspector.off("markupmutation", this.updateWithMutations);
 
     this.container.removeEventListener("click", this, true);
     this.container.removeEventListener("mouseover", this, true);
     this.container.removeEventListener("mouseout", this, true);
     this.container.removeEventListener("focus", this, true);
     this.shortcuts.destroy();
 
     this.empty();
@@ -825,16 +826,26 @@ HTMLBreadcrumbs.prototype = {
     }
 
     // Catch all return in case the mutations array was empty, or in case none
     // of the changes iterated above were interesting.
     return false;
   },
 
   /**
+   * Update the breadcrumbs display when a new node is selected and there are
+   * mutations.
+   * @param {Array} mutations An array of mutations in case this was called as
+   * the "markupmutation" event listener.
+   */
+  updateWithMutations(mutations) {
+    return this.update("markupmutation", mutations);
+  },
+
+  /**
    * Update the breadcrumbs display when a new node is selected.
    * @param {String} reason The reason for the update, if any.
    * @param {Array} mutations An array of mutations in case this was called as
    * the "markupmutation" event listener.
    */
   update: function(reason, mutations) {
     if (this.isDestroyed) {
       return;
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -3,17 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const promise = require("promise");
 const {Task} = require("devtools/shared/task");
 const {KeyCodes} = require("devtools/client/shared/keycodes");
 
-const EventEmitter = require("devtools/shared/old-event-emitter");
+const EventEmitter = require("devtools/shared/event-emitter");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
 const Services = require("Services");
 
 // Maximum number of selector suggestions shown in the panel.
 const MAX_SUGGESTIONS = 15;
 
 /**
  * Converts any input field into a document search box.
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -5,17 +5,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* global window, BrowserLoader */
 
 "use strict";
 
 const Services = require("Services");
 const promise = require("promise");
-const EventEmitter = require("devtools/shared/old-event-emitter");
+const EventEmitter = require("devtools/shared/event-emitter");
 const {executeSoon} = require("devtools/shared/DevToolsUtils");
 const {Task} = require("devtools/shared/task");
 const {PrefObserver} = require("devtools/client/shared/prefs");
 const Telemetry = require("devtools/client/shared/telemetry");
 const HighlightersOverlay = require("devtools/client/inspector/shared/highlighters-overlay");
 const ReflowTracker = require("devtools/client/inspector/shared/reflow-tracker");
 const Store = require("devtools/client/inspector/store");
 
@@ -118,16 +118,17 @@ function Inspector(toolbox) {
 
   this.nodeMenuTriggerInfo = null;
 
   this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this);
   this._onContextMenu = this._onContextMenu.bind(this);
   this._onBeforeNavigate = this._onBeforeNavigate.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
+  this._clearSearchResultsLabel = this._clearSearchResultsLabel.bind(this);
 
   this.onDetached = this.onDetached.bind(this);
   this.onMarkupLoaded = this.onMarkupLoaded.bind(this);
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onNewRoot = this.onNewRoot.bind(this);
   this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
   this.onShowBoxModelHighlighterForNode =
     this.onShowBoxModelHighlighterForNode.bind(this);
@@ -378,17 +379,17 @@ Inspector.prototype = {
    * Hooks the searchbar to show result and auto completion suggestions.
    */
   setupSearchBox: function() {
     this.searchBox = this.panelDoc.getElementById("inspector-searchbox");
     this.searchClearButton = this.panelDoc.getElementById("inspector-searchinput-clear");
     this.searchResultsLabel = this.panelDoc.getElementById("inspector-searchlabel");
 
     this.search = new InspectorSearch(this, this.searchBox, this.searchClearButton);
-    this.search.on("search-cleared", this._updateSearchResultsLabel);
+    this.search.on("search-cleared", this._clearSearchResultsLabel);
     this.search.on("search-result", this._updateSearchResultsLabel);
 
     let shortcuts = new KeyShortcuts({
       window: this.panelDoc.defaultView,
     });
     let key = INSPECTOR_L10N.getStr("inspector.searchHTML.key");
     shortcuts.on(key, event => {
       // Prevent overriding same shortcut from the computed/rule views
@@ -400,19 +401,23 @@ Inspector.prototype = {
       this.searchBox.focus();
     });
   },
 
   get searchSuggestions() {
     return this.search.autocompleter;
   },
 
-  _updateSearchResultsLabel: function(event, result) {
+  _clearSearchResultsLabel: function(result) {
+    return this._updateSearchResultsLabel(result, true);
+  },
+
+  _updateSearchResultsLabel: function(result, clear = false) {
     let str = "";
-    if (event !== "search-cleared") {
+    if (!clear) {
       if (result) {
         str = INSPECTOR_L10N.getFormatStr(
           "inspector.searchResultsCount2", result.resultsIndex + 1, result.resultsLength);
       } else {
         str = INSPECTOR_L10N.getStr("inspector.searchResultsNone");
       }
     }
 
@@ -554,17 +559,17 @@ Inspector.prototype = {
     Services.prefs.setIntPref("devtools.toolsidebar-width.inspector.splitsidebar",
       this.sidebarSplitBox.state.width);
   },
 
   onSidebarResized: function(width, height) {
     this.toolbox.emit("inspector-sidebar-resized", { width, height });
   },
 
-  onSidebarSelect: function(event, toolId) {
+  onSidebarSelect: function(toolId) {
     // Save the currently selected sidebar panel
     Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
 
     // Then forces the panel creation by calling getPanel
     // (This allows lazy loading the panels only once we select them)
     this.getPanel(toolId);
 
     this.toolbox.emit("inspector-sidebar-select", toolId);
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -1278,17 +1278,17 @@ MarkupView.prototype = {
     this.cancelReselectOnRemoved();
 
     // Get the removedNode index in its parent node to reselect the right node.
     let isHTMLTag = removedNode.tagName.toLowerCase() === "html";
     let oldContainer = this.getContainer(removedNode);
     let parentContainer = this.getContainer(removedNode.parentNode());
     let childIndex = parentContainer.getChildContainers().indexOf(oldContainer);
 
-    let onMutations = this._removedNodeObserver = (e, mutations) => {
+    let onMutations = this._removedNodeObserver = mutations => {
       let isNodeRemovalMutation = false;
       for (let mutation of mutations) {
         let containsRemovedNode = mutation.removed &&
                                   mutation.removed.some(n => n === removedNode);
         if (mutation.type === "childList" &&
             (containsRemovedNode || isHTMLTag)) {
           isNodeRemovalMutation = true;
           break;
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_navigation.js
@@ -267,11 +267,11 @@ add_task(function* () {
   for (let testData of TESTS) {
     yield runAccessibilityNavigationTest(inspector, elms, testData);
   }
 
   elms = null;
 });
 
 // Record all containers that are created dynamically into elms object.
-function memorizeContainer(event, container) {
+function memorizeContainer(container) {
   elms[`container-${containerID++}`] = container;
 }
--- a/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_mutation_01.js
@@ -314,17 +314,17 @@ add_task(function* () {
     numMutations = numMutations || 1;
 
     info("Executing the test markup mutation");
 
     // If a test expects more than one mutation it may come through in a single
     // event or possibly in multiples.
     let seenMutations = 0;
     let promise = new Promise(resolve => {
-      inspector.on("markupmutation", function onmutation(e, mutations) {
+      inspector.on("markupmutation", function onmutation(mutations) {
         seenMutations += mutations.length;
         info("Receieved " + seenMutations +
              " mutations, expecting at least " + numMutations);
         if (seenMutations >= numMutations) {
           inspector.off("markupmutation", onmutation);
           resolve();
         }
       });
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -542,17 +542,17 @@ ElementEditor.prototype = {
     }
 
     let container = this.markup.getContainer(this.node);
 
     let activeAttrs = [...this.attrList.childNodes]
       .filter(el => el.style.display != "none");
     let attributeIndex = activeAttrs.indexOf(attrNode);
 
-    let onMutations = this._editedAttributeObserver = (e, mutations) => {
+    let onMutations = this._editedAttributeObserver = mutations => {
       let isDeletedAttribute = false;
       let isNewAttribute = false;
 
       for (let mutation of mutations) {
         let inContainer =
           this.markup.getContainer(mutation.target) === container;
         if (!inContainer) {
           continue;
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -473,17 +473,17 @@ function* sendKeysAndWaitForFocus(view, 
 
 /**
  * Wait for a markupmutation event on the inspector that is for a style modification.
  * @param {InspectorPanel} inspector
  * @return {Promise}
  */
 function waitForStyleModification(inspector) {
   return new Promise(function(resolve) {
-    function checkForStyleModification(name, mutations) {
+    function checkForStyleModification(mutations) {
       for (let mutation of mutations) {
         if (mutation.type === "attributes" && mutation.attributeName === "style") {
           inspector.off("markupmutation", checkForStyleModification);
           resolve();
           return;
         }
       }
     }
--- a/devtools/client/inspector/rules/views/class-list-previewer.js
+++ b/devtools/client/inspector/rules/views/class-list-previewer.js
@@ -164,17 +164,17 @@ ClassListPreviewerModel.prototype = {
     };
 
     // Apply the change to the node.
     let mod = this.currentNode.startModifyingAttributes();
     mod.setAttribute("class", this.currentClassesPreview);
     return mod.apply();
   },
 
-  onMutations(e, mutations) {
+  onMutations(mutations) {
     for (let {type, target, attributeName} of mutations) {
       // Only care if this mutation is for the class attribute.
       if (type !== "attributes" || attributeName !== "class") {
         continue;
       }
 
       let isMutationForOurChange = this.lastStateChange &&
                                    target === this.lastStateChange.node &&
--- a/devtools/client/inspector/shared/dom-node-preview.js
+++ b/devtools/client/inspector/shared/dom-node-preview.js
@@ -256,17 +256,17 @@ DomNodePreview.prototype = {
   },
 
   onHighlighterLocked: function(domNodePreview) {
     if (domNodePreview !== this) {
       this.highlightNodeEl.classList.remove("selected");
     }
   },
 
-  onMarkupMutations: function(e, mutations) {
+  onMarkupMutations: function(mutations) {
     if (!this.nodeFront) {
       return;
     }
 
     for (let {target} of mutations) {
       if (target === this.nodeFront) {
         // Re-render with the same nodeFront to update the output.
         this.render(this.nodeFront);
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -856,17 +856,17 @@ class HighlightersOverlay {
     this._lastHovered = null;
     this._hideHoveredHighlighter();
   }
 
   /**
    * Handler function for "markupmutation" events. Hides the flexbox/grid/shapes
    * highlighter if the flexbox/grid/shapes container is no longer in the DOM tree.
    */
-  async onMarkupMutation(evt, mutations) {
+  async onMarkupMutation(mutations) {
     let hasInterestingMutation = mutations.some(mut => mut.type === "childList");
     if (!hasInterestingMutation) {
       // Bail out if the mutations did not remove nodes, or if no grid highlighter is
       // displayed.
       return;
     }
 
     this._hideHighlighterIfDeadNode(this.flexboxHighlighterShown,
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -1,17 +1,17 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-var EventEmitter = require("devtools/shared/old-event-emitter");
+var EventEmitter = require("devtools/shared/event-emitter");
 var Telemetry = require("devtools/client/shared/telemetry");
 var { Task } = require("devtools/shared/task");
 
 /**
  * This object represents replacement for ToolSidebar
  * implemented in devtools/client/framework/sidebar.js module
  *
  * This new component is part of devtools.html aimed at