Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 06:45:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1464314 - Lazy load utils in the grid inspector. r=pbro

Browse Source
This commit is contained in:
Gabriel Luong 2018-05-25 13:28:11 -04:00
parent fb9eccfcd6
commit 49ca27c991
1 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
devtools/client/inspector/grids/grid-inspector.js
View File

@ -5,12 +5,7 @@
"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,
@ -23,6 +18,11 @@ const {
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";
@ -83,6 +83,18 @@ class GridInspector {
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.
@ -100,15 +112,6 @@ class GridInspector {
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);
@ -137,8 +140,9 @@ class GridInspector {
// 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;
@ -146,7 +150,6 @@ class GridInspector {
this.inspector = null;
this.layoutInspector = null;
this.store = null;
this.swatchColorPickerTooltip = null;
this.walker = null;
}
@ -264,11 +267,6 @@ class GridInspector {
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;
@ -280,17 +278,28 @@ class GridInspector {
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
@ -306,7 +315,7 @@ class GridInspector {
}
}
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 &&