<commit_before>// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @unrestricted
 */
CssOverview.CSSOverviewModel = class extends SDK.SDKModel {
  /**
   * @param {!SDK.Target} target
   */
  constructor(target) {
    super(target);

    this._runtimeAgent = target.runtimeAgent();
    this._cssAgent = target.cssAgent();
    this._domAgent = target.domAgent();
    this._domSnapshotAgent = target.domsnapshotAgent();
    this._overlayAgent = target.overlayAgent();
  }

  highlightNode(node) {
    const highlightConfig = {contentColor: Common.Color.PageHighlight.Content.toProtocolRGBA(), showInfo: true};

    this._overlayAgent.invoke_hideHighlight({});
    this._overlayAgent.invoke_highlightNode({backendNodeId: node, highlightConfig});
  }

  async getNodeStyleStats() {
    const backgroundColors = new Map();
    const textColors = new Map();
    const fillColors = new Map();
    const borderColors = new Map();
    const fontSizes = new Map();
    const fontWeights = new Map();
    const unusedRules = [];
    const snapshotConfig = {
      computedStyles: [
        'background-color',
        'color',
        'fill',
        'border-top-width',
        'border-top-color',
        'border-bottom-width',
        'border-bottom-color',
        'border-left-width',
        'border-left-color',
        'border-right-width',
        'border-right-color',
        'font-size',
        'font-weight',
        'position',
        'top',
        'right',
        'bottom',
        'left',
        'display',
        'width',
        'height'
      ]
    };

    const storeColor = (id, nodeId, target) => {
      if (id === -1) {
        return;
      }

      // Parse the color, discard transparent ones.
      const colorText = strings[id];
      const color = Common.Color.parse(colorText);
      if (!color || color.rgba()[3] === 0) {
        return;
      }

      // Format the color and use as the key.
      const colorFormatted =
          color.hasAlpha() ? color.asString(Common.Color.Format.HEXA) : color.asString(Common.Color.Format.HEX);

      // Get the existing set of nodes with the color, or create a new set.
      const colorValues = target.get(colorFormatted) || new Set();
      colorValues.add(nodeId);

      // Store.
      target.set(colorFormatted, colorValues);
    };

    const isSVGNode = nodeName => {
      const validNodes =
          ['altGlyph', 'circle', 'ellipse', 'path', 'polygon', 'polyline', 'rect', 'text', 'textPath', 'tref', 'tspan'];
      return validNodes.indexOf(nodeName) !== -1;
    };

    let elementCount = 0;
    const {documents, strings} = await this._domSnapshotAgent.invoke_captureSnapshot(snapshotConfig);
    for (const {nodes, layout} of documents) {
      // Track the number of elements in the documents.
      elementCount += layout.nodeIndex.length;

      for (let idx = 0; idx < layout.styles.length; idx++) {
        const styles = layout.styles[idx];
        const nodeIdx = layout.nodeIndex[idx];
        const nodeId = nodes.backendNodeId[nodeIdx];
        const nodeName = nodes.nodeName[nodeIdx];

        const [backgroundColorIdx, textColorIdx, fillIdx, borderTopWidthIdx, borderTopColorIdx, borderBottomWidthIdx, borderBottomColorIdx, borderLeftWidthIdx, borderLeftColorIdx, borderRightWidthIdx, borderRightColorIdx, fontSizeIdx, fontWeightIdx, positionIdx, topIdx, rightIdx, bottomIdx, leftIdx, displayIdx, widthIdx, heightIdx] = styles;

        storeColor(backgroundColorIdx, nodeId, backgroundColors);
        storeColor(textColorIdx, nodeId, textColors);

        if (isSVGNode(strings[nodeName])) {
          storeColor(fillIdx, nodeId, fillColors);
        }

        if (strings[borderTopWidthIdx] !== '0px') {
          storeColor(borderTopColorIdx, nodeId, borderColors);
        }

        if (strings[borderBottomWidthIdx] !== '0px') {
          storeColor(borderBottomColorIdx, nodeId, borderColors);
        }

        if (strings[borderLeftWidthIdx] !== '0px') {
          storeColor(borderLeftColorIdx, nodeId, borderColors);
        }

        if (strings[borderRightWidthIdx] !== '0px') {
          storeColor(borderRightColorIdx, nodeId, borderColors);
        }

        if (fontSizeIdx !== -1) {
          const fontSize = strings[fontSizeIdx];
          const fontSizeInstances = (fontSizes.get(fontSize) || 0) + 1;
          fontSizes.set(fontSize, fontSizeInstances);
        }

        if (fontWeightIdx !== -1) {
          const fontWeight = strings[fontWeightIdx];
          const fontWeightInstances = (fontWeights.get(fontWeight) || 0) + 1;
          fontWeights.set(fontWeight, fontWeightInstances);
        }

        CssOverview.CSSOverviewUnusedRules.checkForUnusedPositionValues(
            unusedRules, nodeId, strings, positionIdx, topIdx, leftIdx, rightIdx, bottomIdx);
        CssOverview.CSSOverviewUnusedRules.checkForUnusedWidthAndHeightValues(
            unusedRules, nodeId, strings, displayIdx, widthIdx, heightIdx);
      }
    }

    return {backgroundColors, textColors, fillColors, borderColors, fontSizes, fontWeights, unusedRules, elementCount};
  }

  getComputedStyleForNode(nodeId) {
    return this._cssAgent.getComputedStyleForNode(nodeId);
  }

  async getMediaQueries() {
    // Ignore media queries applied to stylesheets; instead only use declared media rules.
    const queries = await this._cssAgent.getMediaQueries();
    return queries.filter(query => query.source !== 'linkedSheet');
  }
<commit_msg>[CSS Overview] Ignore SVGs for unused width & height<commit_after>// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @unrestricted
 */
CssOverview.CSSOverviewModel = class extends SDK.SDKModel {
  /**
   * @param {!SDK.Target} target
   */
  constructor(target) {
    super(target);

    this._runtimeAgent = target.runtimeAgent();
    this._cssAgent = target.cssAgent();
    this._domAgent = target.domAgent();
    this._domSnapshotAgent = target.domsnapshotAgent();
    this._overlayAgent = target.overlayAgent();
  }

  highlightNode(node) {
    const highlightConfig = {contentColor: Common.Color.PageHighlight.Content.toProtocolRGBA(), showInfo: true};

    this._overlayAgent.invoke_hideHighlight({});
    this._overlayAgent.invoke_highlightNode({backendNodeId: node, highlightConfig});
  }

  async getNodeStyleStats() {
    const backgroundColors = new Map();
    const textColors = new Map();
    const fillColors = new Map();
    const borderColors = new Map();
    const fontSizes = new Map();
    const fontWeights = new Map();
    const unusedRules = [];
    const snapshotConfig = {
      computedStyles: [
        'background-color',
        'color',
        'fill',
        'border-top-width',
        'border-top-color',
        'border-bottom-width',
        'border-bottom-color',
        'border-left-width',
        'border-left-color',
        'border-right-width',
        'border-right-color',
        'font-size',
        'font-weight',
        'position',
        'top',
        'right',
        'bottom',
        'left',
        'display',
        'width',
        'height'
      ]
    };

    const storeColor = (id, nodeId, target) => {
      if (id === -1) {
        return;
      }

      // Parse the color, discard transparent ones.
      const colorText = strings[id];
      const color = Common.Color.parse(colorText);
      if (!color || color.rgba()[3] === 0) {
        return;
      }

      // Format the color and use as the key.
      const colorFormatted =
          color.hasAlpha() ? color.asString(Common.Color.Format.HEXA) : color.asString(Common.Color.Format.HEX);

      // Get the existing set of nodes with the color, or create a new set.
      const colorValues = target.get(colorFormatted) || new Set();
      colorValues.add(nodeId);

      // Store.
      target.set(colorFormatted, colorValues);
    };

    const isSVGNode = nodeName => {
      const validNodes =
          ['altGlyph', 'circle', 'ellipse', 'path', 'polygon', 'polyline', 'rect', 'text', 'textPath', 'tref', 'tspan'];
      return validNodes.indexOf(nodeName) !== -1;
    };

    let elementCount = 0;
    const {documents, strings} = await this._domSnapshotAgent.invoke_captureSnapshot(snapshotConfig);
    for (const {nodes, layout} of documents) {
      // Track the number of elements in the documents.
      elementCount += layout.nodeIndex.length;

      for (let idx = 0; idx < layout.styles.length; idx++) {
        const styles = layout.styles[idx];
        const nodeIdx = layout.nodeIndex[idx];
        const nodeId = nodes.backendNodeId[nodeIdx];
        const nodeName = nodes.nodeName[nodeIdx];

        const [backgroundColorIdx, textColorIdx, fillIdx, borderTopWidthIdx, borderTopColorIdx, borderBottomWidthIdx, borderBottomColorIdx, borderLeftWidthIdx, borderLeftColorIdx, borderRightWidthIdx, borderRightColorIdx, fontSizeIdx, fontWeightIdx, positionIdx, topIdx, rightIdx, bottomIdx, leftIdx, displayIdx, widthIdx, heightIdx] = styles;

        storeColor(backgroundColorIdx, nodeId, backgroundColors);
        storeColor(textColorIdx, nodeId, textColors);

        if (isSVGNode(strings[nodeName])) {
          storeColor(fillIdx, nodeId, fillColors);
        }

        if (strings[borderTopWidthIdx] !== '0px') {
          storeColor(borderTopColorIdx, nodeId, borderColors);
        }

        if (strings[borderBottomWidthIdx] !== '0px') {
          storeColor(borderBottomColorIdx, nodeId, borderColors);
        }

        if (strings[borderLeftWidthIdx] !== '0px') {
          storeColor(borderLeftColorIdx, nodeId, borderColors);
        }

        if (strings[borderRightWidthIdx] !== '0px') {
          storeColor(borderRightColorIdx, nodeId, borderColors);
        }

        if (fontSizeIdx !== -1) {
          const fontSize = strings[fontSizeIdx];
          const fontSizeInstances = (fontSizes.get(fontSize) || 0) + 1;
          fontSizes.set(fontSize, fontSizeInstances);
        }

        if (fontWeightIdx !== -1) {
          const fontWeight = strings[fontWeightIdx];
          const fontWeightInstances = (fontWeights.get(fontWeight) || 0) + 1;
          fontWeights.set(fontWeight, fontWeightInstances);
        }

        CssOverview.CSSOverviewUnusedRules.checkForUnusedPositionValues(
            unusedRules, nodeId, strings, positionIdx, topIdx, leftIdx, rightIdx, bottomIdx);

        // Ignore SVGs as, despite being inline by default, they can have width & height specified.
        if (strings[nodeName] !== 'svg') {
          CssOverview.CSSOverviewUnusedRules.checkForUnusedWidthAndHeightValues(
              unusedRules, nodeId, strings, displayIdx, widthIdx, heightIdx);
        }
      }
    }

    return {backgroundColors, textColors, fillColors, borderColors, fontSizes, fontWeights, unusedRules, elementCount};
  }

  getComputedStyleForNode(nodeId) {
    return this._cssAgent.getComputedStyleForNode(nodeId);
  }

  async getMediaQueries() {
    // Ignore media queries applied to stylesheets; instead only use declared media rules.
    const queries = await this._cssAgent.getMediaQueries();
    return queries.filter(query => query.source !== 'linkedSheet');
  }

{'fraction_non_alphanumeric': 0.11826914602978761, 'fraction_numerical': 0.003525160835463118, 'mean_word_length': 2.8743598497780813, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1549211', 'n_tokens_mistral': 3293, 'n_tokens_neox': 3229, 'n_words': 762}