Bug 1456680 - Part 2: Format markup.js; r=pbro draft
authorGabriel Luong <gabriel.luong@gmail.com>
Sun, 29 Apr 2018 13:04:18 -0400
changeset 789662 2ef31d77bdd5d11b8a6ad9186850725e4ae405b6
parent 789661 80a16b2f5a0cdfec7cdb56eb376108f305f97dd3
child 789663 dc623b8bf6de369c65a268aafab81c2b9d0d8420
push id108295
push userbmo:gl@mozilla.com
push dateMon, 30 Apr 2018 01:53:22 +0000
reviewerspbro
bugs1456680
milestone61.0a1
Bug 1456680 - Part 2: Format markup.js; r=pbro MozReview-Commit-ID: KMVd3dWN5iP
devtools/client/inspector/markup/markup.js
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -57,30 +57,30 @@ const ATTR_COLLAPSE_LENGTH_PREF = "devto
  * updating based on mutations, and the undo/redo bindings.
  *
  * @param  {Inspector} inspector
  *         The inspector we're watching.
  * @param  {iframe} frame
  *         An iframe in which the caller has kindly loaded markup.xhtml.
  */
 function MarkupView(inspector, frame, controllerWindow) {
+  EventEmitter.decorate(this);
+
   this.inspector = inspector;
   this.walker = this.inspector.walker;
   this._frame = frame;
   this.win = this._frame.contentWindow;
   this.doc = this._frame.contentDocument;
   this._elt = this.doc.querySelector("#root");
 
   this.maxChildren = Services.prefs.getIntPref("devtools.markup.pagesize",
                                                DEFAULT_MAX_CHILDREN);
 
-  this.collapseAttributes =
-    Services.prefs.getBoolPref(ATTR_COLLAPSE_ENABLED_PREF);
-  this.collapseAttributeLength =
-    Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF);
+  this.collapseAttributes = Services.prefs.getBoolPref(ATTR_COLLAPSE_ENABLED_PREF);
+  this.collapseAttributeLength = Services.prefs.getIntPref(ATTR_COLLAPSE_LENGTH_PREF);
 
   // Creating the popup to be used to show CSS suggestions.
   // The popup will be attached to the toolbox document.
   this.popup = new AutocompletePopup(inspector.toolbox.doc, {
     autoSelect: true,
     theme: "auto",
   });
 
@@ -89,56 +89,51 @@ function MarkupView(inspector, frame, co
 
   this._containers = new Map();
   // This weakmap will hold keys used with the _containers map, in order to retrieve the
   // slotted container for a given node front.
   this._slottedContainerKeys = new WeakMap();
 
   // Binding functions that need to be called in scope.
   this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this);
+  this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this);
   this._mutationObserver = this._mutationObserver.bind(this);
+  this._onBlur = this._onBlur.bind(this);
+  this._onCopy = this._onCopy.bind(this);
+  this._onCollapseAttributesPrefChange = this._onCollapseAttributesPrefChange.bind(this);
   this._onDisplayChange = this._onDisplayChange.bind(this);
+  this._onFocus = this._onFocus.bind(this);
   this._onMouseClick = this._onMouseClick.bind(this);
-  this._onMouseUp = this._onMouseUp.bind(this);
-  this._onNewSelection = this._onNewSelection.bind(this);
-  this._onCopy = this._onCopy.bind(this);
-  this._onFocus = this._onFocus.bind(this);
   this._onMouseMove = this._onMouseMove.bind(this);
   this._onMouseOut = this._onMouseOut.bind(this);
+  this._onMouseUp = this._onMouseUp.bind(this);
+  this._onNewSelection = this._onNewSelection.bind(this);
   this._onToolboxPickerCanceled = this._onToolboxPickerCanceled.bind(this);
   this._onToolboxPickerHover = this._onToolboxPickerHover.bind(this);
-  this._onCollapseAttributesPrefChange =
-    this._onCollapseAttributesPrefChange.bind(this);
-  this._isImagePreviewTarget = this._isImagePreviewTarget.bind(this);
-  this._onBlur = this._onBlur.bind(this);
-
-  EventEmitter.decorate(this);
 
   // Listening to various events.
+  this._elt.addEventListener("blur", this._onBlur, true);
   this._elt.addEventListener("click", this._onMouseClick);
   this._elt.addEventListener("mousemove", this._onMouseMove);
   this._elt.addEventListener("mouseout", this._onMouseOut);
-  this._elt.addEventListener("blur", this._onBlur, true);
-  this.win.addEventListener("mouseup", this._onMouseUp);
+  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._frame.addEventListener("focus", this._onFocus);
-  this.walker.on("mutations", this._mutationObserver);
-  this.walker.on("display-change", this._onDisplayChange);
-  this.inspector.selection.on("new-node-front", this._onNewSelection);
+  this.win.addEventListener("mouseup", this._onMouseUp);
   this.toolbox.on("picker-canceled", this._onToolboxPickerCanceled);
   this.toolbox.on("picker-node-hovered", this._onToolboxPickerHover);
 
   this._onNewSelection();
   this._initTooltips();
 
   this._prefObserver = new PrefObserver("devtools.markup");
-  this._prefObserver.on(ATTR_COLLAPSE_ENABLED_PREF,
-                        this._onCollapseAttributesPrefChange);
-  this._prefObserver.on(ATTR_COLLAPSE_LENGTH_PREF,
-                        this._onCollapseAttributesPrefChange);
+  this._prefObserver.on(ATTR_COLLAPSE_ENABLED_PREF, this._onCollapseAttributesPrefChange);
+  this._prefObserver.on(ATTR_COLLAPSE_LENGTH_PREF, this._onCollapseAttributesPrefChange);
 
   this._initShortcuts();
 }
 
 MarkupView.prototype = {
   /**
    * How long does a node flash when it mutates (in ms).
    */
@@ -1874,28 +1869,27 @@ MarkupView.prototype = {
     }
 
     this.undo.destroy();
     this.undo = null;
 
     this.popup.destroy();
     this.popup = null;
 
+    this._elt.removeEventListener("blur", this._onBlur, true);
     this._elt.removeEventListener("click", this._onMouseClick);
     this._elt.removeEventListener("mousemove", this._onMouseMove);
     this._elt.removeEventListener("mouseout", this._onMouseOut);
-    this._elt.removeEventListener("blur", this._onBlur, true);
-    this.win.removeEventListener("mouseup", this._onMouseUp);
-    this.win.removeEventListener("copy", this._onCopy);
     this._frame.removeEventListener("focus", this._onFocus);
+    this.inspector.selection.off("new-node-front", this._onNewSelection);
+    this.toolbox.off("picker-node-hovered", this._onToolboxPickerHover);
+    this.walker.off("display-change", this._onDisplayChange);
     this.walker.off("mutations", this._mutationObserver);
-    this.walker.off("display-change", this._onDisplayChange);
-    this.inspector.selection.off("new-node-front", this._onNewSelection);
-    this.toolbox.off("picker-node-hovered",
-                                this._onToolboxPickerHover);
+    this.win.removeEventListener("copy", this._onCopy);
+    this.win.removeEventListener("mouseup", this._onMouseUp);
 
     this._prefObserver.off(ATTR_COLLAPSE_ENABLED_PREF,
                            this._onCollapseAttributesPrefChange);
     this._prefObserver.off(ATTR_COLLAPSE_LENGTH_PREF,
                            this._onCollapseAttributesPrefChange);
     this._prefObserver.destroy();
 
     this._elt = null;
@@ -1906,18 +1900,18 @@ MarkupView.prototype = {
     this._containers = null;
 
     this.eventDetailsTooltip.destroy();
     this.eventDetailsTooltip = null;
 
     this.imagePreviewTooltip.destroy();
     this.imagePreviewTooltip = null;
 
+    this.doc = null;
     this.win = null;
-    this.doc = null;
 
     this._lastDropTarget = null;
     this._lastDragTarget = null;
 
     return this._destroyer;
   },
 
   /**