Quelle ChangesView.js Sprache: JAVA

/* 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 {
  createFactory,
  createElement,
} = require("resource://devtools/client/shared/vendor/react.js");
const {
  Provider,
} = require("resource://devtools/client/shared/vendor/react-redux.js");

loader.lazyRequireGetter(
  this,
  "ChangesContextMenu",
  "resource://devtools/client/inspector/changes/ChangesContextMenu.js"
);
loader.lazyRequireGetter(
  this,
  "clipboardHelper",
  "resource://devtools/shared/platform/clipboard.js"
);

const changesReducer = require("resource://devtools/client/inspector/changes/reducers/changes.js");
const {
  getChangesStylesheet,
} = require("resource://devtools/client/inspector/changes/selectors/changes.js");
const {
  resetChanges,
  trackChange,
} = require("resource://devtools/client/inspector/changes/actions/changes.js");

const ChangesApp = createFactory(
  require("resource://devtools/client/inspector/changes/components/ChangesApp.js")
);

class ChangesView {
  constructor(inspector, window) {
    this.document = window.document;
    this.inspector = inspector;
    this.store = this.inspector.store;
    this.telemetry = this.inspector.telemetry;
    this.window = window;

    this.store.injectReducer("changes", changesReducer);

    this.onAddChange = this.onAddChange.bind(this);
    this.onContextMenu = this.onContextMenu.bind(this);
    this.onCopy = this.onCopy.bind(this);
    this.onCopyAllChanges = this.copyAllChanges.bind(this);
    this.onCopyDeclaration = this.copyDeclaration.bind(this);
    this.onCopyRule = this.copyRule.bind(this);
    this.onClearChanges = this.onClearChanges.bind(this);
    this.onSelectAll = this.onSelectAll.bind(this);
    this.onResourceAvailable = this.onResourceAvailable.bind(this);

    this.destroy = this.destroy.bind(this);

    this.init();
  }

  get contextMenu() {
    if (!this._contextMenu) {
      this._contextMenu = new ChangesContextMenu({
        onCopy: this.onCopy,
        onCopyAllChanges: this.onCopyAllChanges,
        onCopyDeclaration: this.onCopyDeclaration,
        onCopyRule: this.onCopyRule,
        onSelectAll: this.onSelectAll,
        toolboxDocument: this.inspector.toolbox.doc,
        window: this.window,
      });
    }

    return this._contextMenu;
  }

  get resourceCommand() {
    return this.inspector.toolbox.resourceCommand;
  }

  init() {
    const changesApp = ChangesApp({
      onContextMenu: this.onContextMenu,
      onCopyAllChanges: this.onCopyAllChanges,
      onCopyRule: this.onCopyRule,
    });

    // Expose the provider to let inspector.js use it in setupSidebar.
    this.provider = createElement(
      Provider,
      {
        id: "changesview",
        key: "changesview",
        store: this.store,
      },
      changesApp
    );

    this.watchResources();
  }

  async watchResources() {
    await this.resourceCommand.watchResources(
      [this.resourceCommand.TYPES.DOCUMENT_EVENT],
      {
        onAvailable: this.onResourceAvailable,
        // Ignore any DOCUMENT_EVENT resources that have occured in the past
        // and are cached by the resource command, otherwise the Changes panel will
        // react to them erroneously and interpret that the document is reloading *now*
        // which leads to clearing all stored changes.
        ignoreExistingResources: true,
      }
    );

    await this.resourceCommand.watchResources(
      [this.resourceCommand.TYPES.CSS_CHANGE],
      { onAvailable: this.onResourceAvailable }
    );
  }

  onResourceAvailable(resources) {
    for (const resource of resources) {
      if (resource.resourceType === this.resourceCommand.TYPES.CSS_CHANGE) {
        this.onAddChange(resource);
        continue;
      }

      if (resource.name === "dom-loading" && resource.targetFront.isTopLevel) {
        // will-navigate doesn't work when we navigate to a new process,
        // and for now, onTargetAvailable/onTargetDestroyed doesn't fire on navigation and
        // only when navigating to another process.
        // So we fallback on DOCUMENT_EVENTS to be notified when we navigate. When we
        // navigate within the same process as well as when we navigate to a new process.
        // (We would probably revisit that in bug 1632141)
        this.onClearChanges();
      }
    }
  }

  /**
   * Handler for the "Copy All Changes" button. Simple wrapper that just calls
   * |this.copyChanges()| with no filters in order to trigger default operation.
   */
  copyAllChanges() {
    this.copyChanges();
  }

  /**
   * Handler for the "Copy Changes" option from the context menu.
   * Builds a CSS text with the aggregated changes and copies it to the clipboard.
   *
   * Optional rule and source ids can be used to filter the scope of the operation:
   * - if both a rule id and source id are provided, copy only the changes to the
   * matching rule within the matching source.
   * - if only a source id is provided, copy the changes to all rules within the
   * matching source.
   * - if neither rule id nor source id are provided, copy the changes too all rules
   * within all sources.
   *
   * @param {String|null} ruleId
   *        Optional rule id.
   * @param {String|null} sourceId
   *        Optional source id.
   */
  copyChanges(ruleId, sourceId) {
    const state = this.store.getState().changes || {};
    const filter = {};
    if (ruleId) {
      filter.ruleIds = [ruleId];
    }
    if (sourceId) {
      filter.sourceIds = [sourceId];
    }

    const text = getChangesStylesheet(state, filter);
    clipboardHelper.copyString(text);
  }

  /**
   * Handler for the "Copy Declaration" option from the context menu.
   * Builds a CSS declaration string with the property name and value, and copies it
   * to the clipboard. The declaration is commented out if it is marked as removed.
   *
   * @param {DOMElement} element
   *        Host element of a CSS declaration rendered the Changes panel.
   */
  copyDeclaration(element) {
    const name = element.querySelector(
      ".changes__declaration-name"
    ).textContent;
    const value = element.querySelector(
      ".changes__declaration-value"
    ).textContent;
    const isRemoved = element.classList.contains("diff-remove");
    const text = isRemoved ? `/* ${name}: ${value}; */` : `${name}: ${value};`;
    clipboardHelper.copyString(text);
  }

  /**
   * Handler for the "Copy Rule" option from the context menu and "Copy Rule" button.
   * Gets the full content of the target CSS rule (including any changes applied)
   * and copies it to the clipboard.
   *
   * @param {String} ruleId
   *        Rule id of the target CSS rule.
   */
  async copyRule(ruleId) {
    const inspectorFronts = await this.inspector.getAllInspectorFronts();

    for (const inspectorFront of inspectorFronts) {
      const rule = await inspectorFront.pageStyle.getRule(ruleId);

      if (rule) {
        const text = await rule.getRuleText();
        clipboardHelper.copyString(text);
        break;
      }
    }
  }

  /**
   * Handler for the "Copy" option from the context menu.
   * Copies the current text selection to the clipboard.
   */
  onCopy() {
    clipboardHelper.copyString(this.window.getSelection().toString());
  }

  onAddChange(change) {
    // Turn data into a suitable change to send to the store.
    this.store.dispatch(trackChange(change));
  }

  onClearChanges() {
    this.store.dispatch(resetChanges());
  }

  /**
   * Select all text.
   */
  onSelectAll() {
    const selection = this.window.getSelection();
    selection.selectAllChildren(
      this.document.getElementById("sidebar-panel-changes")
    );
  }

  /**
   * Event handler for the "contextmenu" event fired when the context menu is requested.
   * @param {Event} e
   */
  onContextMenu(e) {
    this.contextMenu.show(e);
  }

  /**
   * Destruction function called when the inspector is destroyed.
   */
  destroy() {
    this.resourceCommand.unwatchResources(
      [
        this.resourceCommand.TYPES.CSS_CHANGE,
        this.resourceCommand.TYPES.DOCUMENT_EVENT,
      ],
      { onAvailable: this.onResourceAvailable }
    );

    this.store.dispatch(resetChanges());

    this.document = null;
    this.inspector = null;
    this.store = null;

    if (this._contextMenu) {
      this._contextMenu.destroy();
      this._contextMenu = null;
    }
  }
}

module.exports = ChangesView;

quality96%

¤ Dauer der Verarbeitung: 0.13 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung ist noch experimentell.