1 files changed, 109 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelEditable.js b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
new file mode 100644
index 0000000000..c60a3da6be
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/components/BoxModelEditable.js
@@ -0,0 +1,109 @@
+/* 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.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 {
+  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);
+      }
+    );
+  }
+
+  onMouseOver(event) {
+    const { onShowRulePreviewTooltip, property } = this.props;
+
+    if (event.shiftKey && HIGHLIGHT_RULE_PREF) {
+      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;