Bug 1458777 - Lazy load the ClassListPreviewer in CssRuleView. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 03 May 2018 07:04:19 -0400
changeset 472930 f3e741859906174a0d52f7529620b226ea6c1c66
parent 472929 8dd4e9950089be0a792d1c139e5b29a76966cdb4
child 472931 4a2622e9e2b4f4ac42954c1f4e2f956468f202d9
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1458777
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1458777 - Lazy load the ClassListPreviewer in CssRuleView. r=pbro
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/views/class-list-previewer.js
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -10,17 +10,16 @@ const promise = require("promise");
 const Services = require("Services");
 const {l10n} = require("devtools/shared/inspector/css-logic");
 const {ELEMENT_STYLE} = require("devtools/shared/specs/styles");
 const OutputParser = require("devtools/client/shared/output-parser");
 const {PrefObserver} = require("devtools/client/shared/prefs");
 const ElementStyle = require("devtools/client/inspector/rules/models/element-style");
 const Rule = require("devtools/client/inspector/rules/models/rule");
 const RuleEditor = require("devtools/client/inspector/rules/views/rule-editor");
-const ClassListPreviewer = require("devtools/client/inspector/rules/views/class-list-previewer");
 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,
   VIEW_NODE_LOCATION_TYPE,
   VIEW_NODE_SHAPE_POINT_TYPE,
@@ -32,16 +31,18 @@ const StyleInspectorMenu = require("devt
 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 KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
 
+loader.lazyRequireGetter(this, "ClassListPreviewer", "devtools/client/inspector/rules/views/class-list-previewer");
+
 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;
 
 // This is used to parse user input when filtering.
 const FILTER_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*;?$/;
@@ -184,31 +185,37 @@ function CssRuleView(inspector, document
   this._showEmpty();
 
   this._contextmenu = new StyleInspectorMenu(this, { isRuleView: true });
 
   // Add the tooltips and highlighters to the view
   this.tooltips = new TooltipsOverlay(this);
 
   this.highlighters.addToView(this);
-
-  this.classListPreviewer = new ClassListPreviewer(this.inspector, this.classPanel);
 }
 
 CssRuleView.prototype = {
   // The element that we're inspecting.
   _viewedElement: null,
 
   // 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 classListPreviewer() {
+    if (!this._classListPreviewer) {
+      this._classListPreviewer = new ClassListPreviewer(this.inspector, this.classPanel);
+    }
+
+    return this._classListPreviewer;
+  },
+
   // Get the dummy elemenet.
   get dummyElement() {
     return this._dummyElement;
   },
 
   // Get the filter search value.
   get searchValue() {
     return this.searchField.value.toLowerCase();
@@ -720,25 +727,29 @@ CssRuleView.prototype = {
     this._prefObserver.off(
       PREF_DEFAULT_COLOR_UNIT,
       this._handleDefaultColorUnitPrefChange
     );
     this._prefObserver.destroy();
 
     this._outputParser = null;
 
+    if (this._classListPreviewer) {
+      this._classListPreviewer.destroy();
+      this._classListPreviewer = null;
+    }
+
     // Remove context menu
     if (this._contextmenu) {
       this._contextmenu.destroy();
       this._contextmenu = null;
     }
 
     this.tooltips.destroy();
     this.highlighters.removeFromView(this);
-    this.classListPreviewer.destroy();
     this.unselectAllRules();
 
     // Remove bound listeners
     this.shortcuts.destroy();
     this.element.removeEventListener("copy", this._onCopy);
     this.element.removeEventListener("contextmenu", this._onContextMenu);
     this.addRuleButton.removeEventListener("click", this._onAddRule);
     this.searchField.removeEventListener("input", this._onFilterStyles);
--- a/devtools/client/inspector/rules/views/class-list-previewer.js
+++ b/devtools/client/inspector/rules/views/class-list-previewer.js
@@ -222,16 +222,18 @@ function ClassListPreviewer(inspector, c
   this.classesEl = this.doc.createElement("div");
   this.classesEl.classList.add("classes");
   this.containerEl.appendChild(this.classesEl);
 
   // Start listening for interesting events.
   this.inspector.selection.on("new-node-front", this.onNewSelection);
   this.containerEl.addEventListener("input", this.onCheckBoxChanged);
   this.model.on("current-node-class-changed", this.onCurrentNodeClassChanged);
+
+  this.onNewSelection();
 }
 
 ClassListPreviewer.prototype = {
   destroy() {
     this.inspector.selection.off("new-node-front", this.onNewSelection);
     this.addEl.removeEventListener("keypress", this.onKeyPress);
     this.containerEl.removeEventListener("input", this.onCheckBoxChanged);