Bug 1464314 - Lazy load utils in the grid inspector. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 25 May 2018 13:28:11 -0400
changeset 419908 e5b13ca06bf419c8845b76beb60061b439b15550
parent 419907 abb1759701b30a6e858321db3164045178fefc5c
child 419934 58bb8b7eaaa14db1d80feb9649a1d9b737f1fbd9
push id103656
push usergabriel.luong@gmail.com
push dateFri, 25 May 2018 17:36:32 +0000
treeherdermozilla-inbound@e5b13ca06bf4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1464314
milestone62.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 1464314 - Lazy load utils in the grid inspector. r=pbro
devtools/client/inspector/grids/grid-inspector.js
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -1,33 +1,33 @@
 /* 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 Services = require("Services");
-
-const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
 const { throttle } = require("devtools/client/inspector/shared/utils");
-const { compareFragmentsGeometry } = require("devtools/client/inspector/grids/utils/utils");
-const asyncStorage = require("devtools/shared/async-storage");
-const { parseURL } = require("devtools/client/shared/source-utils");
 
 const {
   updateGridColor,
   updateGridHighlighted,
   updateGrids,
 } = require("./actions/grids");
 const {
   updateShowGridAreas,
   updateShowGridLineNumbers,
   updateShowInfiniteLines,
 } = require("./actions/highlighter-settings");
 
+loader.lazyRequireGetter(this, "compareFragmentsGeometry", "devtools/client/inspector/grids/utils/utils", true);
+loader.lazyRequireGetter(this, "SwatchColorPickerTooltip", "devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
+loader.lazyRequireGetter(this, "parseURL", "devtools/client/shared/source-utils", true);
+loader.lazyRequireGetter(this, "asyncStorage", "devtools/shared/async-storage");
+
 const CSS_GRID_COUNT_HISTOGRAM_ID = "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE";
 
 const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
 const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
 const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
 
 const TELEMETRY_GRID_AREAS_OVERLAY_CHECKED = "devtools.grid.showGridAreasOverlay.checked";
 const TELEMETRY_GRID_LINE_NUMBERS_CHECKED = "devtools.grid.showGridLineNumbers.checked";
@@ -78,16 +78,28 @@ class GridInspector {
   get highlighters() {
     if (!this._highlighters) {
       this._highlighters = this.inspector.highlighters;
     }
 
     return this._highlighters;
   }
 
+  get swatchColorPickerTooltip() {
+    if (!this._swatchColorPickerTooltip) {
+      this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
+        this.inspector.toolbox.doc,
+        this.inspector,
+        { supportsCssColor4ColorFunction: () => false }
+      );
+    }
+
+    return this._swatchColorPickerTooltip;
+  }
+
   /**
    * Initializes the grid inspector by fetching the LayoutFront from the walker, loading
    * the highlighter settings and initalizing the SwatchColorPicker instance.
    */
   async init() {
     if (!this.inspector) {
       return;
     }
@@ -95,25 +107,16 @@ class GridInspector {
     try {
       this.layoutInspector = await this.inspector.walker.getLayoutInspector();
     } catch (e) {
       // This call might fail if called asynchrously after the toolbox is finished
       // closing.
       return;
     }
 
-    // Create a shared SwatchColorPicker instance to be reused by all GridItem components.
-    this.swatchColorPickerTooltip = new SwatchColorPickerTooltip(
-      this.inspector.toolbox.doc,
-      this.inspector,
-      {
-        supportsCssColor4ColorFunction: () => false
-      }
-    );
-
     this.document.addEventListener("mousemove", () => {
       this.highlighters.on("grid-highlighter-hidden", this.onHighlighterHidden);
       this.highlighters.on("grid-highlighter-shown", this.onHighlighterShown);
     }, { once: true });
 
     this.inspector.sidebar.on("select", this.onSidebarSelect);
     this.inspector.on("new-root", this.onNavigate);
 
@@ -132,26 +135,26 @@ class GridInspector {
 
     this.inspector.sidebar.off("select", this.onSidebarSelect);
     this.inspector.off("new-root", this.onNavigate);
 
     this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
 
     // The color picker may not be ready as `init` function is async,
     // and we do not wait for its completion before calling destroy in tests
-    if (this.swatchColorPickerTooltip) {
-      this.swatchColorPickerTooltip.destroy();
+    if (this._swatchColorPickerTooltip) {
+      this._swatchColorPickerTooltip.destroy();
+      this._swatchColorPickerTooltip = null;
     }
 
     this._highlighters = null;
     this.document = null;
     this.inspector = null;
     this.layoutInspector = null;
     this.store = null;
-    this.swatchColorPickerTooltip = null;
     this.walker = null;
   }
 
   getComponentProps() {
     return {
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
       onSetGridOverlayColor: this.onSetGridOverlayColor,
       onShowGridOutlineHighlight: this.onShowGridOutlineHighlight,
@@ -259,59 +262,65 @@ class GridInspector {
    * Updates the grid panel by dispatching the new grid data. This is called when the
    * layout view becomes visible or the view needs to be updated with new grid data.
    */
   async updateGridPanel() {
     // Stop refreshing if the inspector or store is already destroyed.
     if (!this.inspector || !this.store) {
       return;
     }
-    let currentUrl = this.inspector.target.url;
-    // Get the hostname, if there is no hostname, fall back on protocol
-    // ex: `data:` uri, and `about:` pages
-    let hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
-    let customColors = await asyncStorage.getItem("gridInspectorHostColors") || {};
 
     // Get all the GridFront from the server if no gridFronts were provided.
     let gridFronts;
     try {
       gridFronts = await this.layoutInspector.getGrids(this.walker.rootNode);
     } catch (e) {
       // This call might fail if called asynchrously after the toolbox is finished
       // closing.
       return;
     }
 
+    if (!gridFronts.length) {
+      this.store.dispatch(updateGrids([]));
+      this.inspector.emit("grid-panel-updated");
+      return;
+    }
+
+    let currentUrl = this.inspector.target.url;
+
     // Log how many CSS Grid elements DevTools sees.
-    if (gridFronts.length > 0 &&
-        currentUrl != this.inspector.previousURL) {
+    if (currentUrl != this.inspector.previousURL) {
       this.telemetry.getHistogramById(CSS_GRID_COUNT_HISTOGRAM_ID).add(gridFronts.length);
       this.inspector.previousURL = currentUrl;
     }
 
+    // Get the hostname, if there is no hostname, fall back on protocol
+    // ex: `data:` uri, and `about:` pages
+    let hostname = parseURL(currentUrl).hostname || parseURL(currentUrl).protocol;
+    let customColors = await asyncStorage.getItem("gridInspectorHostColors") || {};
+
     let grids = [];
     for (let i = 0; i < gridFronts.length; i++) {
       let grid = gridFronts[i];
-
       let nodeFront = grid.containerNodeFront;
 
       // If the GridFront didn't yet have access to the NodeFront for its container, then
       // get it from the walker. This happens when the walker hasn't yet seen this
       // particular DOM Node in the tree yet, or when we are connected to an older server.
       if (!nodeFront) {
         try {
           nodeFront = await this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
         } catch (e) {
           // This call might fail if called asynchrously after the toolbox is finished
           // closing.
           return;
         }
       }
 
-      let colorForHost = customColors[hostname] ? customColors[hostname][i] : undefined;
+      let colorForHost = customColors[hostname] ? customColors[hostname][i] : null;
       let fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
       let color = this.getInitialGridColor(nodeFront, colorForHost, fallbackColor);
       let highlighted = this._highlighters &&
         nodeFront == this.highlighters.gridHighlighterShown;
 
       grids.push({
         id: i,
         actorID: grid.actorID,