devtools-tracing 1.1.0 → 1.2.0

package/lib/front_end/third_party/third-party-web/package/lib/markdown/template.md

@@ -1,151 +0,0 @@
-# [Third Party Web](https://www.thirdpartyweb.today/)
-
-## Check out the shiny new web UI https://www.thirdpartyweb.today/
-
-Data on third party entities and their impact on the web.
-
-This document is a summary of which third party scripts are most responsible for excessive JavaScript execution on the web today.
-
-## Table of Contents
-
-1.  [Goals](#goals)
-1.  [Methodology](#methodology)
-1.  [npm Module](#npm-module)
-1.  [Updates](#updates)
-1.  [Data](#data)
-    1.  [Summary](#summary)
-    1.  [How to Interpret](#how-to-interpret)
-    1.  [Third Parties by Category](#by-category)
-        <%= category_table_of_contents %>
-    1.  [Third Parties by Total Impact](#by-total-impact)
-1.  [Future Work](#future-work)
-1.  [FAQs](#faqs)
-1.  [Contributing](#contributing)
-
-## Goals
-
-<%= partials.goals %>
-
-## Methodology
-
-<%= partials.methodology %>
-
-## npm Module
-
-The entity classification data is available as an npm module.
-
-```js
-const {getEntity} = require('third-party-web')
-const entity = getEntity('https://d36mpcpuzc4ztk.cloudfront.net/js/visitor.js')
-console.log(entity)
-//   {
-//     "name": "Freshdesk",
-//     "homepage": "https://freshdesk.com/",
-//     "category": "customer-success",
-//     "domains": ["d36mpcpuzc4ztk.cloudfront.net"]
-//   }
-```
-
-## Updates
-
-<%= updates_contents %>
-
-## Data
-
-### Summary
-
-Across top ~4 million sites, ~2700 origins account for ~57% of all script execution time with the top 50 entities already accounting for ~47%. Third party script execution is the majority chunk of the web today, and it's important to make informed choices.
-
-### How to Interpret
-
-Each entity has a number of data points available.
-
-1.  **Usage (Total Number of Occurrences)** - how many scripts from their origins were included on pages
-1.  **Total Impact (Total Execution Time)** - how many seconds were spent executing their scripts across the web
-1.  **Average Impact (Average Execution Time)** - on average, how many milliseconds were spent executing each script
-1.  **Category** - what type of script is this
-
-<a name="by-category"></a>
-
-### Third Parties by Category
-
-This section breaks down third parties by category. The third parties in each category are ranked from first to last based on the average impact of their scripts. Perhaps the most important comparisons lie here. You always need to pick an analytics provider, but at least you can pick the most well-behaved analytics provider.
-
-#### Overall Breakdown
-
-Unsurprisingly, ads account for the largest identifiable chunk of third party script execution.
-
-![breakdown by category](./by-category.png)
-
-<%= category_contents %>
-
-<a name="by-total-impact"></a>
-
-### Third Parties by Total Impact
-
-This section highlights the entities responsible for the most script execution across the web. This helps inform which improvements would have the largest total impact.
-
-<%= all_data %>
-
-## Future Work
-
-1.  Introduce URL-level data for more fine-grained analysis, i.e. which libraries from Cloudflare/Google CDNs are most expensive.
-1.  Expand the scope, i.e. include more third parties and have greater entity/category coverage.
-
-## FAQs
-
-<%= partials.faqs %>
-
-## Contributing
-
-### Thanks
-
-A **huge** thanks to [@simonhearne](https://twitter.com/simonhearne) and [@soulgalore](https://twitter.com/soulislove) for their assistance in classifying additional domains!
-
-### Updating the Entities
-
-The domain->entity mapping can be found in `data/entities.js`. Adding a new entity is as simple as adding a new array item with the following form.
-
-```js
-{
-    "name": "Facebook",
-    "homepage": "https://www.facebook.com",
-    "category": "social",
-    "domains": [
-        "*.facebook.com",
-        "*.fbcdn.net"
-    ],
-    "examples": [
-        "www.facebook.com",
-        "connect.facebook.net",
-        "staticxx.facebook.com",
-        "static.xx.fbcdn.net",
-        "m.facebook.com"
-    ]
-}
-```
-
-### Updating Attribution Logic
-
-The logic for attribution to individual script URLs can be found in the [Lighthouse repo](https://github.com/GoogleChrome/lighthouse). File an issue over there to discuss further.
-
-### Updating the Data
-
-This is now automated! Run `yarn start:update-ha-data` with a `gcp-credentials.json` file in the root directory of this project (look at `bin/automated-update.js` for the steps involved).
-
-### Updating this README
-
-This README is auto-generated from the templates `lib/` and the computed data. In order to update the charts, you'll need to make sure you have `cairo` installed locally in addition to `yarn install`.
-
-```bash
-# Install `cairo` and dependencies for node-canvas
-brew install pkg-config cairo pango libpng jpeg giflib
-# Build the requirements in this repo
-yarn build
-# Regenerate the README
-yarn start
-```
-
-### Updating the website
-
-The web code is located in `www/` directory of this repository. Open a PR to make changes.

package/lib/front_end/third_party/third-party-web/package/lib/markdown/updates/2019-02-01.md

@@ -1 +0,0 @@
-Huge props to [WordAds](https://wordads.co/) for reducing their impact from ~2.5s to ~200ms on average! A few entities are showing considerably less data this cycle (Media Math, Crazy Egg, DoubleVerify, Bootstrap CDN). Perhaps they've added new CDNs/hostnames that we haven't identified or the basket of sites in HTTPArchive has shifted away from their usage.

package/lib/front_end/third_party/third-party-web/package/lib/markdown/updates/2019-03-01.md

@@ -1 +0,0 @@
-Almost 2,000 entities tracked now across ~3,000+ domains! Huge props to [@simonhearne](https://twitter.com/simonhearne) for making this massive increase possible. Tag Managers have now been split out into their own category since they represented such a large percentage of the "Mixed / Other" category.

package/lib/front_end/third_party/third-party-web/package/lib/markdown/updates/2019-05-06.md

@@ -1 +0,0 @@
-Google Ads clarified that `www.googletagservices.com` serves more ad scripts than generic tag management, and it has been reclassified accordingly. This has dropped the overall Tag Management share considerably back down to its earlier position.

package/lib/front_end/third_party/third-party-web/package/lib/markdown/updates/2019-05-13.md

@@ -1,14 +0,0 @@
-A shortcoming of the attribution approach has been fixed. Total usage is now reported based on the number of _pages_ in the dataset that use the third-party, not the number of _scripts_. Correspondingly, all average impact times are now reported _per page_ rather than _per script_. Previously, a third party could appear to have a lower impact or be more popular simply by splitting their work across multiple files.
-
-Third-parties that performed most of their work from a single script should see little to no impact from this change, but some entities have seen significant ranking movement. Hosting providers that host entire pages are, understandably, the most affected.
-
-Some notable changes below:
-
-| Third-Party | Previously (per-script) | Now (per-page) |
-| ----------- | ----------------------- | -------------- |
-| Beeketing   | 137 ms                  | 465 ms         |
-| Sumo        | 263 ms                  | 798 ms         |
-| Tumblr      | 324 ms                  | 1499 ms        |
-| Yandex APIs | 393 ms                  | 1231 ms        |
-| Google Ads  | 402 ms                  | 1285 ms        |
-| Wix         | 972 ms                  | 5393 ms        |

package/lib/front_end/third_party/third-party-web/package/lib/markdown/updates/2021-01-01.md

@@ -1 +0,0 @@
-Due to a change in HTTPArchive measurement which temporarily disabled site-isolation (out-of-process iframes), all of the third-parties whose work previously took place off the main-thread are now counted _on_ the main thread (and thus appear in our stats). This is most evident in the change to Google-owned properties such as YouTube and Doubleclick whose _complete_ cost are now captured.

package/lib/front_end/third_party/third-party-web/package/lib/markdown/updates/2024-07-01.md

@@ -1,3 +0,0 @@
-Some third parties use a dynamic subdomain to serve its main script on websites (e.g .domain.com). Some of these subdomain scripts are saved under observed-domains JSON file as results of the `sql/all-observed-domains-query.sql` query but analyzing http archive database we found a lot that are ignored because of number of occurrences (less than 50 ).
-
-So, we've created a new query to keep observed domains with occurrence below 50 only if its mapped entity (based on entity.js) has a total occurrence (of all its declared domain) greater than 50.

package/lib/front_end/third_party/third-party-web/package/lib/subsets/httparchive-nostats.d.ts

@@ -1 +0,0 @@
-export * from '../index'

package/lib/front_end/third_party/third-party-web/package/lib/subsets/httparchive-nostats.js

@@ -1,3 +0,0 @@
-const {createAPIFromDataset} = require('../create-entity-finder-api.js')
-const entities = require('../../dist/entities-httparchive-nostats.json')
-module.exports = createAPIFromDataset(entities)

package/lib/front_end/third_party/third-party-web/package/lib/subsets/httparchive.d.ts

@@ -1 +0,0 @@
-export * from '../index'

package/lib/front_end/third_party/third-party-web/package/lib/subsets/httparchive.js

@@ -1,3 +0,0 @@
-const {createAPIFromDataset} = require('../create-entity-finder-api.js')
-const entities = require('../../dist/entities-httparchive.json')
-module.exports = createAPIFromDataset(entities)

package/lib/front_end/third_party/third-party-web/package/lib/subsets/nostats.d.ts

@@ -1 +0,0 @@
-export * from '../index'

package/lib/front_end/third_party/third-party-web/package/lib/subsets/nostats.js

@@ -1,3 +0,0 @@
-const {createAPIFromDataset} = require('../create-entity-finder-api.js')
-const entities = require('../../dist/entities-nostats.json')
-module.exports = createAPIFromDataset(entities)

package/lib/front_end/third_party/third-party-web/package/nostats-subset.d.ts

@@ -1 +0,0 @@
-export * from './lib/subsets/nostats.js'

package/lib/front_end/third_party/third-party-web/package/nostats-subset.js

@@ -1 +0,0 @@
-module.exports = require("./lib/subsets/nostats.js")

package/lib/front_end/third_party/third-party-web/package/package.json

@@ -1,46 +0,0 @@
-{
-  "name": "third-party-web",
-  "version": "0.26.2",
-  "description": "Categorized data on third party entities on the web.",
-  "main": "./lib/index.js",
-  "scripts": {
-    "build:www": "cd www/ && npm install && npm run build",
-    "build": "node bin/convert-entities-db.js && node bin/generate-canonical-domain-csv.js && node bin/build-entity-json-files.js && node bin/generate-sql.js && generate-export-aliases",
-    "lint:fix": "prettier --print-width=100 --write '**/*.js'",
-    "start": "mkdir -p .tmp && node bin/merge-origins-with-entities.js && node bin/create-markdown.js",
-    "start:update-ha-data": "node ./bin/automated-update.js",
-    "test": "yarn build && yarn test:unit",
-    "test:unit": "jest 'lib/*'",
-    "semantic-release": "semantic-release"
-  },
-  "keywords": [
-    "third-party",
-    "third-parties"
-  ],
-  "author": "Patrick Hulce <patrick.hulce@gmail.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/patrickhulce/third-party-web.git"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@google-cloud/bigquery": "^7.9.0",
-    "chart.js": "^2.9.4",
-    "chartjs-node-canvas": "^3.2.0",
-    "colors": "^1.4.0",
-    "generate-export-aliases": "^1.1.0",
-    "jest": "^24.9.0",
-    "lodash": "^4.17.15",
-    "prettier": "^1.18.2",
-    "prompts": "^2.4.2",
-    "semantic-release": "^24.2.0"
-  },
-  "config": {
-    "exportAliases": {
-      "nostats-subset": "./lib/subsets/nostats.js",
-      "httparchive-nostats-subset": "./lib/subsets/httparchive-nostats.js",
-      "httparchive-subset": "./lib/subsets/httparchive.js"
-    }
-  },
-  "packageManager": "yarn@4.1.1"
-}

package/lib/front_end/third_party/third-party-web/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "third-party-web",
-  "description": "Package list used when building/upgrading third-party-web",
-  "private": true,
-  "dependencies": {
-    "third-party-web": "0.26.2"
-  }
-}

package/lib/front_end/third_party/third-party-web/rebuild.sh

@@ -1,13 +0,0 @@
-SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
-cd "$SCRIPT_DIR"
-
-npm install
-
-rm -rf package
-cp -r node_modules/third-party-web package
-rm -fr package/.* package/www-v2 package/dist/domain-map.csv
-
-../../../third_party/esbuild/esbuild  --bundle package/nostats-subset.js --format=esm --outdir=lib
-rm -rf node_modules
-# Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away
-git cl format --js

package/lib/front_end/third_party/third-party-web/third-party-web-tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true
-  },
-  "files": [
-    "lib/nostats-subset.js"
-  ]
-}

package/lib/front_end/third_party/third-party-web/third-party-web.ts

@@ -1,3 +0,0 @@
-import ThirdPartyWeb from './lib/nostats-subset.js';
-
-export {ThirdPartyWeb};

package/lib/front_end/ui/legacy/theme_support/ThemeSupport.ts

@@ -1,222 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-/*
- * Copyright (C) 2011 Google Inc.  All rights reserved.
- * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
- * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-import * as Common from '../../../core/common/common.js';
-import * as Host from '../../../core/host/host.js';
-import * as Root from '../../../core/root/root.js';
-
-let themeSupportInstance: ThemeSupport;
-
-const themeValueByTargetByName = new Map<Element|null, Map<string, string>>();
-
-export class ThemeSupport extends EventTarget {
-  #themeName = 'default';
-  private computedStyleOfHTML = Common.Lazy.lazy(() => window.getComputedStyle(document.documentElement));
-
-  readonly #documentsToTheme = new Set<Document>([document]);
-
-  readonly #darkThemeMediaQuery: MediaQueryList;
-  readonly #highContrastMediaQuery: MediaQueryList;
-  readonly #onThemeChangeListener = (): void => this.#applyTheme();
-  readonly #onHostThemeChangeListener = (): void => this.fetchColorsAndApplyHostTheme();
-
-  private constructor(private setting: Common.Settings.Setting<string>) {
-    super();
-
-    // When the theme changes we instantiate a new theme support and reapply.
-    // Equally if the user has set to match the system and the OS preference changes
-    // we perform the same change.
-    this.#darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    this.#highContrastMediaQuery = window.matchMedia('(forced-colors: active)');
-    this.#darkThemeMediaQuery.addEventListener('change', this.#onThemeChangeListener);
-    this.#highContrastMediaQuery.addEventListener('change', this.#onThemeChangeListener);
-    setting.addChangeListener(this.#onThemeChangeListener);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.ColorThemeChanged, this.#onHostThemeChangeListener);
-  }
-
-  #dispose(): void {
-    this.#darkThemeMediaQuery.removeEventListener('change', this.#onThemeChangeListener);
-    this.#highContrastMediaQuery.removeEventListener('change', this.#onThemeChangeListener);
-    this.setting.removeChangeListener(this.#onThemeChangeListener);
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-        Host.InspectorFrontendHostAPI.Events.ColorThemeChanged, this.#onHostThemeChangeListener);
-  }
-
-  static hasInstance(): boolean {
-    return typeof themeSupportInstance !== 'undefined';
-  }
-
-  static instance(opts: {
-    forceNew: boolean|null,
-    setting: Common.Settings.Setting<string>|null,
-  } = {forceNew: null, setting: null}): ThemeSupport {
-    const {forceNew, setting} = opts;
-    if (!themeSupportInstance || forceNew) {
-      if (!setting) {
-        throw new Error(`Unable to create theme support: setting must be provided: ${new Error().stack}`);
-      }
-
-      if (themeSupportInstance) {
-        themeSupportInstance.#dispose();
-      }
-      themeSupportInstance = new ThemeSupport(setting);
-    }
-
-    return themeSupportInstance;
-  }
-
-  /**
-   * Adds additional `Document` instances that should be themed besides the default
-   * `window.document` in which this ThemeSupport instance was created.
-   */
-  addDocumentToTheme(document: Document): void {
-    this.#documentsToTheme.add(document);
-    this.#fetchColorsAndApplyHostTheme(document);
-  }
-
-  getComputedValue(propertyName: string, target: Element|null = null): string {
-    // Since we might query the same property name from various targets we need to support
-    // per-target caching of computed values. Here we attempt to locate the particular computed
-    // value cache for the target element. If no target was specified we use the default computed root,
-    // which belongs to the documentElement.
-    let themeValueByName = themeValueByTargetByName.get(target);
-    if (!themeValueByName) {
-      themeValueByName = new Map<string, string>();
-      themeValueByTargetByName.set(target, themeValueByName);
-    }
-
-    // Since theme changes trigger a reload, we can avoid repeatedly looking up color values
-    // dynamically. Instead we can look up the first time and cache them for future use,
-    // knowing that the cache will be invalidated by virtue of a reload when the theme changes.
-    let themeValue = themeValueByName.get(propertyName);
-    if (!themeValue) {
-      const styleDeclaration = target ? window.getComputedStyle(target) : this.computedStyleOfHTML();
-      if (typeof styleDeclaration === 'symbol') {
-        throw new Error(`Computed value for property (${propertyName}) could not be found on documentElement.`);
-      }
-      themeValue = styleDeclaration.getPropertyValue(propertyName).trim();
-
-      // If we receive back an empty value (nothing has been set) we don't store it for the future.
-      // This means that subsequent requests will continue to query the styles in case the value
-      // has been set.
-      if (themeValue) {
-        themeValueByName.set(propertyName, themeValue);
-      }
-    }
-
-    return themeValue;
-  }
-
-  themeName(): string {
-    return this.#themeName;
-  }
-
-  #applyTheme(): void {
-    for (const document of this.#documentsToTheme) {
-      this.#applyThemeToDocument(document);
-    }
-  }
-
-  #applyThemeToDocument(document: Document): void {
-    const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
-    const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
-
-    const useSystemPreferred = this.setting.get() === 'systemPreferred' || isForcedColorsMode;
-    this.#themeName = useSystemPreferred ? systemPreferredTheme : this.setting.get();
-    document.documentElement.classList.toggle('theme-with-dark-background', this.#themeName === 'dark');
-
-    const useChromeTheme = Common.Settings.moduleSetting('chrome-theme-colors').get();
-    const isIncognito = Root.Runtime.hostConfig.isOffTheRecord === true;
-    // Baseline is the name of Chrome's default color theme and there are two of these: default and grayscale.
-    // The collective name for the rest of the color themes is dynamic.
-    // In the baseline themes Chrome uses custom values for surface colors, whereas for dynamic themes these are color-mixed.
-    // To match Chrome we need to know if any of the baseline themes is currently active and assign specific values to surface colors.
-    if (isIncognito) {
-      document.documentElement.classList.toggle('baseline-grayscale', true);
-    } else if (useChromeTheme) {
-      const selectedTheme = getComputedStyle(document.body).getPropertyValue('--user-color-source');
-      document.documentElement.classList.toggle('baseline-default', selectedTheme === 'baseline-default');
-      document.documentElement.classList.toggle('baseline-grayscale', selectedTheme === 'baseline-grayscale');
-    } else {
-      document.documentElement.classList.toggle('baseline-grayscale', true);
-    }
-
-    // In the event the theme changes we need to clear caches and notify subscribers.
-    themeValueByTargetByName.clear();
-    this.dispatchEvent(new ThemeChangeEvent());
-  }
-
-  static clearThemeCache(): void {
-    themeValueByTargetByName.clear();
-  }
-
-  fetchColorsAndApplyHostTheme(): void {
-    for (const document of this.#documentsToTheme) {
-      this.#fetchColorsAndApplyHostTheme(document);
-    }
-  }
-
-  #fetchColorsAndApplyHostTheme(document: Document): void {
-    const useChromeTheme = Common.Settings.moduleSetting('chrome-theme-colors').get();
-    if (Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode() || !useChromeTheme) {
-      this.#applyThemeToDocument(document);
-      return;
-    }
-
-    const oldColorsCssLink = document.querySelector('link[href*=\'//theme/colors.css\']');
-    const newColorsCssLink = document.createElement('link');
-    newColorsCssLink.setAttribute(
-        'href', `devtools://theme/colors.css?sets=ui,chrome&version=${(new Date()).getTime().toString()}`);
-    newColorsCssLink.setAttribute('rel', 'stylesheet');
-    newColorsCssLink.setAttribute('type', 'text/css');
-    newColorsCssLink.onload = () => {
-      if (oldColorsCssLink) {
-        oldColorsCssLink.remove();
-      }
-      this.#applyThemeToDocument(document);
-    };
-    document.body.appendChild(newColorsCssLink);
-  }
-}
-
-export class ThemeChangeEvent extends Event {
-  static readonly eventName = 'themechange';
-
-  constructor() {
-    super(ThemeChangeEvent.eventName, {bubbles: true, composed: true});
-  }
-}

package/lib/front_end/ui/legacy/theme_support/theme_support.ts

@@ -1,5 +0,0 @@
-// Copyright 2020 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-export * from './ThemeSupport.js';