Permalink
Browse files

Bug 1367627 - Show overlay of grid areas in Grid Highlighter. r=gl

MozReview-Commit-ID: 9KWPltfpWlT
  • Loading branch information...
TigleyM committed Jun 1, 2017
1 parent 6304f10 commit cdc9485714517dd7550da6f6b4ee5c5a5e7b6f15
@@ -5,12 +5,26 @@
"use strict";
const {
UPDATE_SHOW_GRID_AREAS,
UPDATE_SHOW_GRID_LINE_NUMBERS,
UPDATE_SHOW_INFINITE_LINES,
} = require("./index");
module.exports = {
/**
* Update the grid highlighter's show grid areas preference.
*
* @param {Boolean} enabled
* Whether or not the grid highlighter should show the grid areas.
*/
updateShowGridAreas(enabled) {
return {
type: UPDATE_SHOW_GRID_AREAS,
enabled,
};
},
/**
* Update the grid highlighter's show grid line numbers preference.
*
@@ -17,6 +17,9 @@ createEnum([
// Update the entire grids state with the new list of grids.
"UPDATE_GRIDS",
// Update the grid highlighter's show grid areas state.
"UPDATE_SHOW_GRID_AREAS",
// Update the grid highlighter's show grid line numbers state.
"UPDATE_SHOW_GRID_LINE_NUMBERS",
@@ -31,6 +31,7 @@ module.exports = createClass({
onShowGridCellHighlight: PropTypes.func.isRequired,
onShowGridLineNamesHighlight: PropTypes.func.isRequired,
onToggleGridHighlighter: PropTypes.func.isRequired,
onToggleShowGridAreas: PropTypes.func.isRequired,
onToggleShowGridLineNumbers: PropTypes.func.isRequired,
onToggleShowInfiniteLines: PropTypes.func.isRequired,
},
@@ -47,11 +48,12 @@ module.exports = createClass({
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelHighlighterForNode,
onShowGridAreaHighlight,
onShowGridCellHighlight,
onToggleShowGridAreas,
onToggleGridHighlighter,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
onShowGridAreaHighlight,
onShowGridCellHighlight,
} = this.props;
return grids.length ?
@@ -74,6 +76,7 @@ module.exports = createClass({
}),
GridDisplaySettings({
highlighterSettings,
onToggleShowGridAreas,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
})
@@ -16,12 +16,22 @@ module.exports = createClass({
propTypes: {
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
onToggleShowGridAreas: PropTypes.func.isRequired,
onToggleShowGridLineNumbers: PropTypes.func.isRequired,
onToggleShowInfiniteLines: PropTypes.func.isRequired,
},
mixins: [ addons.PureRenderMixin ],
onShowGridAreasCheckboxClick() {
let {
highlighterSettings,
onToggleShowGridAreas,
} = this.props;
onToggleShowGridAreas(!highlighterSettings.showGridAreasOverlay);
},
onShowGridLineNumbersCheckboxClick() {
let {
highlighterSettings,
@@ -88,6 +98,23 @@ module.exports = createClass({
),
getStr("layout.displayNumbersOnLines")
)
),
dom.li(
{
className: "grid-settings-item",
},
dom.label(
{},
dom.input(
{
id: "grid-setting-show-grid-areas",
type: "checkbox",
checked: highlighterSettings.showGridAreasOverlay,
onChange: this.onShowGridAreasCheckboxClick,
}
),
getStr("layout.displayGridAreas")
)
)
)
);
@@ -15,10 +15,12 @@ const {
updateGrids,
} = require("./actions/grids");
const {
updateShowGridAreas,
updateShowGridLineNumbers,
updateShowInfiniteLines,
} = require("./actions/highlighter-settings");
const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas";
const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
@@ -54,6 +56,7 @@ function GridInspector(inspector, window) {
this.onShowGridLineNamesHighlight = this.onShowGridLineNamesHighlight.bind(this);
this.onSidebarSelect = this.onSidebarSelect.bind(this);
this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this);
this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
@@ -124,6 +127,7 @@ GridInspector.prototype = {
onShowGridCellHighlight: this.onShowGridCellHighlight,
onShowGridLineNamesHighlight: this.onShowGridLineNamesHighlight,
onToggleGridHighlighter: this.onToggleGridHighlighter,
onToggleShowGridAreas: this.onToggleShowGridAreas,
onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
};
@@ -215,9 +219,11 @@ GridInspector.prototype = {
loadHighlighterSettings() {
let { dispatch } = this.store;
let showGridAreas = Services.prefs.getBoolPref(SHOW_GRID_AREAS);
let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
dispatch(updateShowGridAreas(showGridAreas));
dispatch(updateShowGridLineNumbers(showGridLineNumbers));
dispatch(updateShowInfiniteLines(showInfinteLines));
},
@@ -495,6 +501,28 @@ GridInspector.prototype = {
node !== this.highlighters.gridHighlighterShown));
},
/**
* Handler for a change in the show grid areas checkbox in the GridDisplaySettings
* component. Toggles on/off the option to show the grid areas 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 areas.
*/
onToggleShowGridAreas(enabled) {
this.store.dispatch(updateShowGridAreas(enabled));
Services.prefs.setBoolPref(SHOW_GRID_AREAS, 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 show grid line numbers checkbox in the
* GridDisplaySettings component. Toggles on/off the option to show the grid line
@@ -5,17 +5,25 @@
"use strict";
const {
UPDATE_SHOW_GRID_AREAS,
UPDATE_SHOW_GRID_LINE_NUMBERS,
UPDATE_SHOW_INFINITE_LINES
} = require("../actions/index");
const INITIAL_HIGHLIGHTER_SETTINGS = {
showGridAreasOverlay: false,
showGridLineNumbers: false,
showInfiniteLines: false,
};
let reducers = {
[UPDATE_SHOW_GRID_AREAS](highlighterSettings, { enabled }) {
return Object.assign({}, highlighterSettings, {
showGridAreasOverlay: enabled,
});
},
[UPDATE_SHOW_GRID_LINE_NUMBERS](highlighterSettings, { enabled }) {
return Object.assign({}, highlighterSettings, {
showGridLineNumbers: enabled,
@@ -13,6 +13,7 @@ support-files =
[browser_grids_display-setting-extend-grid-lines.js]
[browser_grids_display-setting-show-grid-line-numbers.js]
[browser_grids_display-setting-show-grid-areas.js]
[browser_grids_grid-list-color-picker-on-ESC.js]
[browser_grids_grid-list-color-picker-on-RETURN.js]
[browser_grids_grid-list-element-rep.js]
@@ -0,0 +1,51 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the 'Display grid areas' grid highlighter setting will update
// the redux store and pref setting.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
const SHOW_GRID_AREAS_PREF = "devtools.gridinspector.showGridAreas";
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector } = yield openLayoutView();
let { document: doc } = gridInspector;
let { store } = inspector;
yield selectNode("#grid", inspector);
let checkbox = doc.getElementById("grid-setting-show-grid-areas");
ok(!Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF),
"'Display grid areas' is pref off by default.");
info("Toggling ON the 'Display grid areas' setting.");
let onCheckboxChange = waitUntilState(store, state =>
state.highlighterSettings.showGridAreasOverlay);
checkbox.click();
yield onCheckboxChange;
info("Toggling OFF the 'Display grid areas' setting.");
onCheckboxChange = waitUntilState(store, state =>
!state.highlighterSettings.showGridAreasOverlay);
checkbox.click();
yield onCheckboxChange;
ok(!Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF),
"'Display grid areas' is pref off.");
Services.prefs.clearUserPref(SHOW_GRID_AREAS_PREF);
});
@@ -51,6 +51,7 @@ LayoutView.prototype = {
onShowGridCellHighlight,
onShowGridLineNamesHighlight,
onToggleGridHighlighter,
onToggleShowGridAreas,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
} = this.inspector.gridInspector.getComponentProps();
@@ -80,6 +81,7 @@ LayoutView.prototype = {
onShowGridLineNamesHighlight,
onToggleGeometryEditor,
onToggleGridHighlighter,
onToggleShowGridAreas,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
});
@@ -12,6 +12,10 @@
layout.cannotShowGridOutline=Cannot show outline for this grid
layout.cannotShowGridOutline.title=The selected grid’s outline cannot effectively fit inside the layout panel for it to be usable.
# LOCALIZATION NOTE (layout.displayGridAreas): Label of the display grid areas setting
# option in the CSS Grid pane.
layout.displayGridAreas=Display grid areas
# LOCALIZATION NOTE (layout.displayNumbersOnLines): Label of the display numbers on lines
# setting option in the CSS Grid pane.
layout.displayNumbersOnLines=Display numbers on lines
@@ -73,6 +73,7 @@ pref("devtools.fontinspector.enabled", true);
pref("devtools.layoutview.enabled", false);
// Grid highlighter preferences
pref("devtools.gridinspector.showGridAreas", false);
pref("devtools.gridinspector.showGridLineNumbers", false);
pref("devtools.gridinspector.showGridOutline", false);
pref("devtools.gridinspector.showInfiniteLines", false);
Oops, something went wrong.

0 comments on commit cdc9485

Please sign in to comment.