Nicolas Chevobbe
2e6b273027
The button is added in the matched selectors sections that is displayed when clicking the expand button next to a property name in the computed panel. CssRuleView#highlightProperty is updated so we can highlight properties that are overridden, as well as focus the property value instead of the property name. The function had to be split into smaller functions to avoid triggering the eslint complexity rule. CssRuleView#_highlightElementInRule is also updated so we both highlight and focus item, as we might jump to a shorthand property, but want to highlight the longhand in the expanded computed list below the declaration. Differential Revision: https://phabricator.services.mozilla.com/D260308
110 lines
3.1 KiB
JavaScript
110 lines
3.1 KiB
JavaScript
/* 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("resource://devtools/client/shared/vendor/react.mjs");
|
|
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
|
|
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
|
|
const {
|
|
editableItem,
|
|
} = require("resource://devtools/client/shared/inplace-editor.js");
|
|
|
|
const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
|
|
const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
|
|
const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
|
|
|
|
const LONG_TEXT_ROTATE_LIMIT = 3;
|
|
const HIGHLIGHT_RULE_PREF = Services.prefs.getBoolPref(
|
|
"devtools.layout.boxmodel.highlightProperty"
|
|
);
|
|
|
|
class BoxModelEditable extends PureComponent {
|
|
static get propTypes() {
|
|
return {
|
|
box: PropTypes.string.isRequired,
|
|
direction: PropTypes.string,
|
|
focusable: PropTypes.bool.isRequired,
|
|
level: PropTypes.string,
|
|
onShowBoxModelEditor: PropTypes.func.isRequired,
|
|
onShowRulePreviewTooltip: PropTypes.func.isRequired,
|
|
property: PropTypes.string.isRequired,
|
|
textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
.isRequired,
|
|
};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.onMouseOver = this.onMouseOver.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { property, onShowBoxModelEditor } = this.props;
|
|
|
|
editableItem(
|
|
{
|
|
element: this.boxModelEditable,
|
|
},
|
|
(element, event) => {
|
|
onShowBoxModelEditor(element, event, property);
|
|
}
|
|
);
|
|
}
|
|
|
|
async onMouseOver(event) {
|
|
const { onShowRulePreviewTooltip, property } = this.props;
|
|
|
|
if (event.shiftKey && HIGHLIGHT_RULE_PREF) {
|
|
await onShowRulePreviewTooltip(event.target, property);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { box, direction, focusable, level, property, textContent } =
|
|
this.props;
|
|
|
|
const rotate =
|
|
direction &&
|
|
(direction == "left" || direction == "right") &&
|
|
box !== "position" &&
|
|
textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
|
|
|
|
return dom.p(
|
|
{
|
|
className: `boxmodel-${box}
|
|
${
|
|
direction
|
|
? " boxmodel-" + direction
|
|
: "boxmodel-" + property
|
|
}
|
|
${rotate ? " boxmodel-rotate" : ""}`,
|
|
id: property + "-id",
|
|
},
|
|
dom.span(
|
|
{
|
|
className: "boxmodel-editable",
|
|
"aria-label": SHARED_L10N.getFormatStr(
|
|
"boxModelEditable.accessibleLabel",
|
|
property,
|
|
textContent
|
|
),
|
|
"data-box": box,
|
|
tabIndex: box === level && focusable ? 0 : -1,
|
|
title: property,
|
|
onMouseOver: this.onMouseOver,
|
|
ref: span => {
|
|
this.boxModelEditable = span;
|
|
},
|
|
},
|
|
textContent
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = BoxModelEditable;
|