From d30ffce04d6a9a66a4e1b58fe22694ae58adf1b9 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Tue, 29 Nov 2016 19:38:08 +0800 Subject: [PATCH] Bug 1308263 - Part 3: Add a grid display setting for extending the grid lines infinitely. r=jryans --- .../client/inspector/layout/components/App.js | 2 + .../inspector/layout/components/Grid.js | 9 +++ .../layout/components/GridDisplaySettings.js | 66 +++++++++++++++++++ .../inspector/layout/components/GridList.js | 6 +- .../inspector/layout/components/moz.build | 1 + devtools/client/inspector/layout/layout.js | 43 +++++++++++- .../client/locales/en-US/layout.properties | 8 +++ devtools/client/themes/layout.css | 28 ++++---- 8 files changed, 145 insertions(+), 18 deletions(-) create mode 100644 devtools/client/inspector/layout/components/GridDisplaySettings.js diff --git a/devtools/client/inspector/layout/components/App.js b/devtools/client/inspector/layout/components/App.js index 0b64b108152a..f89a95d1148a 100644 --- a/devtools/client/inspector/layout/components/App.js +++ b/devtools/client/inspector/layout/components/App.js @@ -20,7 +20,9 @@ const App = createClass({ propTypes: { grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired, onToggleGridHighlighter: PropTypes.func.isRequired, + onToggleShowInfiniteLines: PropTypes.func.isRequired, }, mixins: [ addons.PureRenderMixin ], diff --git a/devtools/client/inspector/layout/components/Grid.js b/devtools/client/inspector/layout/components/Grid.js index 32940d4575ec..f81b75ec8345 100644 --- a/devtools/client/inspector/layout/components/Grid.js +++ b/devtools/client/inspector/layout/components/Grid.js @@ -7,6 +7,7 @@ const { addons, createClass, createFactory, DOM: dom, PropTypes } = require("devtools/client/shared/vendor/react"); +const GridDisplaySettings = createFactory(require("./GridDisplaySettings")); const GridList = createFactory(require("./GridList")); const Types = require("../types"); @@ -18,7 +19,9 @@ module.exports = createClass({ propTypes: { grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired, onToggleGridHighlighter: PropTypes.func.isRequired, + onToggleShowInfiniteLines: PropTypes.func.isRequired, }, mixins: [ addons.PureRenderMixin ], @@ -26,7 +29,9 @@ module.exports = createClass({ render() { let { grids, + highlighterSettings, onToggleGridHighlighter, + onToggleShowInfiniteLines, } = this.props; return grids.length ? @@ -37,6 +42,10 @@ module.exports = createClass({ GridList({ grids, onToggleGridHighlighter, + }), + GridDisplaySettings({ + highlighterSettings, + onToggleShowInfiniteLines, }) ) : diff --git a/devtools/client/inspector/layout/components/GridDisplaySettings.js b/devtools/client/inspector/layout/components/GridDisplaySettings.js new file mode 100644 index 000000000000..f724d2bb407c --- /dev/null +++ b/devtools/client/inspector/layout/components/GridDisplaySettings.js @@ -0,0 +1,66 @@ +/* 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 { addons, createClass, DOM: dom, PropTypes } = + require("devtools/client/shared/vendor/react"); + +const Types = require("../types"); +const { getStr } = require("../utils/l10n"); + +module.exports = createClass({ + + displayName: "GridDisplaySettings", + + propTypes: { + highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired, + onToggleShowInfiniteLines: PropTypes.func.isRequired, + }, + + mixins: [ addons.PureRenderMixin ], + + onShowInfiniteLinesCheckboxClick() { + let { + highlighterSettings, + onToggleShowInfiniteLines, + } = this.props; + + onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines); + }, + + render() { + let { + highlighterSettings, + } = this.props; + + return dom.div( + { + className: "grid-container", + }, + dom.span( + {}, + getStr("layout.gridDisplaySettings") + ), + dom.ul( + {}, + dom.li( + {}, + dom.label( + {}, + dom.input( + { + type: "checkbox", + checked: highlighterSettings.showInfiniteLines, + onChange: this.onShowInfiniteLinesCheckboxClick, + } + ), + getStr("layout.extendGridLinesInfinitely") + ) + ) + ) + ); + }, + +}); diff --git a/devtools/client/inspector/layout/components/GridList.js b/devtools/client/inspector/layout/components/GridList.js index 65bd9982d0bc..30c7d19c01e3 100644 --- a/devtools/client/inspector/layout/components/GridList.js +++ b/devtools/client/inspector/layout/components/GridList.js @@ -37,16 +37,14 @@ module.exports = createClass({ return dom.div( { - className: "layout-grid-list-container", + className: "grid-container", }, dom.span( {}, getStr("layout.overlayMultipleGrids") ), dom.ul( - { - id: "layout-grid-list", - }, + {}, grids.map(grid => { let { nodeFront } = grid; let { displayName, attributes } = nodeFront; diff --git a/devtools/client/inspector/layout/components/moz.build b/devtools/client/inspector/layout/components/moz.build index 1e09d9203d1c..8f4f2ca18663 100644 --- a/devtools/client/inspector/layout/components/moz.build +++ b/devtools/client/inspector/layout/components/moz.build @@ -9,5 +9,6 @@ DevToolsModules( 'Accordion.js', 'App.js', 'Grid.js', + 'GridDisplaySettings.js', 'GridList.js', ) diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js index fd4ac2189a8d..4507e7c8d649 100644 --- a/devtools/client/inspector/layout/layout.js +++ b/devtools/client/inspector/layout/layout.js @@ -13,6 +13,10 @@ const { updateGridHighlighted, updateGrids, } = require("./actions/grids"); +const { + updateShowInfiniteLines, +} = require("./actions/highlighter-settings"); + const App = createFactory(require("./components/App")); const Store = require("./store"); @@ -20,6 +24,8 @@ const { LocalizationHelper } = require("devtools/shared/l10n"); const INSPECTOR_L10N = new LocalizationHelper("devtools/client/locales/inspector.properties"); +const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines"; + function LayoutView(inspector, window) { this.document = window.document; this.highlighters = inspector.highlighters; @@ -52,6 +58,8 @@ LayoutView.prototype = { this.layoutInspector = yield this.inspector.walker.getLayoutInspector(); let store = this.store = Store(); + this.loadHighlighterSettings(); + let app = App({ /** @@ -63,7 +71,30 @@ LayoutView.prototype = { * highlighter is toggled on/off for. */ onToggleGridHighlighter: node => { - this.highlighters.toggleGridHighlighter(node); + let { highlighterSettings } = this.store.getState(); + this.highlighters.toggleGridHighlighter(node, 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, highlighterSettings } = this.store.getState(); + + for (let grid of grids) { + if (grid.highlighted) { + this.highlighters.showGridHighlighter(grid.nodeFront, highlighterSettings); + } + } }, }); @@ -111,6 +142,16 @@ LayoutView.prototype = { this.inspector.sidebar.getCurrentTabID() === "layoutview"; }, + /** + * Load the grid highligher display settings into the store from the stored preferences. + */ + loadHighlighterSettings() { + let { dispatch } = this.store; + + let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF); + dispatch(updateShowInfiniteLines(showInfinteLines)); + }, + /** * Refreshes the layout view 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. diff --git a/devtools/client/locales/en-US/layout.properties b/devtools/client/locales/en-US/layout.properties index caf02a854ebb..cf0e5a3d7e3e 100644 --- a/devtools/client/locales/en-US/layout.properties +++ b/devtools/client/locales/en-US/layout.properties @@ -10,6 +10,14 @@ # LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane. layout.header=Grid +# LOCALIZATION NOTE (layout.gridDisplaySettings): The header for the grid display +# settings container in the CSS Grid pane. +layout.gridDisplaySettings=Grid Display Settings + +# LOCALIZATION NOTE (layout.extendGridLinesInfinitely): Label of the extend grid lines +# infinitely setting option in the CSS Grid pane. +layout.extendGridLinesInfinitely=Extend grid lines infinitely + # LOCALIZATION NOTE (layout.noGrids): In the case where there are no CSS grid # containers to display. layout.noGrids=No grids diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index 9985572740c3..3d106e01a898 100644 --- a/devtools/client/themes/layout.css +++ b/devtools/client/themes/layout.css @@ -9,38 +9,40 @@ } /** - * Grid Container + * Common styles for shared components */ -#layout-grid-container { - margin: 5px; -} - -/** - * Grid List - */ - -.layout-grid-list-container { +.grid-container { display: flex; flex-direction: column; + flex: 1; align-items: center; } -.layout-grid-list-container > span { +.grid-container > span { font-weight: bold; margin-bottom: 3px; } -#layout-grid-list { +.grid-container > ul { list-style: none; margin: 0; padding: 0; } -#layout-grid-list li { +.grid-container li { padding: 4px 0; } +/** + * Grid Container + */ + +#layout-grid-container { + display: flex; + margin: 5px; +} + /** * Container when no grids are present */