Bug 1435373 - Rename and reorder methods and properties per review feedback. r=gl draft
authorRazvan Caliman <rcaliman@mozilla.com>
Tue, 27 Feb 2018 22:38:22 +0100
changeset 760528 b6a8e0b549168ce648275501d819e82feb515a9a
parent 760495 472c9ebbd3e90dc3969ba393731e568d8bc655a6
push id100688
push userbmo:rcaliman@mozilla.com
push dateTue, 27 Feb 2018 21:39:28 +0000
reviewersgl
bugs1435373
milestone60.0a1
Bug 1435373 - Rename and reorder methods and properties per review feedback. r=gl MozReview-Commit-ID: DTuqhLFWOWV
devtools/client/inspector/rules/views/text-property-editor.js
devtools/client/inspector/shared/highlighters-overlay.js
devtools/client/shared/widgets/ShapesInContextEditor.js
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -88,18 +88,18 @@ function TextPropertyEditor(ruleEditor, 
   this._onExpandClicked = this._onExpandClicked.bind(this);
   this._onStartEditing = this._onStartEditing.bind(this);
   this._onNameDone = this._onNameDone.bind(this);
   this._onValueDone = this._onValueDone.bind(this);
   this._onSwatchCommit = this._onSwatchCommit.bind(this);
   this._onSwatchPreview = this._onSwatchPreview.bind(this);
   this._onSwatchRevert = this._onSwatchRevert.bind(this);
   this._onValidate = this.ruleView.debounce(this._previewValue, 10, this);
-  this._onInContextEditorCommit = this._onInContextEditorCommit.bind(this);
-  this._onInContextEditorPreview = this._onInContextEditorPreview.bind(this);
+  this.onInContextEditorCommit = this.onInContextEditorCommit.bind(this);
+  this.onInContextEditorPreview = this.onInContextEditorPreview.bind(this);
   this.update = this.update.bind(this);
   this.updatePropertyState = this.updatePropertyState.bind(this);
 
   this._create();
   this.update();
 }
 
 TextPropertyEditor.prototype = {
@@ -513,18 +513,18 @@ TextPropertyEditor.prototype = {
         return s[0].toUpperCase() + s.slice(1);
       }).join("");
       shapeToggle.setAttribute("data-mode", mode);
 
       let shapesEditor =
         await this.ruleView.highlighters.getInContextEditor("shapesEditor");
 
       let callbacks = {
-        onPreview: this._onInContextEditorPreview,
-        onCommit: this._onInContextEditorCommit
+        onPreview: this.onInContextEditorPreview,
+        onCommit: this.onInContextEditorCommit
       };
 
       shapesEditor.link(this.prop, shapeToggle, callbacks);
       // Mark this toggle if this property is being currently edited; unmark otherwise.
       shapeToggle.classList.toggle("active", shapesEditor.activeProperty === this.prop);
     }
 
     // Now that we have updated the property's value, we might have a pending
@@ -1038,24 +1038,24 @@ TextPropertyEditor.prototype = {
   },
 
   /**
    * Live preview this property, without committing changes.
    *
    * @param {String} value
    *        The value to set the current property to.
    */
-  _onInContextEditorPreview(value) {
+  onInContextEditorPreview(value) {
     this.ruleEditor.rule.previewPropertyValue(this.prop, value);
   },
 
   /**
    * Commit this property value. Triggers editor update.
    *
    * @param {String} value
    *        The value to set the current property to.
    */
-  _onInContextEditorCommit(value) {
+  onInContextEditorCommit(value) {
     this.prop.setValue(value);
   }
 };
 
 module.exports = TextPropertyEditor;
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -57,18 +57,18 @@ class HighlightersOverlay {
     this.onWillNavigate = this.onWillNavigate.bind(this);
     this.hideFlexboxHighlighter = this.hideFlexboxHighlighter.bind(this);
     this.hideGridHighlighter = this.hideGridHighlighter.bind(this);
     this.hideShapesHighlighter = this.hideShapesHighlighter.bind(this);
     this.showFlexboxHighlighter = this.showFlexboxHighlighter.bind(this);
     this.showGridHighlighter = this.showGridHighlighter.bind(this);
     this.showShapesHighlighter = this.showShapesHighlighter.bind(this);
     this._handleRejection = this._handleRejection.bind(this);
-    this._onShapesHighlighterShown = this._onShapesHighlighterShown.bind(this);
-    this._onShapesHighlighterHidden = this._onShapesHighlighterHidden.bind(this);
+    this.onShapesHighlighterShown = this.onShapesHighlighterShown.bind(this);
+    this.onShapesHighlighterHidden = this.onShapesHighlighterHidden.bind(this);
 
     // Add inspector events, not specific to a given view.
     this.inspector.on("markupmutation", this.onMarkupMutation);
     this.inspector.target.on("will-navigate", this.onWillNavigate);
 
     EventEmitter.decorate(this);
   }
 
@@ -143,17 +143,17 @@ class HighlightersOverlay {
    * Called after the shape highlighter was shown.
    *
    * @param  {Object} data
    *         Data associated with the event.
    *         Contains:
    *         - {NodeFront} node: The NodeFront of the element that is highlighted.
    *         - {Object} options: Options that were passed to ShapesHighlighter.show()
    */
-  _onShapesHighlighterShown(data) {
+  onShapesHighlighterShown(data) {
     let { node, options } = data;
     this.shapesHighlighterShown = node;
     this.emit("shapes-highlighter-shown", node, options);
     this.presistShapesHighlighterState(node, options);
   }
 
   async presistShapesHighlighterState(node, options) {
     try {
@@ -182,17 +182,17 @@ class HighlightersOverlay {
   /**
    * Called after the shapes highlighter was hidden.
    *
    * @param  {Object} data
    *         Data associated with the event.
    *         Contains:
    *         - {NodeFront} node: The NodeFront of the element that was highlighted.
    */
-  _onShapesHighlighterHidden(data) {
+  onShapesHighlighterHidden(data) {
     this.emit("shapes-highlighter-hidden", this.shapesHighlighterShown,
       this.state.shapes.options);
     this.shapesHighlighterShown = null;
     this.state.shapes = {};
   }
 
   /**
    * Show the shapes highlighter for the given element, with the given point highlighted.
@@ -508,18 +508,18 @@ class HighlightersOverlay {
       case "shapesEditor":
         let highlighter = await this._getHighlighter("ShapesHighlighter");
         if (!highlighter) {
           return null;
         }
         const ShapesInContextEditor = require("devtools/client/shared/widgets/ShapesInContextEditor");
 
         editor = new ShapesInContextEditor(highlighter, this.inspector, this.state);
-        editor.on("show", this._onShapesHighlighterShown);
-        editor.on("hide", this._onShapesHighlighterHidden);
+        editor.on("show", this.onShapesHighlighterShown);
+        editor.on("hide", this.onShapesHighlighterHidden);
         break;
       default:
         throw new Error(`Unsupported in-context editor '${name}'`);
     }
 
     this.editors[type] = editor;
 
     return editor;
--- a/devtools/client/shared/widgets/ShapesInContextEditor.js
+++ b/devtools/client/shared/widgets/ShapesInContextEditor.js
@@ -6,49 +6,45 @@
 
 const EventEmitter = require("devtools/shared/event-emitter");
 const { debounce } = require("devtools/shared/debounce");
 
 class ShapesInContextEditor {
   constructor(highlighter, inspector, state) {
     EventEmitter.decorate(this);
 
-    this._highligherEventHandlers = {};
-    this._highligherEventHandlers["shape-change"] = this._onShapeChange;
-    this._highligherEventHandlers["shape-hover-on"] = this._onShapeHover;
-    this._highligherEventHandlers["shape-hover-off"] = this._onShapeHover;
-    this._onHighlighterEvent = this._onHighlighterEvent.bind(this);
-    this._onNodeFrontChanged = this._onNodeFrontChanged.bind(this);
-    this._onRuleViewChanged = this._onRuleViewChanged.bind(this);
-    this._onSwatchClick = this._onSwatchClick.bind(this);
-
     this.activeSwatch = null;
     this.activeProperty = null;
-
-    // Commit triggers expensive changes so we debounce it.
-    this.commit = debounce(this.commit, 200, this);
     this.inspector = inspector;
     this.highlighter = highlighter;
-    this.highlighter.on("highlighter-event", this._onHighlighterEvent);
-
     // Refence to the NodeFront currently being highlighted.
     this.highlighterTargetNode = null;
-
+    this.highligherEventHandlers = {};
+    this.highligherEventHandlers["shape-change"] = this.onShapeChange;
+    this.highligherEventHandlers["shape-hover-on"] = this.onShapeHover;
+    this.highligherEventHandlers["shape-hover-off"] = this.onShapeHover;
     // Map with data required to preview and persist shape value changes to the Rule view.
     // keys - TextProperty instances relevant for shape editor (clip-path, shape-outside).
     // values - objects with references to swatch elements that trigger the shape editor
     //          and callbacks used to preview and persist shape value changes.
     this.links = new Map();
-
     // Reference to Rule view used to listen for changes
     this.ruleView = this.inspector.getPanel("ruleview").view;
-    this.ruleView.on("ruleview-changed", this._onRuleViewChanged);
-
     // Reference of |state| from HighlightersOverlay.
     this.state = state;
+
+    // Commit triggers expensive changes so we debounce it.
+    this.commit = debounce(this.commit, 200, this);
+    this.onHighlighterEvent = this.onHighlighterEvent.bind(this);
+    this.onNodeFrontChanged = this.onNodeFrontChanged.bind(this);
+    this.onRuleViewChanged = this.onRuleViewChanged.bind(this);
+    this.onSwatchClick = this.onSwatchClick.bind(this);
+
+    this.highlighter.on("highlighter-event", this.onHighlighterEvent);
+    this.ruleView.on("ruleview-changed", this.onRuleViewChanged);
   }
 
   /**
   * Using TextProperty instances from Rule view, store into a Map references to the
   * swatch element (toggle icon) and callbacks from TextPropertyEditor necessary to
   * preview and update the selected element's shape values in the Rule view.
   *
   * @param {TextProperty} prop
@@ -73,17 +69,17 @@ class ShapesInContextEditor {
     }
     if (!callbacks.onPreview) {
       callbacks.onPreview = function () {};
     }
     if (!callbacks.onCommit) {
       callbacks.onCommit = function () {};
     }
 
-    swatch.addEventListener("click", this._onSwatchClick);
+    swatch.addEventListener("click", this.onSwatchClick);
     this.links.set(prop, { swatch, callbacks });
   }
 
   /**
   * Remove references to swatch and callbacks from |this.links| for the given key.
   *
   * @param {TextProperty} prop
   *        TextProperty instance from Rule view.
@@ -93,17 +89,17 @@ class ShapesInContextEditor {
     if (!data || !data.swatch) {
       return;
     }
     if (this.activeProperty === prop) {
       this.hide();
     }
 
     data.swatch.classList.remove("active");
-    data.swatch.removeEventListener("click", this._onSwatchClick);
+    data.swatch.removeEventListener("click", this.onSwatchClick);
     this.links.delete(prop);
   }
 
   /**
   * Remove all linked references from TextPropertyEditor.
   */
   unlinkAll() {
     for (let [prop] of this.links) {
@@ -119,45 +115,45 @@ class ShapesInContextEditor {
   *        TextProperty instance from Rule view.
   * @param {Node} swatch
   *        Reference to swatch DOM element.
   */
   replaceSwatch(prop, swatch) {
     let data = this.links.get(prop);
     if (data.swatch) {
       // Cleanup old
-      data.swatch.removeEventListener("click", this._onSwatchClick);
+      data.swatch.removeEventListener("click", this.onSwatchClick);
       data.swatch = undefined;
       // Setup new
-      swatch.addEventListener("click", this._onSwatchClick);
+      swatch.addEventListener("click", this.onSwatchClick);
       data.swatch = swatch;
     }
   }
 
   /**
   * Called when the element style changes from the Rule view.
   * If the TextProperty we're acting on isn't enabled anymore or overridden,
   * turn off the shapes highlighter.
   */
-  _onRuleViewChanged() {
+  onRuleViewChanged() {
     if (this.activeProperty &&
       (!this.activeProperty.enabled || this.activeProperty.overridden)) {
       this.hide();
     }
   }
 
   /**
   * Called when a swatch element is clicked. Toggles shapes highlighter to show or hide.
   * Sets the current swatch and corresponding TextProperty as the active ones. They will
   * be immediately unset if the toggle action is to hide the shapes highlighter.
   *
   * @param {MouseEvent} event
   *        Mouse click event.
   */
-  _onSwatchClick(event) {
+  onSwatchClick(event) {
     event.stopPropagation();
     for (let [prop, data] of this.links) {
       if (data.swatch == event.target) {
         this.activeSwatch = data.swatch;
         this.activeSwatch.classList.add("active");
         this.activeProperty = prop;
       }
     }
@@ -201,18 +197,18 @@ class ShapesInContextEditor {
    *        Object used for passing options to the shapes highlighter.
    */
   async show(node, options) {
     let isShown = await this.highlighter.show(node, options);
     if (!isShown) {
       return;
     }
 
-    this.inspector.selection.on("detached-front", this._onNodeFrontChanged);
-    this.inspector.selection.on("new-node-front", this._onNodeFrontChanged);
+    this.inspector.selection.on("detached-front", this.onNodeFrontChanged);
+    this.inspector.selection.on("new-node-front", this.onNodeFrontChanged);
     this.highlighterTargetNode = node;
     this.emit("show", { node, options });
   }
 
   /**
    * Hide the shapes highlighter.
    */
   async hide() {
@@ -220,72 +216,72 @@ class ShapesInContextEditor {
 
     if (this.activeSwatch) {
       this.activeSwatch.classList.remove("active");
     }
     this.activeSwatch = null;
     this.activeProperty = null;
 
     this.emit("hide", { node: this.highlighterTargetNode });
-    this.inspector.selection.off("detached-front", this._onNodeFrontChanged);
-    this.inspector.selection.off("new-node-front", this._onNodeFrontChanged);
+    this.inspector.selection.off("detached-front", this.onNodeFrontChanged);
+    this.inspector.selection.off("new-node-front", this.onNodeFrontChanged);
     this.highlighterTargetNode = null;
   }
 
   /**
    * Handle events emitted by the highlighter.
    * Find any callback assigned to the event type and call it with the given data object.
    *
    * @param {Object} data
    *        The data object sent in the event.
    */
-  _onHighlighterEvent(data) {
-    const handler = this._highligherEventHandlers[data.type];
+  onHighlighterEvent(data) {
+    const handler = this.highligherEventHandlers[data.type];
     if (!handler || typeof handler !== "function") {
       return;
     }
     handler.call(this, data);
     this.inspector.highlighters.emit("highlighter-event-handled");
   }
 
   /**
   * Clean up when node selection changes because Rule view and TextPropertyEditor
   * instances are not automatically destroyed when selection changes.
   */
-  _onNodeFrontChanged() {
+  onNodeFrontChanged() {
     this.hide();
     this.unlinkAll();
   }
 
   /**
   * Called when there's an updated shape value from the highlighter.
   *
   * @param  {Object} data
   *         Data associated with the "shape-change" event.
   *         Contains:
   *         - {String} value: the new shape value.
   *         - {String} type: the event type ("shape-change").
   */
-  _onShapeChange(data) {
+  onShapeChange(data) {
     this.preview(data.value);
     this.commit(data.value);
   }
 
   /**
   * Called when the mouse moves on or off of a coordinate point inside the shapes
   * highlighter and marks/unmarks the corresponding coordinate node in the shape value
   * from the Rule view.
   *
   * @param  {Object} data
   *         Data associated with the "shape-hover" event.
   *         Contains:
   *         - {String|null} point: coordinate to highlight or null if nothing to highlight
   *         - {String} type: the event type ("shape-hover-on" or "shape-hover-on").
   */
-  _onShapeHover(data) {
+  onShapeHover(data) {
     if (!this.activeProperty) {
       return;
     }
 
     let shapeValueEl = this.links.get(this.activeProperty).swatch.nextSibling;
     if (!shapeValueEl) {
       return;
     }
@@ -349,15 +345,15 @@ class ShapesInContextEditor {
     }
     let data = this.links.get(this.activeProperty);
     data.callbacks.onCommit(value);
   }
 
   destroy() {
     this.hide();
     this.unlinkAll();
-    this.highlighter.off("highlighter-event", this._onHighlighterEvent);
-    this.ruleView.off("ruleview-changed", this._onRuleViewChanged);
-    this._highligherEventHandlers = {};
+    this.highlighter.off("highlighter-event", this.onHighlighterEvent);
+    this.ruleView.off("ruleview-changed", this.onRuleViewChanged);
+    this.highligherEventHandlers = {};
   }
 }
 
 module.exports = ShapesInContextEditor;