tor-browser

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

PageWireframes.sys.mjs (3820B)

      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 file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 const lazy = {};
      6 ChromeUtils.defineESModuleGetters(lazy, {
      7  SessionStore: "resource:///modules/sessionstore/SessionStore.sys.mjs",
      8 });
      9 
     10 export const PageWireframes = {
     11  /**
     12   * Returns the wireframe object for the current index of the session history
     13   * for the given tab. The wireframe will only exist with browser.history.collectWireframes.
     14   *
     15   * @param {object} tab
     16   * @return {object} wireframe
     17   *   See dom/webidl/Document.webidl for the Wireframe dictionary
     18   */
     19  getWireframeState(tab) {
     20    if (!tab) {
     21      return null;
     22    }
     23    const sessionHistory = lazy.SessionStore.getSessionHistory(tab);
     24    return sessionHistory?.entries[sessionHistory.index]?.wireframe;
     25  },
     26 
     27  /**
     28   * Returns an SVG preview for the wireframe at the current index of the session history
     29   * for the given tab. The wireframe will only exist with browser.history.collectWireframes.
     30   *
     31   * @param {object} tab
     32   * @return {SVGElement}
     33   */
     34  getWireframeElementForTab(tab) {
     35    const wireframe = this.getWireframeState(tab);
     36    return wireframe && this.getWireframeElement(wireframe, tab.ownerDocument);
     37  },
     38 
     39  /**
     40   * Converts a color encoded as a uint32_t (Gecko's nscolor format)
     41   * to an rgb string.
     42   *
     43   * @param {number} nscolor
     44   *   An RGB color encoded in nscolor format.
     45   * @return {string}
     46   *   A string of the form "rgb(r, g, b)".
     47   */
     48  nscolorToRGB(nscolor) {
     49    let r = nscolor & 0xff;
     50    let g = (nscolor >> 8) & 0xff;
     51    let b = (nscolor >> 16) & 0xff;
     52    return `rgb(${r}, ${g}, ${b})`;
     53  },
     54 
     55  /**
     56   * Converts a color encoded as a uint32_t (Gecko's nscolor format)
     57   * to an rgb string.
     58   *
     59   * @param {object} wireframe
     60   *   See Bug 1731714 and dom/webidl/Document.webidl for the Wireframe dictionary
     61   * @param {Document} document
     62   *   A Document to crate SVG elements.
     63   * @return {SVGElement}
     64   *   The rendered wireframe
     65   */
     66  getWireframeElement(wireframe, document) {
     67    const SVG_NS = "http://www.w3.org/2000/svg";
     68    let svg = document.createElementNS(SVG_NS, "svg");
     69 
     70    // Currently guessing width & height from rects on the object, it would be better to
     71    // save these on the wireframe object itself.
     72    let width = wireframe.rects.reduce(
     73      (max, rect) => Math.max(max, rect.x + rect.width),
     74      0
     75    );
     76    let height = wireframe.rects.reduce(
     77      (max, rect) => Math.max(max, rect.y + rect.height),
     78      0
     79    );
     80 
     81    svg.setAttributeNS(null, "viewBox", `0 0 ${width} ${height}`);
     82    svg.style.backgroundColor = this.nscolorToRGB(wireframe.canvasBackground);
     83 
     84    const DEFAULT_FILL = "color-mix(in srgb, gray 20%, transparent)";
     85 
     86    for (let rectObj of wireframe.rects) {
     87      // For now we'll skip rects that have an unknown classification, since
     88      // it's not clear how we should treat them.
     89      if (rectObj.type == "unknown") {
     90        continue;
     91      }
     92 
     93      let rectEl = document.createElementNS(SVG_NS, "rect");
     94      rectEl.setAttribute("x", rectObj.x);
     95      rectEl.setAttribute("y", rectObj.y);
     96      rectEl.setAttribute("width", rectObj.width);
     97      rectEl.setAttribute("height", rectObj.height);
     98 
     99      let fill;
    100      switch (rectObj.type) {
    101        case "background": {
    102          fill = this.nscolorToRGB(rectObj.color);
    103          break;
    104        }
    105        case "image": {
    106          fill = rectObj.color
    107            ? this.nscolorToRGB(rectObj.color)
    108            : DEFAULT_FILL;
    109          break;
    110        }
    111        case "text": {
    112          fill = DEFAULT_FILL;
    113          break;
    114        }
    115      }
    116 
    117      rectEl.setAttribute("fill", fill);
    118 
    119      svg.appendChild(rectEl);
    120    }
    121    return svg;
    122  },
    123 };