diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/grids/components/GridItem.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/inspector/grids/components/GridItem.js')
-rw-r--r-- | devtools/client/inspector/grids/components/GridItem.js | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/components/GridItem.js b/devtools/client/inspector/grids/components/GridItem.js new file mode 100644 index 0000000000..fd2694e27a --- /dev/null +++ b/devtools/client/inspector/grids/components/GridItem.js @@ -0,0 +1,178 @@ +/* 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 { + createElement, + createRef, + Fragment, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + getFormatStr, + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); + +loader.lazyGetter(this, "Rep", function () { + return require("resource://devtools/client/shared/components/reps/index.js") + .REPS.Rep; +}); +loader.lazyGetter(this, "MODE", function () { + return require("resource://devtools/client/shared/components/reps/index.js") + .MODE; +}); + +loader.lazyRequireGetter( + this, + "translateNodeFrontToGrip", + "resource://devtools/client/inspector/shared/utils.js", + true +); + +const Types = require("resource://devtools/client/inspector/grids/types.js"); + +const { + highlightNode, + unhighlightNode, +} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js"); + +class GridItem extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + getSwatchColorPickerTooltip: PropTypes.func.isRequired, + grid: PropTypes.shape(Types.grid).isRequired, + grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + onSetGridOverlayColor: PropTypes.func.isRequired, + onToggleGridHighlighter: PropTypes.func.isRequired, + setSelectedNode: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + + this.swatchEl = createRef(); + + this.onGridCheckboxClick = this.onGridCheckboxClick.bind(this); + this.onGridInspectIconClick = this.onGridInspectIconClick.bind(this); + this.setGridColor = this.setGridColor.bind(this); + } + + componentDidMount() { + const tooltip = this.props.getSwatchColorPickerTooltip(); + + let previousColor; + tooltip.addSwatch(this.swatchEl.current, { + onCommit: this.setGridColor, + onPreview: this.setGridColor, + onRevert: () => { + this.props.onSetGridOverlayColor( + this.props.grid.nodeFront, + previousColor + ); + }, + onShow: () => { + previousColor = this.props.grid.color; + }, + }); + } + + componentWillUnmount() { + const tooltip = this.props.getSwatchColorPickerTooltip(); + tooltip.removeSwatch(this.swatchEl.current); + } + + setGridColor() { + const color = this.swatchEl.current.dataset.color; + this.props.onSetGridOverlayColor(this.props.grid.nodeFront, color); + } + + onGridCheckboxClick() { + const { grid, onToggleGridHighlighter } = this.props; + onToggleGridHighlighter(grid.nodeFront); + } + + onGridInspectIconClick(nodeFront) { + const { setSelectedNode } = this.props; + setSelectedNode(nodeFront, { reason: "layout-panel" }); + nodeFront.scrollIntoView().catch(e => console.error(e)); + } + + renderSubgrids() { + const { grid, grids } = this.props; + + if (!grid.subgrids.length) { + return null; + } + + const subgrids = grids.filter(g => grid.subgrids.includes(g.id)); + + return dom.ul( + {}, + subgrids.map(g => { + return createElement(GridItem, { + key: g.id, + dispatch: this.props.dispatch, + getSwatchColorPickerTooltip: this.props.getSwatchColorPickerTooltip, + grid: g, + grids, + onSetGridOverlayColor: this.props.onSetGridOverlayColor, + onToggleGridHighlighter: this.props.onToggleGridHighlighter, + setSelectedNode: this.props.setSelectedNode, + }); + }) + ); + } + + render() { + const { dispatch, grid } = this.props; + + return createElement( + Fragment, + null, + dom.li( + {}, + dom.label( + {}, + dom.input({ + checked: grid.highlighted, + disabled: grid.disabled, + type: "checkbox", + value: grid.id, + onChange: this.onGridCheckboxClick, + title: getStr("layout.toggleGridHighlighter"), + }), + Rep({ + defaultRep: Rep.ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(grid.nodeFront), + onDOMNodeMouseOut: () => dispatch(unhighlightNode()), + onDOMNodeMouseOver: () => dispatch(highlightNode(grid.nodeFront)), + onInspectIconClick: (_, e) => { + // Stoping click propagation to avoid firing onGridCheckboxClick() + e.stopPropagation(); + this.onGridInspectIconClick(grid.nodeFront); + }, + }) + ), + dom.button({ + className: "layout-color-swatch", + "data-color": grid.color, + ref: this.swatchEl, + style: { + backgroundColor: grid.color, + }, + title: getFormatStr("layout.colorSwatch.tooltip", grid.color), + }) + ), + this.renderSubgrids() + ); + } +} + +module.exports = GridItem; |