Bug 1459027 - Lazy load the AutocompletePopup in the rule view. r=pbro
MozReview-Commit-ID: B2b9aFAt0eD
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -26,20 +26,20 @@ const {
VIEW_NODE_SHAPE_SWATCH,
VIEW_NODE_VARIABLE_TYPE,
VIEW_NODE_FONT_TYPE,
} = require("devtools/client/inspector/shared/node-types");
const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overlay");
const {createChild, promiseWarn} = require("devtools/client/inspector/shared/utils");
const {debounce} = require("devtools/shared/debounce");
const EventEmitter = require("devtools/shared/event-emitter");
-const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
loader.lazyRequireGetter(this, "ClassListPreviewer", "devtools/client/inspector/rules/views/class-list-previewer");
loader.lazyRequireGetter(this, "StyleInspectorMenu", "devtools/client/inspector/shared/style-inspector-menu");
+loader.lazyRequireGetter(this, "AutocompletePopup", "devtools/client/shared/autocomplete-popup");
loader.lazyRequireGetter(this, "KeyShortcuts", "devtools/client/shared/key-shortcuts");
loader.lazyRequireGetter(this, "clipboardHelper", "devtools/shared/platform/clipboard");
const HTML_NS = "http://www.w3.org/1999/xhtml";
const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
const PREF_FONT_EDITOR = "devtools.inspector.fonteditor.enabled";
const FILTER_CHANGED_TIMEOUT = 150;
@@ -171,22 +171,16 @@ function CssRuleView(inspector, document
this._prefObserver = new PrefObserver("devtools.");
this._prefObserver.on(PREF_UA_STYLES, this._handleUAStylePrefChange);
this._prefObserver.on(PREF_DEFAULT_COLOR_UNIT, this._handleDefaultColorUnitPrefChange);
this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
this.showFontEditor = Services.prefs.getBoolPref(PREF_FONT_EDITOR);
- // The popup will be attached to the toolbox document.
- this.popup = new AutocompletePopup(inspector._toolbox.doc, {
- autoSelect: true,
- theme: "auto"
- });
-
this._showEmpty();
// Add the tooltips and highlighters to the view
this.tooltips = new TooltipsOverlay(this);
this.highlighters.addToView(this);
}
@@ -196,16 +190,28 @@ CssRuleView.prototype = {
// Used for cancelling timeouts in the style filter.
_filterChangedTimeout: null,
// Empty, unconnected element of the same type as this node, used
// to figure out how shorthand properties will be parsed.
_dummyElement: null,
+ get popup() {
+ if (!this._popup) {
+ // The popup will be attached to the toolbox document.
+ this._popup = new AutocompletePopup(this.inspector.toolbox.doc, {
+ autoSelect: true,
+ theme: "auto",
+ });
+ }
+
+ return this._popup;
+ },
+
get classListPreviewer() {
if (!this._classListPreviewer) {
this._classListPreviewer = new ClassListPreviewer(this.inspector, this.classPanel);
}
return this._classListPreviewer;
},
@@ -779,17 +785,20 @@ CssRuleView.prototype = {
if (this.element.parentNode) {
this.element.remove();
}
if (this._elementStyle) {
this._elementStyle.destroy();
}
- this.popup.destroy();
+ if (this._popup) {
+ this._popup.destroy();
+ this._popup = null;
+ }
},
/**
* Mark the view as selecting an element, disabling all interaction, and
* visually clearing the view after a few milliseconds to avoid confusion
* about which element's styles the rule view shows.
*/
_startSelectingElement: function() {
--- a/devtools/client/shared/autocomplete-popup.js
+++ b/devtools/client/shared/autocomplete-popup.js
@@ -1,23 +1,24 @@
/* 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";
-const HTML_NS = "http://www.w3.org/1999/xhtml";
const Services = require("Services");
+const EventEmitter = require("devtools/shared/event-emitter");
const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
-const EventEmitter = require("devtools/shared/event-emitter");
const {PrefObserver} = require("devtools/client/shared/prefs");
const {colorUtils} = require("devtools/shared/css/color");
+const HTML_NS = "http://www.w3.org/1999/xhtml";
let itemIdCounter = 0;
+
/**
* Autocomplete popup UI implementation.
*
* @constructor
* @param {Document} toolboxDoc
* The toolbox document to attach the autocomplete popup panel.
* @param {Object} options
* An object consiting any of the following options: