tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

BoxModelEditable.js (3193B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const {
      8  PureComponent,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 const {
     13  editableItem,
     14 } = require("resource://devtools/client/shared/inplace-editor.js");
     15 
     16 const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
     17 const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
     18 const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
     19 
     20 const LONG_TEXT_ROTATE_LIMIT = 3;
     21 const HIGHLIGHT_RULE_PREF = Services.prefs.getBoolPref(
     22  "devtools.layout.boxmodel.highlightProperty"
     23 );
     24 
     25 class BoxModelEditable extends PureComponent {
     26  static get propTypes() {
     27    return {
     28      box: PropTypes.string.isRequired,
     29      direction: PropTypes.string,
     30      focusable: PropTypes.bool.isRequired,
     31      level: PropTypes.string,
     32      onShowBoxModelEditor: PropTypes.func.isRequired,
     33      onShowRulePreviewTooltip: PropTypes.func.isRequired,
     34      property: PropTypes.string.isRequired,
     35      textContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     36        .isRequired,
     37    };
     38  }
     39 
     40  constructor(props) {
     41    super(props);
     42    this.onMouseOver = this.onMouseOver.bind(this);
     43  }
     44 
     45  componentDidMount() {
     46    const { property, onShowBoxModelEditor } = this.props;
     47 
     48    editableItem(
     49      {
     50        element: this.boxModelEditable,
     51      },
     52      (element, event) => {
     53        onShowBoxModelEditor(element, event, property);
     54      }
     55    );
     56  }
     57 
     58  onMouseOver(event) {
     59    const { onShowRulePreviewTooltip, property } = this.props;
     60 
     61    if (event.shiftKey && HIGHLIGHT_RULE_PREF) {
     62      onShowRulePreviewTooltip(event.target, property);
     63    }
     64  }
     65 
     66  render() {
     67    const { box, direction, focusable, level, property, textContent } =
     68      this.props;
     69 
     70    const rotate =
     71      direction &&
     72      (direction == "left" || direction == "right") &&
     73      box !== "position" &&
     74      textContent.toString().length > LONG_TEXT_ROTATE_LIMIT;
     75 
     76    return dom.p(
     77      {
     78        className: `boxmodel-${box}
     79                      ${
     80                        direction
     81                          ? " boxmodel-" + direction
     82                          : "boxmodel-" + property
     83                      }
     84                      ${rotate ? " boxmodel-rotate" : ""}`,
     85        id: property + "-id",
     86      },
     87      dom.span(
     88        {
     89          className: "boxmodel-editable",
     90          "aria-label": SHARED_L10N.getFormatStr(
     91            "boxModelEditable.accessibleLabel",
     92            property,
     93            textContent
     94          ),
     95          "data-box": box,
     96          tabIndex: box === level && focusable ? 0 : -1,
     97          title: property,
     98          onMouseOver: this.onMouseOver,
     99          ref: span => {
    100            this.boxModelEditable = span;
    101          },
    102        },
    103        textContent
    104      )
    105    );
    106  }
    107 }
    108 
    109 module.exports = BoxModelEditable;