From d7d3158d2b201158775ec59c9bc1e48ad7b363e8 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Fri, 24 Feb 2017 14:14:04 -0500 Subject: [PATCH] Bug 1342305 - Refactor grid inspector into its own grids folder. r=jdescottes --HG-- rename : devtools/client/inspector/layout/actions/grids.js => devtools/client/inspector/grids/actions/grids.js rename : devtools/client/inspector/layout/actions/highlighter-settings.js => devtools/client/inspector/grids/actions/highlighter-settings.js rename : devtools/client/inspector/layout/actions/index.js => devtools/client/inspector/grids/actions/index.js rename : devtools/client/inspector/layout/actions/moz.build => devtools/client/inspector/grids/actions/moz.build rename : devtools/client/inspector/layout/components/Grid.js => devtools/client/inspector/grids/components/Grid.js rename : devtools/client/inspector/layout/components/GridDisplaySettings.js => devtools/client/inspector/grids/components/GridDisplaySettings.js rename : devtools/client/inspector/layout/components/GridItem.js => devtools/client/inspector/grids/components/GridItem.js rename : devtools/client/inspector/layout/components/GridList.js => devtools/client/inspector/grids/components/GridList.js rename : devtools/client/inspector/layout/components/GridOutline.js => devtools/client/inspector/grids/components/GridOutline.js rename : devtools/client/inspector/layout/reducers/grids.js => devtools/client/inspector/grids/reducers/grids.js rename : devtools/client/inspector/layout/reducers/highlighter-settings.js => devtools/client/inspector/grids/reducers/highlighter-settings.js rename : devtools/client/inspector/layout/reducers/moz.build => devtools/client/inspector/grids/reducers/moz.build rename : devtools/client/inspector/layout/types.js => devtools/client/inspector/grids/types.js rename : devtools/client/inspector/layout/utils/l10n.js => devtools/client/inspector/grids/utils/l10n.js rename : devtools/client/inspector/layout/utils/moz.build => devtools/client/inspector/grids/utils/moz.build --- .../{layout => grids}/actions/grids.js | 0 .../actions/highlighter-settings.js | 0 .../{layout => grids}/actions/index.js | 0 .../{layout => grids}/actions/moz.build | 0 .../{layout => grids}/components/Grid.js | 0 .../components/GridDisplaySettings.js | 0 .../{layout => grids}/components/GridItem.js | 0 .../{layout => grids}/components/GridList.js | 0 .../components/GridOutline.js | 0 .../inspector/grids/components/moz.build | 13 + .../client/inspector/grids/grid-inspector.js | 404 ++++++++++++++++++ devtools/client/inspector/grids/moz.build | 17 + .../{layout => grids}/reducers/grids.js | 0 .../reducers/highlighter-settings.js | 0 .../{layout => grids}/reducers/moz.build | 0 .../inspector/{layout => grids}/types.js | 0 .../inspector/{layout => grids}/utils/l10n.js | 0 .../{layout => grids}/utils/moz.build | 0 devtools/client/inspector/inspector.js | 3 + .../client/inspector/layout/components/App.js | 21 +- .../inspector/layout/components/moz.build | 5 - devtools/client/inspector/layout/layout.js | 361 +--------------- devtools/client/inspector/layout/moz.build | 4 - devtools/client/inspector/moz.build | 1 + devtools/client/inspector/reducers.js | 4 +- devtools/client/shared/browser-loader.js | 1 + 26 files changed, 474 insertions(+), 360 deletions(-) rename devtools/client/inspector/{layout => grids}/actions/grids.js (100%) rename devtools/client/inspector/{layout => grids}/actions/highlighter-settings.js (100%) rename devtools/client/inspector/{layout => grids}/actions/index.js (100%) rename devtools/client/inspector/{layout => grids}/actions/moz.build (100%) rename devtools/client/inspector/{layout => grids}/components/Grid.js (100%) rename devtools/client/inspector/{layout => grids}/components/GridDisplaySettings.js (100%) rename devtools/client/inspector/{layout => grids}/components/GridItem.js (100%) rename devtools/client/inspector/{layout => grids}/components/GridList.js (100%) rename devtools/client/inspector/{layout => grids}/components/GridOutline.js (100%) create mode 100644 devtools/client/inspector/grids/components/moz.build create mode 100644 devtools/client/inspector/grids/grid-inspector.js create mode 100644 devtools/client/inspector/grids/moz.build rename devtools/client/inspector/{layout => grids}/reducers/grids.js (100%) rename devtools/client/inspector/{layout => grids}/reducers/highlighter-settings.js (100%) rename devtools/client/inspector/{layout => grids}/reducers/moz.build (100%) rename devtools/client/inspector/{layout => grids}/types.js (100%) rename devtools/client/inspector/{layout => grids}/utils/l10n.js (100%) rename devtools/client/inspector/{layout => grids}/utils/moz.build (100%) diff --git a/devtools/client/inspector/layout/actions/grids.js b/devtools/client/inspector/grids/actions/grids.js similarity index 100% rename from devtools/client/inspector/layout/actions/grids.js rename to devtools/client/inspector/grids/actions/grids.js diff --git a/devtools/client/inspector/layout/actions/highlighter-settings.js b/devtools/client/inspector/grids/actions/highlighter-settings.js similarity index 100% rename from devtools/client/inspector/layout/actions/highlighter-settings.js rename to devtools/client/inspector/grids/actions/highlighter-settings.js diff --git a/devtools/client/inspector/layout/actions/index.js b/devtools/client/inspector/grids/actions/index.js similarity index 100% rename from devtools/client/inspector/layout/actions/index.js rename to devtools/client/inspector/grids/actions/index.js diff --git a/devtools/client/inspector/layout/actions/moz.build b/devtools/client/inspector/grids/actions/moz.build similarity index 100% rename from devtools/client/inspector/layout/actions/moz.build rename to devtools/client/inspector/grids/actions/moz.build diff --git a/devtools/client/inspector/layout/components/Grid.js b/devtools/client/inspector/grids/components/Grid.js similarity index 100% rename from devtools/client/inspector/layout/components/Grid.js rename to devtools/client/inspector/grids/components/Grid.js diff --git a/devtools/client/inspector/layout/components/GridDisplaySettings.js b/devtools/client/inspector/grids/components/GridDisplaySettings.js similarity index 100% rename from devtools/client/inspector/layout/components/GridDisplaySettings.js rename to devtools/client/inspector/grids/components/GridDisplaySettings.js diff --git a/devtools/client/inspector/layout/components/GridItem.js b/devtools/client/inspector/grids/components/GridItem.js similarity index 100% rename from devtools/client/inspector/layout/components/GridItem.js rename to devtools/client/inspector/grids/components/GridItem.js diff --git a/devtools/client/inspector/layout/components/GridList.js b/devtools/client/inspector/grids/components/GridList.js similarity index 100% rename from devtools/client/inspector/layout/components/GridList.js rename to devtools/client/inspector/grids/components/GridList.js diff --git a/devtools/client/inspector/layout/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js similarity index 100% rename from devtools/client/inspector/layout/components/GridOutline.js rename to devtools/client/inspector/grids/components/GridOutline.js diff --git a/devtools/client/inspector/grids/components/moz.build b/devtools/client/inspector/grids/components/moz.build new file mode 100644 index 000000000000..9ded404213e8 --- /dev/null +++ b/devtools/client/inspector/grids/components/moz.build @@ -0,0 +1,13 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + 'Grid.js', + 'GridDisplaySettings.js', + 'GridItem.js', + 'GridList.js', + 'GridOutline.js', +) diff --git a/devtools/client/inspector/grids/grid-inspector.js b/devtools/client/inspector/grids/grid-inspector.js new file mode 100644 index 000000000000..1f3cdb39d0ad --- /dev/null +++ b/devtools/client/inspector/grids/grid-inspector.js @@ -0,0 +1,404 @@ +/* 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 { Task } = require("devtools/shared/task"); + +const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip"); + +const { + updateGridColor, + updateGridHighlighted, + updateGrids, +} = require("./actions/grids"); +const { + updateShowGridLineNumbers, + updateShowInfiniteLines, +} = require("./actions/highlighter-settings"); + +const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers"; +const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines"; + +// Default grid colors. +const GRID_COLORS = [ + "#05E4EE", + "#BB9DFF", + "#FFB53B", + "#71F362", + "#FF90FF", + "#FF90FF", + "#1B80FF", + "#FF2647" +]; + +function GridInspector(inspector, window) { + this.document = window.document; + this.highlighters = inspector.highlighters; + this.inspector = inspector; + this.store = inspector.store; + this.walker = this.inspector.walker; + + this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this); + this.setSelectedNode = this.setSelectedNode.bind(this); + this.updateGridPanel = this.updateGridPanel.bind(this); + + this.onGridLayoutChange = this.onGridLayoutChange.bind(this); + this.onHighlighterChange = this.onHighlighterChange.bind(this); + this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this); + this.onShowBoxModelHighlighterForNode = + this.onShowBoxModelHighlighterForNode.bind(this); + this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this); + this.onSidebarSelect = this.onSidebarSelect.bind(this); + this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this); + this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this); + this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this); + + this.init(); +} + +GridInspector.prototype = { + + /** + * Initializes the grid inspector by fetching the LayoutFront from the walker, loading + * the highlighter settings and initalizing the SwatchColorPicker instance. + */ + init: Task.async(function* () { + if (!this.inspector) { + return; + } + + this.layoutInspector = yield this.inspector.walker.getLayoutInspector(); + + this.loadHighlighterSettings(); + + // 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.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange); + this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange); + this.inspector.sidebar.on("select", this.onSidebarSelect); + + this.onSidebarSelect(); + }), + + /** + * Destruction function called when the inspector is destroyed. Removes event listeners + * and cleans up references. + */ + destroy() { + this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange); + this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange); + this.inspector.sidebar.off("select", this.onSidebarSelect); + this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange); + + this.swatchColorPickerTooltip.destroy(); + + this.document = null; + this.highlighters = null; + this.inspector = null; + this.layoutInspector = null; + this.store = null; + this.swatchColorPickerTooltip = null; + this.walker = null; + }, + + getComponentProps() { + return { + getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip, + setSelectedNode: this.setSelectedNode, + onSetGridOverlayColor: this.onSetGridOverlayColor, + onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode, + onShowGridAreaHighlight: this.onShowGridAreaHighlight, + onToggleGridHighlighter: this.onToggleGridHighlighter, + onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers, + onToggleShowInfiniteLines: this.onToggleShowInfiniteLines, + }; + }, + + /** + * Returns the color set for the grid highlighter associated with the provided + * nodeFront. + * + * @param {NodeFront} nodeFront + * The NodeFront for which we need the color. + */ + getGridColorForNodeFront(nodeFront) { + let { grids } = this.store.getState(); + + for (let grid of grids) { + if (grid.nodeFront === nodeFront) { + return grid.color; + } + } + + return null; + }, + + /** + * Create a highlighter settings object for the provided nodeFront. + * + * @param {NodeFront} nodeFront + * The NodeFront for which we need highlighter settings. + */ + getGridHighlighterSettings(nodeFront) { + let { highlighterSettings } = this.store.getState(); + + // Get the grid color for the provided nodeFront. + let color = this.getGridColorForNodeFront(nodeFront); + + // Merge the grid color to the generic highlighter settings. + return Object.assign({}, highlighterSettings, { + color + }); + }, + + /** + * Retrieve the shared SwatchColorPicker instance. + */ + getSwatchColorPickerTooltip() { + return this.swatchColorPickerTooltip; + }, + + /** + * Returns true if the layout panel is visible, and false otherwise. + */ + isPanelVisible() { + return this.inspector.toolbox.currentToolId === "inspector" && + this.inspector.sidebar && + this.inspector.sidebar.getCurrentTabID() === "layoutview"; + }, + + /** + * Load the grid highligher display settings into the store from the stored preferences. + */ + loadHighlighterSettings() { + let { dispatch } = this.store; + + let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS); + let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF); + + dispatch(updateShowGridLineNumbers(showGridLineNumbers)); + dispatch(updateShowInfiniteLines(showInfinteLines)); + }, + + /** + * Set the inspector selection. + * + * @param {NodeFront} nodeFront + * The NodeFront corresponding to the new selection. + */ + setSelectedNode(nodeFront) { + this.inspector.selection.setNodeFront(nodeFront, "layout-panel"); + }, + + /** + * 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. + * + * @param {Array|null} gridFronts + * Optional array of all GridFront in the current page. + */ + updateGridPanel: Task.async(function* (gridFronts) { + // Stop refreshing if the inspector or store is already destroyed. + if (!this.inspector || !this.store) { + return; + } + + // Get all the GridFront from the server if no gridFronts were provided. + if (!gridFronts) { + gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode); + } + + let grids = []; + for (let i = 0; i < gridFronts.length; i++) { + let grid = gridFronts[i]; + let nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]); + + let fallbackColor = GRID_COLORS[i % GRID_COLORS.length]; + let color = this.getGridColorForNodeFront(nodeFront) || fallbackColor; + + grids.push({ + id: i, + color, + gridFragments: grid.gridFragments, + highlighted: nodeFront == this.highlighters.gridHighlighterShown, + nodeFront, + }); + } + + this.store.dispatch(updateGrids(grids)); + }), + + /** + * Handler for "grid-layout-changed" events emitted from the LayoutActor. + * + * @param {Array} grids + * Array of all GridFront in the current page. + */ + onGridLayoutChange(grids) { + if (this.isPanelVisible()) { + this.updateGridPanel(grids); + } + }, + + /** + * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted + * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state. + * + * @param {Event} event + * Event that was triggered. + * @param {NodeFront} nodeFront + * The NodeFront of the grid container element for which the grid highlighter + * is shown for. + */ + onHighlighterChange(event, nodeFront) { + let highlighted = event === "grid-highlighter-shown"; + this.store.dispatch(updateGridHighlighted(nodeFront, highlighted)); + }, + + /** + * Handler for a change in the grid overlay color picker for a grid container. + * + * @param {NodeFront} node + * The NodeFront of the grid container element for which the grid color is + * being updated. + * @param {String} color + * A hex string representing the color to use. + */ + onSetGridOverlayColor(node, color) { + this.store.dispatch(updateGridColor(node, color)); + let { grids } = this.store.getState(); + + // If the grid for which the color was updated currently has a highlighter, update + // the color. + for (let grid of grids) { + if (grid.nodeFront === node && grid.highlighted) { + let highlighterSettings = this.getGridHighlighterSettings(node); + this.highlighters.showGridHighlighter(node, highlighterSettings); + } + } + }, + + /** + * Shows the box-model highlighter on the element corresponding to the provided + * NodeFront. + * + * @param {NodeFront} nodeFront + * The node to highlight. + * @param {Object} options + * Options passed to the highlighter actor. + */ + onShowBoxModelHighlighterForNode(nodeFront, options) { + let toolbox = this.inspector.toolbox; + toolbox.highlighterUtils.highlightNodeFront(nodeFront, options); + }, + + /** + * Highlights the grid area in the CSS Grid Highlighter for the given grid. + * + * @param {NodeFront} node + * The NodeFront of the grid container element for which the grid + * highlighter is highlighted for. + * @param {String} gridAreaName + * The name of the grid area for which the grid highlighter + * is highlighted for. + * @param {String} color + * The color of the grid area for which the grid highlighter + * is highlighted for. + */ + onShowGridAreaHighlight(node, gridAreaName, color) { + let { highlighterSettings } = this.store.getState(); + + highlighterSettings.showGridArea = gridAreaName; + highlighterSettings.color = color; + + this.highlighters.showGridHighlighter(node, highlighterSettings); + }, + + /** + * Handler for the inspector sidebar select event. Starts listening for + * "grid-layout-changed" if the layout panel is visible. Otherwise, stop + * listening for grid layout changes. Finally, refresh the layout view if + * it is visible. + */ + onSidebarSelect() { + if (!this.isPanelVisible()) { + this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange); + return; + } + + this.layoutInspector.on("grid-layout-changed", this.onGridLayoutChange); + this.updateGridPanel(); + }, + + /** + * Handler for a change in the input checkboxes in the GridList component. + * Toggles on/off the grid highlighter for the provided grid container element. + * + * @param {NodeFront} node + * The NodeFront of the grid container element for which the grid + * highlighter is toggled on/off for. + */ + onToggleGridHighlighter(node) { + let highlighterSettings = this.getGridHighlighterSettings(node); + this.highlighters.toggleGridHighlighter(node, highlighterSettings); + }, + + /** + * Handler for a change in the show grid line numbers checkbox in the + * GridDisplaySettings component. Toggles on/off the option to show the grid line + * numbers in the grid highlighter. Refreshes the shown grid highlighter for the + * grids currently highlighted. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should show the grid line numbers. + */ + onToggleShowGridLineNumbers(enabled) { + this.store.dispatch(updateShowGridLineNumbers(enabled)); + Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled); + + let { grids } = this.store.getState(); + + for (let grid of grids) { + if (grid.highlighted) { + let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront); + this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings); + } + } + }, + + /** + * Handler for a change in the extend grid lines infinitely checkbox in the + * GridDisplaySettings component. Toggles on/off the option to extend the grid + * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter + * for grids currently highlighted. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should extend grid lines infinitely. + */ + onToggleShowInfiniteLines(enabled) { + this.store.dispatch(updateShowInfiniteLines(enabled)); + Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled); + + let { grids } = this.store.getState(); + + for (let grid of grids) { + if (grid.highlighted) { + let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront); + this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings); + } + } + }, + +}; + +module.exports = GridInspector; diff --git a/devtools/client/inspector/grids/moz.build b/devtools/client/inspector/grids/moz.build new file mode 100644 index 000000000000..1b51bd039bfb --- /dev/null +++ b/devtools/client/inspector/grids/moz.build @@ -0,0 +1,17 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + 'actions', + 'components', + 'reducers', + 'utils', +] + +DevToolsModules( + 'grid-inspector.js', + 'types.js', +) diff --git a/devtools/client/inspector/layout/reducers/grids.js b/devtools/client/inspector/grids/reducers/grids.js similarity index 100% rename from devtools/client/inspector/layout/reducers/grids.js rename to devtools/client/inspector/grids/reducers/grids.js diff --git a/devtools/client/inspector/layout/reducers/highlighter-settings.js b/devtools/client/inspector/grids/reducers/highlighter-settings.js similarity index 100% rename from devtools/client/inspector/layout/reducers/highlighter-settings.js rename to devtools/client/inspector/grids/reducers/highlighter-settings.js diff --git a/devtools/client/inspector/layout/reducers/moz.build b/devtools/client/inspector/grids/reducers/moz.build similarity index 100% rename from devtools/client/inspector/layout/reducers/moz.build rename to devtools/client/inspector/grids/reducers/moz.build diff --git a/devtools/client/inspector/layout/types.js b/devtools/client/inspector/grids/types.js similarity index 100% rename from devtools/client/inspector/layout/types.js rename to devtools/client/inspector/grids/types.js diff --git a/devtools/client/inspector/layout/utils/l10n.js b/devtools/client/inspector/grids/utils/l10n.js similarity index 100% rename from devtools/client/inspector/layout/utils/l10n.js rename to devtools/client/inspector/grids/utils/l10n.js diff --git a/devtools/client/inspector/layout/utils/moz.build b/devtools/client/inspector/grids/utils/moz.build similarity index 100% rename from devtools/client/inspector/layout/utils/moz.build rename to devtools/client/inspector/grids/utils/moz.build diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js index 2b6aecf95c80..77e40218eb15 100644 --- a/devtools/client/inspector/inspector.js +++ b/devtools/client/inspector/inspector.js @@ -25,6 +25,7 @@ const MenuItem = require("devtools/client/framework/menu-item"); const {HTMLBreadcrumbs} = require("devtools/client/inspector/breadcrumbs"); const BoxModel = require("devtools/client/inspector/boxmodel/box-model"); const {FontInspector} = require("devtools/client/inspector/fonts/fonts"); +const GridInspector = require("devtools/client/inspector/grids/grid-inspector"); const {InspectorSearch} = require("devtools/client/inspector/inspector-search"); const {RuleViewTool} = require("devtools/client/inspector/rules/rules"); const HighlightersOverlay = require("devtools/client/inspector/shared/highlighters-overlay"); @@ -577,6 +578,8 @@ Inspector.prototype = { this.computedview = new ComputedViewTool(this, this.panelWin); if (Services.prefs.getBoolPref("devtools.layoutview.enabled")) { + this.gridInspector = new GridInspector(this, this.panelWin); + const LayoutView = this.browserRequire("devtools/client/inspector/layout/layout"); this.layoutview = new LayoutView(this, this.panelWin); } diff --git a/devtools/client/inspector/layout/components/App.js b/devtools/client/inspector/layout/components/App.js index f5fa375e6bcf..e2821506925e 100644 --- a/devtools/client/inspector/layout/components/App.js +++ b/devtools/client/inspector/layout/components/App.js @@ -10,26 +10,29 @@ const { connect } = require("devtools/client/shared/vendor/react-redux"); const { LocalizationHelper } = require("devtools/shared/l10n"); -const Accordion = createFactory(require("./Accordion")); -const Grid = createFactory(require("./Grid")); - const BoxModel = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModel")); +const Grid = createFactory(require("devtools/client/inspector/grids/components/Grid")); -const Types = require("../types"); -const { getStr } = require("../utils/l10n"); +const BoxModelTypes = require("devtools/client/inspector/boxmodel/types"); +const GridTypes = require("devtools/client/inspector/grids/types"); + +const Accordion = createFactory(require("./Accordion")); const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties"; const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI); +const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties"; +const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI); + const App = createClass({ displayName: "App", propTypes: { - boxModel: PropTypes.shape(Types.boxModel).isRequired, + boxModel: PropTypes.shape(BoxModelTypes.boxModel).isRequired, getSwatchColorPickerTooltip: PropTypes.func.isRequired, - grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, - highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired, + grids: PropTypes.arrayOf(PropTypes.shape(GridTypes.grid)).isRequired, + highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired, setSelectedNode: PropTypes.func.isRequired, showBoxModelProperties: PropTypes.bool.isRequired, showGridOutline: PropTypes.bool.isRequired, @@ -58,7 +61,7 @@ const App = createClass({ opened: true, }, { - header: getStr("layout.header"), + header: LAYOUT_L10N.getStr("layout.header"), component: Grid, componentProps: this.props, opened: true, diff --git a/devtools/client/inspector/layout/components/moz.build b/devtools/client/inspector/layout/components/moz.build index 23802773d41c..af862910ef2b 100644 --- a/devtools/client/inspector/layout/components/moz.build +++ b/devtools/client/inspector/layout/components/moz.build @@ -8,9 +8,4 @@ DevToolsModules( 'Accordion.css', 'Accordion.js', 'App.js', - 'Grid.js', - 'GridDisplaySettings.js', - 'GridItem.js', - 'GridList.js', - 'GridOutline.js', ) diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js index 4ea9bff507a4..b29c441e18aa 100644 --- a/devtools/client/inspector/layout/layout.js +++ b/devtools/client/inspector/layout/layout.js @@ -5,66 +5,29 @@ "use strict"; const Services = require("Services"); -const { Task } = require("devtools/shared/task"); const { createFactory, createElement } = require("devtools/client/shared/vendor/react"); const { Provider } = require("devtools/client/shared/vendor/react-redux"); -const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip"); - -const { - updateGridColor, - updateGridHighlighted, - updateGrids, -} = require("./actions/grids"); -const { - updateShowGridLineNumbers, - updateShowInfiniteLines, -} = require("./actions/highlighter-settings"); - const App = createFactory(require("./components/App")); const { LocalizationHelper } = require("devtools/shared/l10n"); const INSPECTOR_L10N = new LocalizationHelper("devtools/client/locales/inspector.properties"); -const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers"; const SHOW_GRID_OUTLINE_PREF = "devtools.gridinspector.showGridOutline"; -const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines"; - -// Default grid colors. -const GRID_COLORS = [ - "#05E4EE", - "#BB9DFF", - "#FFB53B", - "#71F362", - "#FF90FF", - "#FF90FF", - "#1B80FF", - "#FF2647" -]; function LayoutView(inspector, window) { this.document = window.document; - this.highlighters = inspector.highlighters; this.inspector = inspector; this.store = inspector.store; - this.walker = this.inspector.walker; - - this.onGridLayoutChange = this.onGridLayoutChange.bind(this); - this.onHighlighterChange = this.onHighlighterChange.bind(this); - this.onSidebarSelect = this.onSidebarSelect.bind(this); this.init(); } LayoutView.prototype = { - /** - * Initializes the layout view by fetching the LayoutFront from the walker, creating - * the redux store and adding the view into the inspector sidebar. - */ - init: Task.async(function* () { + init() { if (!this.inspector) { return; } @@ -75,41 +38,20 @@ LayoutView.prototype = { onShowBoxModelHighlighter, } = this.inspector.boxmodel.getComponentProps(); - this.layoutInspector = yield this.inspector.walker.getLayoutInspector(); - - this.loadHighlighterSettings(); - - this.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange); - this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange); - this.inspector.sidebar.on("select", this.onSidebarSelect); - - // Create a shared SwatchColorPicker instance to be reused by all GridItem components. - this.swatchColorPickerTooltip = new SwatchColorPickerTooltip( - this.inspector.toolbox.doc, - this.inspector, - { - supportsCssColor4ColorFunction: () => false - } - ); + let { + getSwatchColorPickerTooltip, + setSelectedNode, + onSetGridOverlayColor, + onShowBoxModelHighlighterForNode, + onShowGridAreaHighlight, + onToggleGridHighlighter, + onToggleShowGridLineNumbers, + onToggleShowInfiniteLines, + } = this.inspector.gridInspector.getComponentProps(); let app = App({ - /** - * Retrieve the shared SwatchColorPicker instance. - */ - getSwatchColorPickerTooltip: () => { - return this.swatchColorPickerTooltip; - }, - - /** - * Set the inspector selection. - * - * @param {NodeFront} nodeFront - * The NodeFront corresponding to the new selection. - */ - setSelectedNode: (nodeFront) => { - this.inspector.selection.setNodeFront(nodeFront, "layout-panel"); - }, - + getSwatchColorPickerTooltip, + setSelectedNode, /** * Shows the box model properties under the box model if true, otherwise, hidden by * default. @@ -123,127 +65,14 @@ LayoutView.prototype = { showGridOutline: Services.prefs.getBoolPref(SHOW_GRID_OUTLINE_PREF), onHideBoxModelHighlighter, - - /** - * Handler for a change in the grid overlay color picker for a grid container. - * - * @param {NodeFront} node - * The NodeFront of the grid container element for which the grid color is - * being updated. - * @param {String} color - * A hex string representing the color to use. - */ - onSetGridOverlayColor: (node, color) => { - this.store.dispatch(updateGridColor(node, color)); - let { grids } = this.store.getState(); - - // If the grid for which the color was updated currently has a highlighter, update - // the color. - for (let grid of grids) { - if (grid.nodeFront === node && grid.highlighted) { - let highlighterSettings = this.getGridHighlighterSettings(node); - this.highlighters.showGridHighlighter(node, highlighterSettings); - } - } - }, - + onSetGridOverlayColor, onShowBoxModelEditor, onShowBoxModelHighlighter, - - /** - * Shows the box-model highlighter on the element corresponding to the provided - * NodeFront. - * - * @param {NodeFront} nodeFront - * The node to highlight. - * @param {Object} options - * Options passed to the highlighter actor. - */ - onShowBoxModelHighlighterForNode: (nodeFront, options) => { - let toolbox = this.inspector.toolbox; - toolbox.highlighterUtils.highlightNodeFront(nodeFront, options); - }, - - /** - * Highlights the grid area in the CSS Grid Highlighter for the given grid. - * - * @param {NodeFront} node - * The NodeFront of the grid container element for which the grid - * highlighter is highlighted for. - * @param {String} gridAreaName - * The name of the grid area for which the grid highlighter - * is highlighted for. - * @param {String} color - * The color of the grid area for which the grid highlighter - * is highlighted for. - */ - onShowGridAreaHighlight: (node, gridAreaName, color) => { - let { highlighterSettings } = this.store.getState(); - - highlighterSettings.showGridArea = gridAreaName; - highlighterSettings.color = color; - - this.highlighters.showGridHighlighter(node, highlighterSettings); - }, - - /** - * Handler for a change in the input checkboxes in the GridList component. - * Toggles on/off the grid highlighter for the provided grid container element. - * - * @param {NodeFront} node - * The NodeFront of the grid container element for which the grid - * highlighter is toggled on/off for. - */ - onToggleGridHighlighter: node => { - let highlighterSettings = this.getGridHighlighterSettings(node); - this.highlighters.toggleGridHighlighter(node, highlighterSettings); - }, - - /** - * Handler for a change in the show grid line numbers checkbox in the - * GridDisplaySettings component. Toggles on/off the option to show the grid line - * numbers in the grid highlighter. Refreshes the shown grid highlighter for the - * grids currently highlighted. - * - * @param {Boolean} enabled - * Whether or not the grid highlighter should show the grid line numbers. - */ - onToggleShowGridLineNumbers: enabled => { - this.store.dispatch(updateShowGridLineNumbers(enabled)); - Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled); - - let { grids } = this.store.getState(); - - for (let grid of grids) { - if (grid.highlighted) { - let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront); - this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings); - } - } - }, - - /** - * Handler for a change in the extend grid lines infinitely checkbox in the - * GridDisplaySettings component. Toggles on/off the option to extend the grid - * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter - * for grids currently highlighted. - * - * @param {Boolean} enabled - * Whether or not the grid highlighter should extend grid lines infinitely. - */ - onToggleShowInfiniteLines: enabled => { - this.store.dispatch(updateShowInfiniteLines(enabled)); - Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled); - - let { grids } = this.store.getState(); - - for (let grid of grids) { - if (grid.highlighted) { - let highlighterSettings = this.getGridHighlighterSettings(grid.nodeFront); - this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings); - } - } - } + onShowBoxModelHighlighterForNode, + onShowGridAreaHighlight, + onToggleGridHighlighter, + onToggleShowGridLineNumbers, + onToggleShowInfiniteLines, }); let provider = createElement(Provider, { @@ -261,163 +90,15 @@ LayoutView.prototype = { provider, defaultTab == "layoutview" ); - }), + }, /** - * Destruction function called when the inspector is destroyed. Removes event listeners - * and cleans up references. + * Destruction function called when the inspector is destroyed. Cleans up references. */ destroy() { - this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange); - this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange); - this.inspector.sidebar.off("select", this.onSidebarSelect); - this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange); - this.document = null; this.inspector = null; - this.layoutInspector = null; this.store = null; - this.walker = null; - }, - - /** - * Returns the color set for the grid highlighter associated with the provided - * nodeFront. - * - * @param {NodeFront} nodeFront - * The NodeFront for which we need the color. - */ - getGridColorForNodeFront(nodeFront) { - let { grids } = this.store.getState(); - - for (let grid of grids) { - if (grid.nodeFront === nodeFront) { - return grid.color; - } - } - - return null; - }, - - /** - * Create a highlighter settings object for the provided nodeFront. - * - * @param {NodeFront} nodeFront - * The NodeFront for which we need highlighter settings. - */ - getGridHighlighterSettings(nodeFront) { - let { highlighterSettings } = this.store.getState(); - - // Get the grid color for the provided nodeFront. - let color = this.getGridColorForNodeFront(nodeFront); - - // Merge the grid color to the generic highlighter settings. - return Object.assign({}, highlighterSettings, { - color - }); - }, - - /** - * Returns true if the layout panel is visible, and false otherwise. - */ - isPanelVisible() { - return this.inspector.toolbox.currentToolId === "inspector" && - this.inspector.sidebar && - this.inspector.sidebar.getCurrentTabID() === "layoutview"; - }, - - /** - * Load the grid highligher display settings into the store from the stored preferences. - */ - loadHighlighterSettings() { - let { dispatch } = this.store; - - let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS); - let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF); - - dispatch(updateShowGridLineNumbers(showGridLineNumbers)); - dispatch(updateShowInfiniteLines(showInfinteLines)); - }, - - /** - * 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. - * - * @param {Array|null} gridFronts - * Optional array of all GridFront in the current page. - */ - updateGridPanel: Task.async(function* (gridFronts) { - // Stop refreshing if the inspector or store is already destroyed. - if (!this.inspector || !this.store) { - return; - } - - // Get all the GridFront from the server if no gridFronts were provided. - if (!gridFronts) { - gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode); - } - - let grids = []; - for (let i = 0; i < gridFronts.length; i++) { - let grid = gridFronts[i]; - let nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]); - - let fallbackColor = GRID_COLORS[i % GRID_COLORS.length]; - let color = this.getGridColorForNodeFront(nodeFront) || fallbackColor; - - grids.push({ - id: i, - color, - gridFragments: grid.gridFragments, - highlighted: nodeFront == this.highlighters.gridHighlighterShown, - nodeFront, - }); - } - - this.store.dispatch(updateGrids(grids)); - }), - - /** - * Handler for "grid-layout-changed" events emitted from the LayoutActor. - * - * @param {Array} grids - * Array of all GridFront in the current page. - */ - onGridLayoutChange(grids) { - if (this.isPanelVisible()) { - this.updateGridPanel(grids); - } - }, - - /** - * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted - * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state. - * - * @param {Event} event - * Event that was triggered. - * @param {NodeFront} nodeFront - * The NodeFront of the grid container element for which the grid highlighter - * is shown for. - */ - onHighlighterChange(event, nodeFront) { - let highlighted = event === "grid-highlighter-shown"; - this.store.dispatch(updateGridHighlighted(nodeFront, highlighted)); - }, - - /** - * Handler for the inspector sidebar select event. Starts listening for - * "grid-layout-changed" if the layout panel is visible. Otherwise, stop - * listening for grid layout changes. Finally, refresh the layout view if - * it is visible. - */ - onSidebarSelect() { - if (!this.isPanelVisible()) { - this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange); - return; - } - - this.layoutInspector.on("grid-layout-changed", this.onGridLayoutChange); - this.updateGridPanel(); }, }; diff --git a/devtools/client/inspector/layout/moz.build b/devtools/client/inspector/layout/moz.build index 4d425f932182..1629596e4dd5 100644 --- a/devtools/client/inspector/layout/moz.build +++ b/devtools/client/inspector/layout/moz.build @@ -5,13 +5,9 @@ # file, You can obtain one at http://mozilla.org/MPL/2.0/. DIRS += [ - 'actions', 'components', - 'reducers', - 'utils', ] DevToolsModules( 'layout.js', - 'types.js', ) diff --git a/devtools/client/inspector/moz.build b/devtools/client/inspector/moz.build index 8f1679fd2b39..cb30a78c0856 100644 --- a/devtools/client/inspector/moz.build +++ b/devtools/client/inspector/moz.build @@ -7,6 +7,7 @@ DIRS += [ 'components', 'computed', 'fonts', + 'grids', 'layout', 'markup', 'rules', diff --git a/devtools/client/inspector/reducers.js b/devtools/client/inspector/reducers.js index a6818664560e..55c6d82948e7 100644 --- a/devtools/client/inspector/reducers.js +++ b/devtools/client/inspector/reducers.js @@ -8,5 +8,5 @@ // settings. exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model"); -exports.grids = require("devtools/client/inspector/layout/reducers/grids"); -exports.highlighterSettings = require("devtools/client/inspector/layout/reducers/highlighter-settings"); +exports.grids = require("devtools/client/inspector/grids/reducers/grids"); +exports.highlighterSettings = require("devtools/client/inspector/grids/reducers/highlighter-settings"); diff --git a/devtools/client/shared/browser-loader.js b/devtools/client/shared/browser-loader.js index 3aef74a99bf9..5f8dffc5769a 100644 --- a/devtools/client/shared/browser-loader.js +++ b/devtools/client/shared/browser-loader.js @@ -14,6 +14,7 @@ const { AppConstants } = devtools.require("resource://gre/modules/AppConstants.j const BROWSER_BASED_DIRS = [ "resource://devtools/client/inspector/boxmodel", "resource://devtools/client/inspector/computed", + "resource://devtools/client/inspector/grids", "resource://devtools/client/inspector/layout", "resource://devtools/client/jsonview", "resource://devtools/client/shared/vendor",