new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/actions/flexbox.js
@@ -0,0 +1,47 @@
+/* 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 {
+ CLEAR_FLEXBOX,
+ UPDATE_FLEXBOX,
+ UPDATE_FLEXBOX_HIGHLIGHTED,
+} = require("./index");
+
+module.exports = {
+
+ /**
+ * Clears the flexbox state by resetting it back to the initial flexbox state.
+ */
+ clearFlexbox() {
+ return {
+ type: CLEAR_FLEXBOX,
+ };
+ },
+
+ /**
+ * Updates the flexbox state with the newly selected flexbox.
+ */
+ updateFlexbox(flexbox) {
+ return {
+ type: UPDATE_FLEXBOX,
+ flexbox,
+ };
+ },
+
+ /**
+ * Updates the flexbox highlighted state.
+ *
+ * @param {Boolean} highlighted
+ * Whether or not the flexbox highlighter is highlighting the flexbox.
+ */
+ updateFlexboxHighlighted(highlighted) {
+ return {
+ type: UPDATE_FLEXBOX_HIGHLIGHTED,
+ highlighted,
+ };
+ },
+
+};--- a/devtools/client/inspector/flexbox/actions/index.js
+++ b/devtools/client/inspector/flexbox/actions/index.js
@@ -3,12 +3,18 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { createEnum } = require("devtools/client/shared/enum");
createEnum([
- // Update the entire flexboxes state with the new list of flexboxes.
- "UPDATE_FLEXBOXES",
+ // Clears the flexbox state by resetting it back to the initial flexbox state.
+ "CLEAR_FLEXBOX",
+
+ // Updates the flexbox state with the newly selected flexbox.
+ "UPDATE_FLEXBOX",
+
+ // Updates the flexbox highlighted state.
+ "UPDATE_FLEXBOX_HIGHLIGHTED",
], module.exports);--- a/devtools/client/inspector/flexbox/actions/moz.build
+++ b/devtools/client/inspector/flexbox/actions/moz.build
@@ -1,9 +1,10 @@
# -*- 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(
+ 'flexbox.js',
'index.js',
)--- a/devtools/client/inspector/flexbox/components/Flexbox.js
+++ b/devtools/client/inspector/flexbox/components/Flexbox.js
@@ -1,26 +1,65 @@
/* 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 {
- DOM: dom,
- PureComponent,
-} = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
+
+const FlexboxItem = createFactory(require("./FlexboxItem"));
+
+const Types = require("../types");
class Flexbox extends PureComponent {
static get propTypes() {
- return {};
+ return {
+ flexbox: PropTypes.shape(Types.flexbox).isRequired,
+ setSelectedNode: PropTypes.func.isRequired,
+ onHideBoxModelHighlighter: PropTypes.func.isRequired,
+ onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+ onToggleFlexboxHighlighter: PropTypes.func.isRequired,
+ };
}
render() {
- return dom.div(
- {
- id: "layout-flexbox-container",
- }
- );
+ const {
+ flexbox,
+ setSelectedNode,
+ onHideBoxModelHighlighter,
+ onShowBoxModelHighlighterForNode,
+ onToggleFlexboxHighlighter,
+ } = this.props;
+
+ return flexbox.actorID ?
+ dom.div({ id: "layout-flexbox-container" },
+ dom.div({ className: "flexbox-content" },
+ dom.div({ className: "flexbox-container" },
+ dom.span({}, getStr("flexbox.overlayFlexbox")),
+ dom.ul(
+ {
+ id: "flexbox-list",
+ className: "devtools-monospace",
+ },
+ FlexboxItem({
+ key: flexbox.id,
+ flexbox,
+ setSelectedNode,
+ onHideBoxModelHighlighter,
+ onShowBoxModelHighlighterForNode,
+ onToggleFlexboxHighlighter,
+ })
+ )
+ )
+ )
+ )
+ :
+ dom.div({ className: "devtools-sidepanel-no-result" },
+ getStr("flexbox.noFlexboxeOnThisPage")
+ );
}
}
module.exports = Flexbox;new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/components/FlexboxItem.js
@@ -0,0 +1,99 @@
+/* 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 { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { translateNodeFrontToGrip } = require("devtools/client/inspector/shared/utils");
+
+// Reps
+const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
+const { Rep } = REPS;
+const ElementNode = REPS.ElementNode;
+
+const Types = require("../types");
+
+class FlexboxItem extends PureComponent {
+ static get propTypes() {
+ return {
+ flexbox: PropTypes.shape(Types.flexbox).isRequired,
+ setSelectedNode: PropTypes.func.isRequired,
+ onHideBoxModelHighlighter: PropTypes.func.isRequired,
+ onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
+ onToggleFlexboxHighlighter: PropTypes.func.isRequired,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+ this.onFlexboxCheckboxClick = this.onFlexboxCheckboxClick.bind(this);
+ this.onFlexboxInspectIconClick = this.onFlexboxInspectIconClick.bind(this);
+ }
+
+ onFlexboxCheckboxClick(e) {
+ // If the click was on the svg icon to select the node in the inspector, bail out.
+ const originalTarget = e.nativeEvent && e.nativeEvent.explicitOriginalTarget;
+ if (originalTarget && originalTarget.namespaceURI === "http://www.w3.org/2000/svg") {
+ // We should be able to cancel the click event propagation after the following reps
+ // issue is implemented : https://github.com/devtools-html/reps/issues/95 .
+ e.preventDefault();
+ return;
+ }
+
+ const {
+ flexbox,
+ onToggleFlexboxHighlighter,
+ } = this.props;
+
+ onToggleFlexboxHighlighter(flexbox.nodeFront);
+ }
+
+ onFlexboxInspectIconClick(nodeFront) {
+ const { setSelectedNode } = this.props;
+ setSelectedNode(nodeFront, "layout-panel").catch(e => console.error(e));
+ nodeFront.scrollIntoView().catch(e => console.error(e));
+ }
+
+ render() {
+ const {
+ flexbox,
+ onHideBoxModelHighlighter,
+ onShowBoxModelHighlighterForNode,
+ } = this.props;
+ const {
+ actorID,
+ highlighted,
+ nodeFront,
+ } = flexbox;
+
+ return dom.li(
+ {},
+ dom.label(
+ {},
+ dom.input(
+ {
+ type: "checkbox",
+ value: actorID,
+ checked: highlighted,
+ onChange: this.onFlexboxCheckboxClick,
+ }
+ ),
+ Rep(
+ {
+ defaultRep: ElementNode,
+ mode: MODE.TINY,
+ object: translateNodeFrontToGrip(nodeFront),
+ onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
+ onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+ onInspectIconClick: () => this.onFlexboxInspectIconClick(nodeFront),
+ }
+ )
+ )
+ );
+ }
+}
+
+module.exports = FlexboxItem;--- a/devtools/client/inspector/flexbox/components/moz.build
+++ b/devtools/client/inspector/flexbox/components/moz.build
@@ -1,9 +1,10 @@
# -*- 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(
'Flexbox.js',
+ 'FlexboxItem.js',
)--- a/devtools/client/inspector/flexbox/flexbox.js
+++ b/devtools/client/inspector/flexbox/flexbox.js
@@ -1,21 +1,251 @@
/* 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 { throttle } = require("devtools/client/inspector/shared/utils");
+
+const {
+ clearFlexbox,
+ updateFlexbox,
+ updateFlexboxHighlighted,
+} = require("./actions/flexbox");
+
class FlexboxInspector {
constructor(inspector, window) {
this.document = window.document;
+ this.highlighters = inspector.highlighters;
this.inspector = inspector;
this.store = inspector.store;
+ this.walker = inspector.walker;
+
+ this.onHighlighterChange = this.onHighlighterChange.bind(this);
+ this.onReflow = throttle(this.onReflow, 500, this);
+ this.onSidebarSelect = this.onSidebarSelect.bind(this);
+ this.onToggleFlexboxHighlighter = this.onToggleFlexboxHighlighter.bind(this);
+ this.onUpdatePanel = this.onUpdatePanel.bind(this);
+
+ this.init();
+ }
+
+ async init() {
+ if (!this.inspector) {
+ return;
+ }
+
+ this.hasGetCurrentFlexbox = await this.inspector.target.actorHasMethod("layout",
+ "getCurrentFlexbox");
+ this.layoutInspector = await this.walker.getLayoutInspector();
+
+ this.highlighters.on("flexbox-highlighter-hidden", this.onHighlighterChange);
+ this.highlighters.on("flexbox-highlighter-shown", this.onHighlighterChange);
+ this.inspector.sidebar.on("select", this.onSidebarSelect);
+
+ this.onSidebarSelect();
}
destroy() {
+ this.highlighters.off("flexbox-highlighter-hidden", this.onHighlighterChange);
+ this.highlighters.off("flexbox-highlighter-shown", this.onHighlighterChange);
+ this.inspector.sidebar.off("select", this.onSidebarSelect);
+
+ this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
+
this.document = null;
+ this.highlighters = null;
this.inspector = null;
+ this.hasGetCurrentFlexbox = null;
+ this.layoutInspector = null;
this.store = null;
+ this.walker = null;
+ }
+
+ getComponentProps() {
+ return {
+ onToggleFlexboxHighlighter: this.onToggleFlexboxHighlighter,
+ };
+ }
+
+ /**
+ * Returns true if the layout panel is visible, and false otherwise.
+ */
+ isPanelVisible() {
+ return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
+ this.inspector.toolbox.currentToolId === "inspector" &&
+ this.inspector.sidebar.getCurrentTabID() === "layoutview";
+ }
+
+ /**
+ * Handler for "flexbox-highlighter-shown" and "flexbox-highlighter-hidden" events
+ * emitted from the HighlightersOverlay. Updates the flex container highlighted state
+ * only if the provided NodeFront is the current selected flex container.
+ *
+ * @param {Event} event
+ * Event that was triggered.
+ * @param {NodeFront} nodeFront
+ * The NodeFront of the flex container element for which the flexbox
+ * highlighter is shown for.
+ */
+ onHighlighterChange(event, nodeFront) {
+ const { flexbox } = this.store.getState();
+ const highlighted = event === "flexbox-highlighter-shown";
+
+ if (flexbox.nodeFront === nodeFront && flexbox.highlighted !== highlighted) {
+ this.store.dispatch(updateFlexboxHighlighted(highlighted));
+ }
+ }
+
+ /**
+ * Handler for the "reflow" event fired by the inspector's reflow tracker. On reflows,
+ * updates the flexbox panel because the shape of the flexbox on the page may have
+ * changed.
+ *
+ * TODO: In the future, we will want to compare the flex item fragment data returned
+ * for rendering the flexbox outline.
+ */
+ async onReflow() {
+ if (!this.isPanelVisible()) {
+ return;
+ }
+
+ const { flexbox } = this.store.getState();
+
+ let flexboxFront;
+ try {
+ if (!this.hasGetCurrentFlexbox) {
+ return;
+ }
+
+ flexboxFront = await this.layoutInspector.getCurrentFlexbox(
+ this.inspector.selection.nodeFront);
+ } catch (e) {
+ // This call might fail if called asynchrously after the toolbox is finished
+ // closing.
+ return;
+ }
+
+ // Clear the flexbox panel if there is no flex container for the current node
+ // selection.
+ if (!flexboxFront) {
+ this.store.dispatch(clearFlexbox());
+ return;
+ }
+
+ // Do nothing because the same flex container is still selected.
+ if (flexbox.actorID == flexboxFront.actorID) {
+ return;
+ }
+
+ // Update the flexbox panel with the new flexbox front contents.
+ this.update(flexboxFront);
+ }
+
+ /**
+ * Handler for the inspector sidebar "select" event. Updates the flexbox panel if it
+ * is visible.
+ */
+ onSidebarSelect() {
+ if (!this.isPanelVisible()) {
+ this.inspector.reflowTracker.untrackReflows(this, this.onReflow);
+ this.inspector.off("new-root", this.onUpdatePanel);
+ this.inspector.selection.off("new-node-front", this.onUpdatePanel);
+ return;
+ }
+
+ this.inspector.reflowTracker.trackReflows(this, this.onReflow);
+ this.inspector.on("new-root", this.onUpdatePanel);
+ this.inspector.selection.on("new-node-front", this.onUpdatePanel);
+
+ this.update();
+ }
+
+ /**
+ * Handler for a change in the input checkboxes in the FlexboxItem component.
+ * Toggles on/off the flexbox highlighter for the provided flex container element.
+ *
+ * @param {NodeFront} node
+ * The NodeFront of the flexb container element for which the flexbox
+ * highlighter is toggled on/off for.
+ */
+ onToggleFlexboxHighlighter(node) {
+ this.highlighters.toggleFlexboxHighlighter(node);
+ this.store.dispatch(updateFlexboxHighlighted(node !==
+ this.highlighters.flexboxHighlighterShow));
+ }
+
+ /**
+ * Handler for "new-root" event fired by the inspector and "new-node-front" event fired
+ * by the inspector selection. Updates the flexbox panel if it is visible.
+ */
+ onUpdatePanel() {
+ if (!this.isPanelVisible()) {
+ return;
+ }
+
+ this.update();
+ }
+
+ /**
+ * Updates the flexbox panel by dispatching the new flexbox data. This is called when
+ * the layout view becomes visible or a new node is selected and needs to be update
+ * with new flexbox data.
+ *
+ * @param {FlexboxFront|Null} flexboxFront
+ * THe FlexboxFront of the flex container for the current node selection.
+ */
+ async update(flexboxFront) {
+ // Stop refreshing if the inspector or store is already destroyed or no node is
+ // selected.
+ if (!this.inspector || !this.store || !this.inspector.selection.nodeFront) {
+ return;
+ }
+
+ // Fetch the current flexbox if no flexbox front was passed into this update.
+ if (!flexboxFront) {
+ try {
+ if (!this.hasGetCurrentFlexbox) {
+ return;
+ }
+
+ flexboxFront = await this.layoutInspector.getCurrentFlexbox(
+ this.inspector.selection.nodeFront);
+ } catch (e) {
+ // This call might fail if called asynchrously after the toolbox is finished
+ // closing.
+ return;
+ }
+ }
+
+ // Clear the flexbox panel if there is no flex container for the current node
+ // selection.
+ if (!flexboxFront) {
+ this.store.dispatch(clearFlexbox());
+ return;
+ }
+
+ let nodeFront = flexboxFront.containerNodeFront;
+
+ // If the FlexboxFront doesn't yet have access to the NodeFront for its container,
+ // then get it from the walker. This happens when the walker hasn't seen this
+ // particular DOM Node in the tree yet or when we are connected to an older server.
+ if (!nodeFront) {
+ try {
+ nodeFront = await this.walker.getNodeFromActor(flexboxFront.actorID,
+ ["containerEl"]);
+ } catch (e) {
+ // This call might fail if called asynchrously after the toolbox is finished
+ // closing.
+ return;
+ }
+ }
+
+ this.store.dispatch(updateFlexbox({
+ actorID: flexboxFront.actorID,
+ highlighted: nodeFront == this.highlighters.flexboxHighlighterShown,
+ nodeFront,
+ }));
}
}
module.exports = FlexboxInspector;new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/reducers/flexbox.js
@@ -0,0 +1,46 @@
+/* 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 {
+ CLEAR_FLEXBOX,
+ UPDATE_FLEXBOX,
+ UPDATE_FLEXBOX_HIGHLIGHTED,
+} = require("../actions/index");
+
+const INITIAL_FLEXBOX = {
+ // The actor ID of the flex container.
+ actorID: null,
+ // Whether or not the flexbox highlighter is highlighting the flex container.
+ highlighted: false,
+ // The NodeFront of the flex container.
+ nodeFront: null,
+};
+
+let reducers = {
+
+ [CLEAR_FLEXBOX](flexbox, _) {
+ return INITIAL_FLEXBOX;
+ },
+
+ [UPDATE_FLEXBOX](_, { flexbox }) {
+ return flexbox;
+ },
+
+ [UPDATE_FLEXBOX_HIGHLIGHTED](flexbox, { highlighted }) {
+ return Object.assign({}, flexbox, {
+ highlighted,
+ });
+ },
+
+};
+
+module.exports = function (flexbox = INITIAL_FLEXBOX, action) {
+ let reducer = reducers[action.type];
+ if (!reducer) {
+ return flexbox;
+ }
+ return reducer(flexbox, action);
+};deleted file mode 100644
--- a/devtools/client/inspector/flexbox/reducers/flexboxes.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* 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 INITIAL_FLEXBOXES = [];
-
-let reducers = {
-
-};
-
-module.exports = function (flexboxes = INITIAL_FLEXBOXES, action) {
- let reducer = reducers[action.type];
- if (!reducer) {
- return flexboxes;
- }
- return reducer(flexboxes, action);
-};--- a/devtools/client/inspector/flexbox/reducers/index.js
+++ b/devtools/client/inspector/flexbox/reducers/index.js
@@ -1,7 +1,7 @@
/* 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";
-exports.flexboxes = require("./flexboxes");
+exports.flexbox = require("./flexbox");--- a/devtools/client/inspector/flexbox/reducers/moz.build
+++ b/devtools/client/inspector/flexbox/reducers/moz.build
@@ -1,10 +1,10 @@
# -*- 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(
- 'flexboxes.js',
+ 'flexbox.js',
'index.js',
)--- a/devtools/client/inspector/flexbox/types.js
+++ b/devtools/client/inspector/flexbox/types.js
@@ -2,14 +2,19 @@
* 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 PropTypes = require("devtools/client/shared/vendor/react-prop-types");
exports.flexbox = {
- // The id of the flexbox container.
- id: PropTypes.number,
+
+ // The actor ID of the flex container.
+ actorID: PropTypes.number,
- // The node front of the flexbox container.
+ // Whether or not the flexbox highlighter is highlighting the flex container.
+ highlighted: PropTypes.bool,
+
+ // The NodeFront of the flex container.
nodeFront: PropTypes.object,
+
};--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -2,23 +2,23 @@
* 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 { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
const GridDisplaySettings = createFactory(require("./GridDisplaySettings"));
const GridList = createFactory(require("./GridList"));
const GridOutline = createFactory(require("./GridOutline"));
const Types = require("../types");
-const { getStr } = require("../utils/l10n");
class Grid extends PureComponent {
static get propTypes() {
return {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
setSelectedNode: PropTypes.func.isRequired,--- a/devtools/client/inspector/grids/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -2,19 +2,19 @@
* 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 { PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
const Types = require("../types");
-const { getStr } = require("../utils/l10n");
class GridDisplaySettings extends PureComponent {
static get propTypes() {
return {
highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
onToggleShowGridAreas: PropTypes.func.isRequired,
onToggleShowGridLineNumbers: PropTypes.func.isRequired,
onToggleShowInfiniteLines: PropTypes.func.isRequired,--- a/devtools/client/inspector/grids/components/GridList.js
+++ b/devtools/client/inspector/grids/components/GridList.js
@@ -2,21 +2,21 @@
* 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 { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
const GridItem = createFactory(require("./GridItem"));
const Types = require("../types");
-const { getStr } = require("../utils/l10n");
class GridList extends PureComponent {
static get propTypes() {
return {
getSwatchColorPickerTooltip: PropTypes.func.isRequired,
grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
setSelectedNode: PropTypes.func.isRequired,
onHideBoxModelHighlighter: PropTypes.func.isRequired,--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -3,19 +3,19 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const Services = require("Services");
const { PureComponent } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
const Types = require("../types");
-const { getStr } = require("../utils/l10n");
// The delay prior to executing the grid cell highlighting.
const GRID_HIGHLIGHTING_DEBOUNCE = 50;
// Prefs for the max number of rows/cols a grid container can have for
// the outline to display.
const GRID_OUTLINE_MAX_ROWS_PREF =
Services.prefs.getIntPref("devtools.gridinspector.gridOutlineMaxRows");deleted file mode 100644
--- a/devtools/client/inspector/grids/utils/l10n.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/* 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 { LocalizationHelper } = require("devtools/shared/l10n");
-const L10N = new LocalizationHelper("devtools/client/locales/layout.properties");
-
-module.exports = {
- getStr: (...args) => L10N.getStr(...args),
- getFormatStr: (...args) => L10N.getFormatStr(...args),
- getFormatStrWithNumbers: (...args) => L10N.getFormatStrWithNumbers(...args),
- numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
-};--- a/devtools/client/inspector/grids/utils/moz.build
+++ b/devtools/client/inspector/grids/utils/moz.build
@@ -1,10 +1,9 @@
# -*- 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(
- 'l10n.js',
'utils.js',
)--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -37,16 +37,22 @@ class LayoutView {
let {
onHideBoxModelHighlighter,
onShowBoxModelEditor,
onShowBoxModelHighlighter,
onToggleGeometryEditor,
} = this.inspector.getPanel("boxmodel").getComponentProps();
+ this.flexboxInspector = new FlexboxInspector(this.inspector,
+ this.inspector.panelWin);
+ let {
+ onToggleFlexboxHighlighter,
+ } = this.flexboxInspector.getComponentProps();
+
this.gridInspector = new GridInspector(this.inspector, this.inspector.panelWin);
let {
getSwatchColorPickerTooltip,
onSetGridOverlayColor,
onShowGridAreaHighlight,
onShowGridCellHighlight,
onShowGridLineNamesHighlight,
onToggleGridHighlighter,
@@ -66,16 +72,17 @@ class LayoutView {
onHideBoxModelHighlighter,
onSetGridOverlayColor,
onShowBoxModelEditor,
onShowBoxModelHighlighter,
onShowBoxModelHighlighterForNode,
onShowGridAreaHighlight,
onShowGridCellHighlight,
onShowGridLineNamesHighlight,
+ onToggleFlexboxHighlighter,
onToggleGeometryEditor,
onToggleGridHighlighter,
onToggleShowGridAreas,
onToggleShowGridLineNumbers,
onToggleShowInfiniteLines,
});
let provider = createElement(Provider, {
@@ -88,16 +95,17 @@ class LayoutView {
// Expose the provider to let inspector.js use it in setupSidebar.
this.provider = provider;
}
/**
* Destruction function called when the inspector is destroyed. Cleans up references.
*/
destroy() {
+ this.flexboxInspector.destroy();
this.gridInspector.destroy();
this.document = null;
this.inspector = null;
this.store = null;
}
}
--- a/devtools/client/inspector/layout/moz.build
+++ b/devtools/client/inspector/layout/moz.build
@@ -1,13 +1,14 @@
# -*- 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 += [
'components',
+ 'utils',
]
DevToolsModules(
'layout.js',
)new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/l10n.js
@@ -0,0 +1,15 @@
+/* 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 { LocalizationHelper } = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/client/locales/layout.properties");
+
+module.exports = {
+ getStr: (...args) => L10N.getStr(...args),
+ getFormatStr: (...args) => L10N.getFormatStr(...args),
+ getFormatStrWithNumbers: (...args) => L10N.getFormatStrWithNumbers(...args),
+ numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
+};new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/utils/moz.build
@@ -0,0 +1,9 @@
+# -*- 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(
+ 'l10n.js',
+)
--- a/devtools/client/inspector/reducers.js
+++ b/devtools/client/inspector/reducers.js
@@ -7,13 +7,13 @@
// This file exposes the Redux reducers of the box model, grid and grid highlighter
// settings.
exports.animations = require("devtools/client/inspector/animation/reducers/animations");
exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model");
exports.changes = require("devtools/client/inspector/changes/reducers/changes");
exports.events = require("devtools/client/inspector/events/reducers/events");
exports.extensionsSidebar = require("devtools/client/inspector/extensions/reducers/sidebar");
-exports.flexboxes = require("devtools/client/inspector/flexbox/reducers/flexboxes");
+exports.flexbox = require("devtools/client/inspector/flexbox/reducers/flexbox");
exports.fontOptions = require("devtools/client/inspector/fonts/reducers/font-options");
exports.fonts = require("devtools/client/inspector/fonts/reducers/fonts");
exports.grids = require("devtools/client/inspector/grids/reducers/grids");
exports.highlighterSettings = require("devtools/client/inspector/grids/reducers/highlighter-settings");--- a/devtools/client/locales/en-US/layout.properties
+++ b/devtools/client/locales/en-US/layout.properties
@@ -3,16 +3,24 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
# LOCALIZATION NOTE This file contains the Layout Inspector strings.
# The Layout Inspector is a panel accessible in the Inspector sidebar.
# LOCALIZATION NOTE (flexbox.header): The accordion header for the Flexbox pane.
flexbox.header=Flexbox
+# LOCALIZATION NOTE (flexbox.noFlexboxeOnThisPage): In the case where there are no CSS
+# flex containers to display.
+flexbox.noFlexboxeOnThisPage=Select a Flex container or item to continue.
+
+# LOCALIZATION NOTE (flexbox.overlayFlexbox): Header for the list of flex container
+# elements if only one item can be selected.
+flexbox.overlayFlexbox=Overlay Flexbox
+
# LOCALIZATION NOTE (layout.cannotShowGridOutline, layout.cannotSHowGridOutline.title):
# In the case where the grid outline cannot be effectively displayed.
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.displayAreaNames): Label of the display area names setting
# option in the CSS Grid pane.
layout.displayAreaNames=Display area names
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -8,76 +8,84 @@
overflow: auto;
min-width: 200px;
}
/**
* Common styles for shared components
*/
+.flexbox-container,
.grid-container {
display: flex;
flex-direction: column;
flex: 1 auto;
align-items: center;
min-width: 140px;
}
+.grid-container:first-child {
+ margin-bottom: 10px;
+}
+
+.flexbox-container > span,
.grid-container > span {
font-weight: 600;
margin-bottom: 5px;
pointer-events: none;
}
+.flexbox-container > ul,
.grid-container > ul {
list-style: none;
margin: 0;
padding: 0;
}
+.flexbox-container li,
.grid-container li {
display: flex;
align-items: center;
padding: 4px 0;
}
+.flexbox-container input
.grid-container input {
margin: 0 5px;
}
+.flexbox-container label,
.grid-container label {
display: flex;
align-items: center;
}
/**
* Grid Container
*/
+#layout-flexbox-container,
#layout-grid-container {
display: flex;
flex-direction: column;
margin: 5px;
}
/**
* Grid Content
*/
+.flexbox-content,
.grid-content {
display: flex;
flex-wrap: wrap;
flex: 1;
margin: 5px 0;
}
-.grid-container:first-child {
- margin-bottom: 10px;
-}
-
/**
* Grid Outline
*/
.grid-outline-container {
margin: 5px 0;
}
--- a/devtools/server/actors/layout.js
+++ b/devtools/server/actors/layout.js
@@ -1,14 +1,15 @@
/* 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 { Cu } = require("chrome");
const { Actor, ActorClassWithSpec } = require("devtools/shared/protocol");
const { flexboxSpec, gridSpec, layoutSpec } = require("devtools/shared/specs/layout");
const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants");
const { getStringifiableFragments } =
require("devtools/server/actors/utils/css-grid-utils");
loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
loader.lazyRequireGetter(this, "CssLogic", "devtools/server/css-logic", true);
@@ -25,17 +26,17 @@ loader.lazyRequireGetter(this, "CssLogic
* The |Grid| actor provides the grid fragment information to inspect the grid container.
*/
const FlexboxActor = ActorClassWithSpec(flexboxSpec, {
/**
* @param {LayoutActor} layoutActor
* The LayoutActor instance.
* @param {DOMNode} containerEl
- * The flexbox container element.
+ * The flex container element.
*/
initialize(layoutActor, containerEl) {
Actor.prototype.initialize.call(this, layoutActor.conn);
this.containerEl = containerEl;
this.walker = layoutActor.walker;
},
@@ -131,87 +132,83 @@ const LayoutActor = ActorClassWithSpec(l
destroy() {
Actor.prototype.destroy.call(this);
this.tabActor = null;
this.walker = null;
},
/**
- * Returns an array of FlexboxActor objects for all the flexbox containers found by
- * iterating below the given rootNode.
+ * Returns the flex container found by iterating on the given selected node. The current
+ * node can be a flex container or flex item. If it is a flex item, returns the parent
+ * flex container. Otherwise, return null if the current or parent node is not a flex
+ * container.
*
- * @param {Node|NodeActor} rootNode
- * The root node to start iterating at.
- * @return {Array} An array of FlexboxActor objects.
+ * @param {Node|NodeActor} node
+ * The node to start iterating at.
+ * @return {FlexboxActor|Null} The FlexboxActor of the flex container of the give node.
+ * Otherwise, returns null.
*/
- getFlexbox(rootNode) {
- let flexboxes = [];
-
- if (!rootNode) {
- return flexboxes;
+ getCurrentFlexbox(node) {
+ if (isNodeDead(node)) {
+ return null;
}
- let treeWalker = this.walker.getDocumentWalker(rootNode,
+ // Given node can either be a Node or a NodeActor.
+ if (node.rawNode) {
+ node = node.rawNode;
+ }
+
+ let treeWalker = this.walker.getDocumentWalker(node,
nodeFilterConstants.SHOW_ELEMENT);
+ let currentNode = treeWalker.currentNode;
+ let displayType = this.walker.getNode(currentNode).displayType;
- while (treeWalker.nextNode()) {
- let currentNode = treeWalker.currentNode;
- let computedStyle = CssLogic.getComputedStyle(currentNode);
+ if (!displayType) {
+ return null;
+ }
- if (!computedStyle) {
- continue;
+ // Check if the current node is a flex container.
+ if (displayType == "inline-flex" || displayType == "flex") {
+ return new FlexboxActor(this, treeWalker.currentNode);
+ }
+
+ // Otherwise, check if this is a flex item or the parent node is a flex container.
+ while ((currentNode = treeWalker.parentNode())) {
+ if (!currentNode) {
+ break;
}
- if (computedStyle.display == "inline-flex" || computedStyle.display == "flex") {
- let flexboxActor = new FlexboxActor(this, currentNode);
- flexboxes.push(flexboxActor);
+ displayType = this.walker.getNode(currentNode).displayType;
+
+ switch (displayType) {
+ case "inline-flex":
+ case "flex":
+ return new FlexboxActor(this, currentNode);
+ case "contents":
+ // Continue walking up the tree since the parent node is a content element.
+ continue;
}
+
+ break;
}
- return flexboxes;
- },
-
- /**
- * Returns an array of FlexboxActor objects for all existing flexbox containers found by
- * iterating below the given rootNode and optionally including nested frames.
- *
- * @param {NodeActor} rootNode
- * @param {Boolean} traverseFrames
- * Whether or not we should iterate through nested frames.
- * @return {Array} An array of FlexboxActor objects.
- */
- getAllFlexbox(rootNode, traverseFrames) {
- let flexboxes = [];
-
- if (!rootNode) {
- return flexboxes;
- }
-
- if (!traverseFrames) {
- return this.getFlexbox(rootNode.rawNode);
- }
-
- for (let {document} of this.tabActor.windows) {
- flexboxes = [...flexboxes, ...this.getFlexbox(document.documentElement)];
- }
-
- return flexboxes;
+ return null;
},
/**
* Returns an array of GridActor objects for all the grid elements contained in the
* given root node.
*
* @param {Node|NodeActor} node
* The root node for grid elements
* @return {Array} An array of GridActor objects.
*/
getGrids(node) {
- if (!node) {
+ if (isNodeDead(node)) {
return [];
}
// Root node can either be a Node or a NodeActor.
if (node.rawNode) {
node = node.rawNode;
}
@@ -227,11 +224,15 @@ const LayoutActor = ActorClassWithSpec(l
for (let frame of frames) {
gridActors = gridActors.concat(this.getGrids(frame.contentDocument));
}
return gridActors;
},
});
+function isNodeDead(node) {
+ return !node || !node.rawNode || Cu.isDeadWrapper(node.rawNode);
+}
+
exports.FlexboxActor = FlexboxActor;
exports.GridActor = GridActor;
exports.LayoutActor = LayoutActor;--- a/devtools/shared/specs/index.js
+++ b/devtools/shared/specs/index.js
@@ -107,17 +107,17 @@ const Types = exports.__TypesForTests =
front: "devtools/shared/fronts/highlighters",
},
{
types: ["domnodelist", "domwalker", "inspector"],
spec: "devtools/shared/specs/inspector",
front: "devtools/shared/fronts/inspector",
},
{
- types: ["grid", "layout"],
+ types: ["flexbox", "grid", "layout"],
spec: "devtools/shared/specs/layout",
front: "devtools/shared/fronts/layout",
},
{
types: ["memory"],
spec: "devtools/shared/specs/memory",
front: "devtools/shared/fronts/memory",
},--- a/devtools/shared/specs/layout.js
+++ b/devtools/shared/specs/layout.js
@@ -17,23 +17,22 @@ const gridSpec = generateActorSpec({
methods: {},
});
const layoutSpec = generateActorSpec({
typeName: "layout",
methods: {
- getAllFlexbox: {
+ getCurrentFlexbox: {
request: {
- rootNode: Arg(0, "domnode"),
- traverseFrames: Arg(1, "nullable:boolean")
+ node: Arg(0, "domnode"),
},
response: {
- flexboxes: RetVal("array:flexbox")
+ flexbox: RetVal("nullable:flexbox")
}
},
getGrids: {
request: {
rootNode: Arg(0, "domnode")
},
response: {