Bug 1320939 - Lazy load tooltips-overlay from rule view. r=jdescottes
MozReview-Commit-ID: FUGlM4IL3em
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -19,17 +19,16 @@ const {gDevTools} = require("devtools/cl
const {getCssProperties} = require("devtools/shared/fronts/css-properties");
const {
VIEW_NODE_SELECTOR_TYPE,
VIEW_NODE_PROPERTY_TYPE,
VIEW_NODE_VALUE_TYPE,
VIEW_NODE_IMAGE_URL_TYPE,
} = require("devtools/client/inspector/shared/node-types");
const StyleInspectorMenu = require("devtools/client/inspector/shared/style-inspector-menu");
-const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
const clipboardHelper = require("devtools/shared/platform/clipboard");
const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
const { Provider } = require("devtools/client/shared/vendor/react-redux");
const BoxModelApp = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModelApp"));
@@ -216,19 +215,29 @@ function CssComputedView(inspector, docu
// The element that we're inspecting, and the document that it comes from.
this._viewedElement = null;
this.createBoxModelView();
this.createStyleViews();
this._contextmenu = new StyleInspectorMenu(this, { isRuleView: false });
- // Add the tooltips and highlightersoverlay
- this.tooltips = new TooltipsOverlay(this);
- this.tooltips.addToView();
+ // Lazily add the tooltips to the view.
+ // Use `tooltips` if you want to automatically create an instance
+ // Use `_tooltips` if you want to check if one already exists
+ Object.defineProperty(this, "tooltips", {
+ get() {
+ delete this.tooltips;
+ const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
+ this.tooltips = this._tooltips = new TooltipsOverlay(this);
+ this.tooltips.addToView();
+ return this.tooltips;
+ },
+ configurable: true
+ });
this.highlighters.addToView(this);
}
/**
* Lookup a l10n string in the shared styleinspector string bundle.
*
* @param {String} name
@@ -794,17 +803,19 @@ CssComputedView.prototype = {
}
// Remove context menu
if (this._contextmenu) {
this._contextmenu.destroy();
this._contextmenu = null;
}
- this.tooltips.destroy();
+ if (this._tooltips) {
+ this._tooltips.destroy();
+ }
this.highlighters.removeFromView(this);
// Remove bound listeners
this.styleDocument.removeEventListener("mousedown", this.focusWindow);
this.element.removeEventListener("click", this._onClick);
this.styleDocument.removeEventListener("copy", this._onCopy);
this.element.removeEventListener("contextmenu", this._onContextMenu);
this.searchField.removeEventListener("input", this._onFilterStyles);
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -23,17 +23,16 @@ const {getCssProperties} = require("devt
const {
VIEW_NODE_SELECTOR_TYPE,
VIEW_NODE_PROPERTY_TYPE,
VIEW_NODE_VALUE_TYPE,
VIEW_NODE_IMAGE_URL_TYPE,
VIEW_NODE_LOCATION_TYPE,
} = require("devtools/client/inspector/shared/node-types");
const StyleInspectorMenu = require("devtools/client/inspector/shared/style-inspector-menu");
-const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
const {createChild, promiseWarn, throttle} = require("devtools/client/inspector/shared/utils");
const EventEmitter = require("devtools/shared/event-emitter");
const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
const clipboardHelper = require("devtools/shared/platform/clipboard");
const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
const HTML_NS = "http://www.w3.org/1999/xhtml";
const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
@@ -174,20 +173,31 @@ function CssRuleView(inspector, document
autoSelect: true,
theme: "auto"
});
this._showEmpty();
this._contextmenu = new StyleInspectorMenu(this, { isRuleView: true });
- // Add the tooltips and highlighters to the view
- this.tooltips = new TooltipsOverlay(this);
- this.tooltips.addToView();
+ // Lazily add the tooltips to the view.
+ // Use `tooltips` if you want to automatically create an instance
+ // Use `_tooltips` if you want to check if one already exists
+ Object.defineProperty(this, "tooltips", {
+ get() {
+ delete this.tooltips;
+ const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
+ this.tooltips = this._tooltips = new TooltipsOverlay(this);
+ this.tooltips.addToView();
+ return this.tooltips;
+ },
+ configurable: true
+ });
+ // Add the highlighters to the view
this.highlighters.addToView(this);
this.classListPreviewer = new ClassListPreviewer(this.inspector, this.classPanel);
EventEmitter.decorate(this);
}
CssRuleView.prototype = {
@@ -517,21 +527,28 @@ CssRuleView.prototype = {
this.pageStyle = pageStyle;
},
/**
* Return {Boolean} true if the rule view currently has an input
* editor visible.
*/
get isEditing() {
- return this.tooltips.isEditing ||
+ return this.isTooltipEditing ||
this.element.querySelectorAll(".styleinspector-propertyeditor")
.length > 0;
},
+ /**
+ * Return {Boolean} true if any of the tooltips is currently editing a value.
+ */
+ get isTooltipEditing() {
+ return this._tooltips && this._tooltips.isEditing;
+ },
+
_handlePrefChange: function (pref) {
if (pref === PREF_UA_STYLES) {
this.showUserAgentStyles = Services.prefs.getBoolPref(pref);
}
// Reselect the currently selected element
let refreshOnPrefs = [PREF_UA_STYLES, PREF_DEFAULT_COLOR_UNIT];
if (refreshOnPrefs.indexOf(pref) > -1) {
@@ -672,17 +689,19 @@ CssRuleView.prototype = {
this._outputParser = null;
// Remove context menu
if (this._contextmenu) {
this._contextmenu.destroy();
this._contextmenu = null;
}
- this.tooltips.destroy();
+ if (this._tooltips) {
+ this._tooltips.destroy();
+ }
this.highlighters.removeFromView(this);
this.classListPreviewer.destroy();
// Remove bound listeners
this.shortcuts.destroy();
this.element.removeEventListener("copy", this._onCopy);
this.element.removeEventListener("contextmenu", this._onContextMenu);
this.addRuleButton.removeEventListener("click", this._onAddRule);
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -83,18 +83,18 @@ function TextPropertyEditor(ruleEditor,
this.update();
}
TextPropertyEditor.prototype = {
/**
* Boolean indicating if the name or value is being currently edited.
*/
get editing() {
- return !!(this.nameSpan.inplaceEditor || this.valueSpan.inplaceEditor ||
- this.ruleView.tooltips.isEditing) || this.popup.isOpen;
+ return !!(this.nameSpan.inplaceEditor || this.valueSpan.inplaceEditor) ||
+ this.ruleView.isTooltipEditing || this.popup.isOpen;
},
/**
* Get the rule to the current text property
*/
get rule() {
return this.prop.rule;
},