зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1308263 - Part 3: Add a grid display setting for extending the grid lines infinitely. r=jryans
This commit is contained in:
Родитель
3d9f8b5279
Коммит
d30ffce04d
|
@ -20,7 +20,9 @@ const App = createClass({
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
|
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
|
||||||
|
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
|
||||||
onToggleGridHighlighter: PropTypes.func.isRequired,
|
onToggleGridHighlighter: PropTypes.func.isRequired,
|
||||||
|
onToggleShowInfiniteLines: PropTypes.func.isRequired,
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [ addons.PureRenderMixin ],
|
mixins: [ addons.PureRenderMixin ],
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
const { addons, createClass, createFactory, DOM: dom, PropTypes } =
|
const { addons, createClass, createFactory, DOM: dom, PropTypes } =
|
||||||
require("devtools/client/shared/vendor/react");
|
require("devtools/client/shared/vendor/react");
|
||||||
|
|
||||||
|
const GridDisplaySettings = createFactory(require("./GridDisplaySettings"));
|
||||||
const GridList = createFactory(require("./GridList"));
|
const GridList = createFactory(require("./GridList"));
|
||||||
|
|
||||||
const Types = require("../types");
|
const Types = require("../types");
|
||||||
|
@ -18,7 +19,9 @@ module.exports = createClass({
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
|
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
|
||||||
|
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
|
||||||
onToggleGridHighlighter: PropTypes.func.isRequired,
|
onToggleGridHighlighter: PropTypes.func.isRequired,
|
||||||
|
onToggleShowInfiniteLines: PropTypes.func.isRequired,
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [ addons.PureRenderMixin ],
|
mixins: [ addons.PureRenderMixin ],
|
||||||
|
@ -26,7 +29,9 @@ module.exports = createClass({
|
||||||
render() {
|
render() {
|
||||||
let {
|
let {
|
||||||
grids,
|
grids,
|
||||||
|
highlighterSettings,
|
||||||
onToggleGridHighlighter,
|
onToggleGridHighlighter,
|
||||||
|
onToggleShowInfiniteLines,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return grids.length ?
|
return grids.length ?
|
||||||
|
@ -37,6 +42,10 @@ module.exports = createClass({
|
||||||
GridList({
|
GridList({
|
||||||
grids,
|
grids,
|
||||||
onToggleGridHighlighter,
|
onToggleGridHighlighter,
|
||||||
|
}),
|
||||||
|
GridDisplaySettings({
|
||||||
|
highlighterSettings,
|
||||||
|
onToggleShowInfiniteLines,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
:
|
:
|
||||||
|
|
|
@ -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")
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
|
@ -37,16 +37,14 @@ module.exports = createClass({
|
||||||
|
|
||||||
return dom.div(
|
return dom.div(
|
||||||
{
|
{
|
||||||
className: "layout-grid-list-container",
|
className: "grid-container",
|
||||||
},
|
},
|
||||||
dom.span(
|
dom.span(
|
||||||
{},
|
{},
|
||||||
getStr("layout.overlayMultipleGrids")
|
getStr("layout.overlayMultipleGrids")
|
||||||
),
|
),
|
||||||
dom.ul(
|
dom.ul(
|
||||||
{
|
{},
|
||||||
id: "layout-grid-list",
|
|
||||||
},
|
|
||||||
grids.map(grid => {
|
grids.map(grid => {
|
||||||
let { nodeFront } = grid;
|
let { nodeFront } = grid;
|
||||||
let { displayName, attributes } = nodeFront;
|
let { displayName, attributes } = nodeFront;
|
||||||
|
|
|
@ -9,5 +9,6 @@ DevToolsModules(
|
||||||
'Accordion.js',
|
'Accordion.js',
|
||||||
'App.js',
|
'App.js',
|
||||||
'Grid.js',
|
'Grid.js',
|
||||||
|
'GridDisplaySettings.js',
|
||||||
'GridList.js',
|
'GridList.js',
|
||||||
)
|
)
|
||||||
|
|
|
@ -13,6 +13,10 @@ const {
|
||||||
updateGridHighlighted,
|
updateGridHighlighted,
|
||||||
updateGrids,
|
updateGrids,
|
||||||
} = require("./actions/grids");
|
} = require("./actions/grids");
|
||||||
|
const {
|
||||||
|
updateShowInfiniteLines,
|
||||||
|
} = require("./actions/highlighter-settings");
|
||||||
|
|
||||||
const App = createFactory(require("./components/App"));
|
const App = createFactory(require("./components/App"));
|
||||||
const Store = require("./store");
|
const Store = require("./store");
|
||||||
|
|
||||||
|
@ -20,6 +24,8 @@ const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||||
const INSPECTOR_L10N =
|
const INSPECTOR_L10N =
|
||||||
new LocalizationHelper("devtools/client/locales/inspector.properties");
|
new LocalizationHelper("devtools/client/locales/inspector.properties");
|
||||||
|
|
||||||
|
const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
|
||||||
|
|
||||||
function LayoutView(inspector, window) {
|
function LayoutView(inspector, window) {
|
||||||
this.document = window.document;
|
this.document = window.document;
|
||||||
this.highlighters = inspector.highlighters;
|
this.highlighters = inspector.highlighters;
|
||||||
|
@ -52,6 +58,8 @@ LayoutView.prototype = {
|
||||||
this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
|
this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
|
||||||
let store = this.store = Store();
|
let store = this.store = Store();
|
||||||
|
|
||||||
|
this.loadHighlighterSettings();
|
||||||
|
|
||||||
let app = App({
|
let app = App({
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -63,7 +71,30 @@ LayoutView.prototype = {
|
||||||
* highlighter is toggled on/off for.
|
* highlighter is toggled on/off for.
|
||||||
*/
|
*/
|
||||||
onToggleGridHighlighter: node => {
|
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";
|
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
|
* 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.
|
* layout view becomes visible or the view needs to be updated with new grid data.
|
||||||
|
|
|
@ -10,6 +10,14 @@
|
||||||
# LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane.
|
# LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane.
|
||||||
layout.header=Grid
|
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
|
# LOCALIZATION NOTE (layout.noGrids): In the case where there are no CSS grid
|
||||||
# containers to display.
|
# containers to display.
|
||||||
layout.noGrids=No grids
|
layout.noGrids=No grids
|
||||||
|
|
|
@ -9,38 +9,40 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Grid Container
|
* Common styles for shared components
|
||||||
*/
|
*/
|
||||||
|
|
||||||
#layout-grid-container {
|
.grid-container {
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Grid List
|
|
||||||
*/
|
|
||||||
|
|
||||||
.layout-grid-list-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-grid-list-container > span {
|
.grid-container > span {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#layout-grid-list {
|
.grid-container > ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#layout-grid-list li {
|
.grid-container li {
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Grid Container
|
||||||
|
*/
|
||||||
|
|
||||||
|
#layout-grid-container {
|
||||||
|
display: flex;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Container when no grids are present
|
* Container when no grids are present
|
||||||
*/
|
*/
|
||||||
|
|
Загрузка…
Ссылка в новой задаче