Bug 1435373 - Rename and reorder methods and properties per review feedback. r=gl
MozReview-Commit-ID: DTuqhLFWOWV
--- 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;