tor-browser

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

layout.js (3706B)

      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  createFactory,
      9  createElement,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const {
     12  Provider,
     13 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     14 const FlexboxInspector = require("resource://devtools/client/inspector/flexbox/flexbox.js");
     15 const GridInspector = require("resource://devtools/client/inspector/grids/grid-inspector.js");
     16 
     17 const LayoutApp = createFactory(
     18  require("resource://devtools/client/inspector/layout/components/LayoutApp.js")
     19 );
     20 
     21 const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
     22 const INSPECTOR_L10N = new LocalizationHelper(
     23  "devtools/client/locales/inspector.properties"
     24 );
     25 
     26 loader.lazyRequireGetter(
     27  this,
     28  "SwatchColorPickerTooltip",
     29  "resource://devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js"
     30 );
     31 
     32 class LayoutView {
     33  constructor(inspector, window) {
     34    this.document = window.document;
     35    this.inspector = inspector;
     36    this.store = inspector.store;
     37 
     38    this.init();
     39  }
     40 
     41  init() {
     42    if (!this.inspector) {
     43      return;
     44    }
     45 
     46    const { setSelectedNode } = this.inspector.getCommonComponentProps();
     47 
     48    const {
     49      onShowBoxModelEditor,
     50      onShowRulePreviewTooltip,
     51      onToggleGeometryEditor,
     52    } = this.inspector.getPanel("boxmodel").getComponentProps();
     53 
     54    this.flexboxInspector = new FlexboxInspector(
     55      this.inspector,
     56      this.inspector.panelWin
     57    );
     58    const { onSetFlexboxOverlayColor } =
     59      this.flexboxInspector.getComponentProps();
     60 
     61    this.gridInspector = new GridInspector(
     62      this.inspector,
     63      this.inspector.panelWin
     64    );
     65    const {
     66      onSetGridOverlayColor,
     67      onToggleGridHighlighter,
     68      onToggleShowGridAreas,
     69      onToggleShowGridLineNumbers,
     70      onToggleShowInfiniteLines,
     71    } = this.gridInspector.getComponentProps();
     72 
     73    const layoutApp = LayoutApp({
     74      getSwatchColorPickerTooltip: () => this.swatchColorPickerTooltip,
     75      onSetFlexboxOverlayColor,
     76      onSetGridOverlayColor,
     77      onShowBoxModelEditor,
     78      onShowRulePreviewTooltip,
     79      onToggleGeometryEditor,
     80      onToggleGridHighlighter,
     81      onToggleShowGridAreas,
     82      onToggleShowGridLineNumbers,
     83      onToggleShowInfiniteLines,
     84      setSelectedNode,
     85      /**
     86       * Shows the box model properties under the box model if true, otherwise, hidden by
     87       * default.
     88       */
     89      showBoxModelProperties: true,
     90    });
     91 
     92    const provider = createElement(
     93      Provider,
     94      {
     95        id: "layoutview",
     96        key: "layoutview",
     97        store: this.store,
     98        title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle2"),
     99      },
    100      layoutApp
    101    );
    102 
    103    // Expose the provider to let inspector.js use it in setupSidebar.
    104    this.provider = provider;
    105  }
    106 
    107  /**
    108   * Destruction function called when the inspector is destroyed. Cleans up references.
    109   */
    110  destroy() {
    111    if (this._swatchColorPickerTooltip) {
    112      this._swatchColorPickerTooltip.destroy();
    113      this._swatchColorPickerTooltip = null;
    114    }
    115 
    116    this.flexboxInspector.destroy();
    117    this.gridInspector.destroy();
    118 
    119    this.document = null;
    120    this.inspector = null;
    121    this.store = null;
    122  }
    123 
    124  get swatchColorPickerTooltip() {
    125    if (!this._swatchColorPickerTooltip) {
    126      this._swatchColorPickerTooltip = new SwatchColorPickerTooltip(
    127        this.inspector.toolbox.doc,
    128        this.inspector
    129      );
    130    }
    131 
    132    return this._swatchColorPickerTooltip;
    133  }
    134 }
    135 
    136 module.exports = LayoutView;