Bug 1459027 - Lazy load the AutocompletePopup in the rule view. r=pbro

devtools/client/inspector/rules/rules.js

@@ -31,10 +31,10 @@ const TooltipsOverlay = require("devtools/client/inspector/shared/tooltips-overl
 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");
 
@@ -176,12 +176,6 @@ function CssRuleView(inspector, document, store, pageStyle) {
   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
@@ -201,6 +195,18 @@ CssRuleView.prototype = {
   // 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);
@@ -784,7 +790,10 @@ CssRuleView.prototype = {
       this._elementStyle.destroy();
     }
 
-    this.popup.destroy();
+    if (this._popup) {
+      this._popup.destroy();
+      this._popup = null;
+    }
   },
 
   /**

devtools/client/shared/autocomplete-popup.js

@@ -5,14 +5,15 @@
 
 "use strict";
 
-const HTML_NS = "http://www.w3.org/1999/xhtml";
 const Services = require("Services");
-const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 const EventEmitter = require("devtools/shared/event-emitter");
+const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 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.
  *