chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "puppeteer",
-  "version": "16.2.0",
+  "name": "puppeteer-core",
+  "version": "19.2.1",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "keywords": [
     "puppeteer",
@@ -9,135 +9,156 @@
     "automation"
   ],
   "type": "commonjs",
-  "main": "./lib/cjs/puppeteer/puppeteer.js",
+  "main": "./lib/cjs/puppeteer/puppeteer-core.js",
+  "types": "./lib/types.d.ts",
   "exports": {
     ".": {
       "types": "./lib/types.d.ts",
-      "import": "./lib/esm/puppeteer/puppeteer.js",
-      "require": "./lib/cjs/puppeteer/puppeteer.js"
+      "import": "./lib/esm/puppeteer/puppeteer-core.js",
+      "require": "./lib/cjs/puppeteer/puppeteer-core.js"
+    },
+    "./internal/*": {
+      "import": "./lib/esm/puppeteer/*",
+      "require": "./lib/cjs/puppeteer/*"
     },
     "./*": {
       "import": "./*",
       "require": "./*"
     }
   },
-  "types": "lib/types.d.ts",
-  "repository": "github:puppeteer/puppeteer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core"
+  },
   "engines": {
     "node": ">=14.1.0"
   },
   "scripts": {
-    "test": "c8 --check-coverage --lines 93 run-s test:chrome:* test:firefox",
-    "test:types": "tsd",
-    "test:install": "scripts/test-install.sh",
-    "test:firefox": "cross-env PUPPETEER_PRODUCT=firefox MOZ_WEBRENDER=0 mocha",
-    "test:chrome": "run-s test:chrome:*",
-    "test:chrome:headless": "cross-env HEADLESS=true mocha",
-    "test:chrome:headless-chrome": "cross-env HEADLESS=chrome mocha",
-    "test:chrome:headful": "cross-env HEADLESS=false mocha",
-    "prepublishOnly": "npm run build",
-    "prepare": "node typescript-if-required.js && husky install",
-    "lint": "run-s lint:prettier lint:eslint",
-    "lint:prettier": "prettier --check .",
-    "lint:eslint": "([ \"$CI\" = true ] && eslint --ext js --ext ts --quiet -f codeframe . || eslint --ext js --ext ts .)",
-    "install": "node install.js",
-    "generate:sources": "tsx utils/generate_sources.ts",
-    "generate:types": "node utils/export_all.js && api-extractor run --local --verbose && eslint --ext ts --no-ignore --no-eslintrc -c .eslintrc.types.cjs --fix lib/types.d.ts",
-    "generate:markdown": "tsx utils/generate_docs.ts && prettier --ignore-path none --write docs",
-    "generate:esm-package-json": "echo '{\"type\": \"module\"}' > lib/esm/package.json",
-    "format": "run-s format:*",
-    "format:prettier": "prettier --write .",
-    "format:eslint": "eslint --ext js --ext ts --fix .",
-    "docs": "run-s build generate:markdown",
-    "debug": "npm run build && mocha --inspect-brk",
-    "commitlint": "commitlint --from=HEAD~1",
-    "clean": "rimraf lib && rimraf test/build",
-    "check": "run-p check:*",
-    "check:protocol-revision": "tsx scripts/ensure-correct-devtools-protocol-package",
-    "check:pinned-deps": "tsx scripts/ensure-pinned-deps",
-    "build": "run-s generate:sources build:tsc generate:types generate:esm-package-json",
-    "build:tsc": "tsc --version && run-p build:tsc:*",
-    "build:tsc:esm": "tsc -b src/tsconfig.esm.json",
-    "build:tsc:cjs": "tsc -b src/tsconfig.cjs.json",
-    "build:tsc:test": "tsc -b test"
+    "build:third_party": "wireit",
+    "build:tsc": "wireit",
+    "build:types": "wireit",
+    "build": "wireit",
+    "check": "tsx tools/ensure-correct-devtools-protocol-package",
+    "clean": "tsc -b --clean && rimraf lib src/generated",
+    "format:types": "wireit",
+    "generate:package-json": "wireit",
+    "generate:sources": "wireit",
+    "prepack": "wireit"
+  },
+  "wireit": {
+    "prepack": {
+      "command": "cp ../../README.md README.md",
+      "files": [
+        "../../README.md"
+      ],
+      "output": [
+        "README.md"
+      ]
+    },
+    "build": {
+      "dependencies": [
+        "build:third_party",
+        "format:types",
+        "generate:package-json"
+      ]
+    },
+    "generate:sources": {
+      "command": "tsx tools/generate_sources.ts",
+      "files": [
+        "tools/generate_sources.ts",
+        "src/templates/**"
+      ],
+      "output": [
+        "src/generated/**",
+        "src/types.ts"
+      ]
+    },
+    "build:third_party": {
+      "command": "rollup --config rollup.third_party.config.js",
+      "dependencies": [
+        "build:tsc"
+      ],
+      "clean": false,
+      "files": [
+        "lib/esm/third_party/**",
+        "lib/cjs/third_party/**"
+      ],
+      "output": [
+        "lib/esm/third_party/**",
+        "lib/cjs/third_party/**"
+      ]
+    },
+    "generate:package-json": {
+      "command": "echo '{\"type\": \"module\"}' > lib/esm/package.json",
+      "clean": "if-file-deleted",
+      "dependencies": [
+        "build:tsc"
+      ],
+      "output": [
+        "lib/esm/package.json"
+      ]
+    },
+    "build:types": {
+      "command": "api-extractor run --local",
+      "dependencies": [
+        "build:tsc"
+      ],
+      "files": [
+        "tsconfig.json",
+        "api-extractor.json",
+        "lib/esm/puppeteer/types.d.ts"
+      ],
+      "output": [
+        "lib/types.d.ts"
+      ]
+    },
+    "format:types": {
+      "command": "eslint --cache-location .eslintcache --cache --ext=ts --no-ignore --no-eslintrc -c=../../.eslintrc.types.cjs --fix lib/types.d.ts",
+      "dependencies": [
+        "build:types"
+      ],
+      "clean": false,
+      "files": [
+        "lib/types.d.ts",
+        "../../.eslintrc.types.cjs"
+      ],
+      "output": [
+        "lib/types.d.ts"
+      ]
+    },
+    "build:tsc": {
+      "command": "tsc -b",
+      "clean": "if-file-deleted",
+      "dependencies": [
+        "generate:sources"
+      ],
+      "files": [
+        "src/**",
+        "compat/**",
+        "**/tsconfig.*.json"
+      ],
+      "output": [
+        "lib/esm/**",
+        "lib/cjs/**"
+      ]
+    }
   },
   "files": [
     "lib",
-    "install.js",
-    "typescript-if-required.js",
-    "!**/*.tsbuildinfo"
+    "!*.tsbuildinfo"
   ],
   "author": "The Chromium Authors",
   "license": "Apache-2.0",
   "dependencies": {
     "cross-fetch": "3.1.5",
     "debug": "4.3.4",
-    "devtools-protocol": "0.0.1019158",
+    "devtools-protocol": "0.0.1056733",
     "extract-zip": "2.0.1",
     "https-proxy-agent": "5.0.1",
-    "progress": "2.0.3",
     "proxy-from-env": "1.1.0",
     "rimraf": "3.0.2",
     "tar-fs": "2.1.1",
     "unbzip2-stream": "1.4.3",
-    "ws": "8.8.1"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "17.0.3",
-    "@commitlint/config-conventional": "17.0.3",
-    "@microsoft/api-documenter": "7.19.4",
-    "@microsoft/api-extractor": "7.29.2",
-    "@microsoft/api-extractor-model": "7.23.0",
-    "@types/debug": "4.1.7",
-    "@types/diff": "5.0.2",
-    "@types/mime": "3.0.1",
-    "@types/mocha": "9.1.1",
-    "@types/node": "18.7.1",
-    "@types/pixelmatch": "5.2.4",
-    "@types/pngjs": "6.0.1",
-    "@types/progress": "2.0.5",
-    "@types/proxy-from-env": "1.0.1",
-    "@types/rimraf": "3.0.2",
-    "@types/semver": "7.3.11",
-    "@types/sinon": "10.0.13",
-    "@types/tar-fs": "2.0.1",
-    "@types/unbzip2-stream": "1.4.0",
-    "@types/ws": "8.5.3",
-    "@typescript-eslint/eslint-plugin": "5.33.0",
-    "@typescript-eslint/parser": "5.33.0",
-    "c8": "7.12.0",
-    "commonmark": "0.30.0",
-    "cross-env": "7.0.3",
-    "diff": "5.1.0",
-    "esbuild": "0.15.5",
-    "eslint": "8.21.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-formatter-codeframe": "7.32.1",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-local": "1.0.0",
-    "eslint-plugin-mocha": "10.1.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-tsdoc": "0.2.16",
-    "eslint-plugin-unused-imports": "2.0.0",
-    "esprima": "4.0.1",
-    "expect": "25.2.7",
-    "gts": "4.0.0",
-    "husky": "8.0.1",
-    "jpeg-js": "0.4.4",
-    "mime": "3.0.0",
-    "minimist": "1.2.6",
-    "mocha": "10.0.0",
-    "ncp": "2.0.0",
-    "npm-run-all": "4.1.5",
-    "pixelmatch": "5.3.0",
-    "pngjs": "6.0.0",
-    "prettier": "2.7.1",
-    "semver": "7.3.7",
-    "sinon": "14.0.0",
-    "source-map-support": "0.5.21",
-    "text-diff": "1.0.1",
-    "tsd": "0.22.0",
-    "tsx": "3.8.2",
-    "typescript": "4.7.4"
+    "ws": "8.10.0"
   }
 }

package/front_end/third_party/puppeteer/puppeteer.ts

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { Browser } from './package/lib/esm/puppeteer/common/Browser.js';
+import { CDPBrowser } from './package/lib/esm/puppeteer/common/Browser.js';
 import { Connection } from './package/lib/esm/puppeteer/common/Connection.js';
 import { type ConnectionTransport } from './package/lib/esm/puppeteer/common/ConnectionTransport.js';
 import { Frame } from './package/lib/esm/puppeteer/common/Frame.js';
 import { ElementHandle } from './package/lib/esm/puppeteer/common/ElementHandle.js';
-import { Page } from './package/lib/esm/puppeteer/common/Page.js';
+import { CDPPage } from './package/lib/esm/puppeteer/common/Page.js';
 
-export { Browser, Connection, ConnectionTransport, ElementHandle, Frame, Page };
+export { CDPBrowser as Browser, Connection, ConnectionTransport, ElementHandle, Frame, CDPPage as Page };

package/front_end/ui/components/buttons/Button.ts

@@ -33,6 +33,9 @@ export const enum Variant {
 export const enum Size {
   SMALL = 'SMALL',
   MEDIUM = 'MEDIUM',
+  // The 'tiny' size only has an effect on buttons of type 'round', for other
+  // button types 'tiny' buttons look just like 'small' buttons.
+  TINY = 'TINY',
 }
 
 type ButtonType = 'button'|'submit'|'reset';
@@ -47,6 +50,8 @@ interface ButtonState {
   type: ButtonType;
   value?: string;
   title?: string;
+  iconWidth?: string;
+  iconHeight?: string;
 }
 
 export type ButtonData = {
@@ -59,6 +64,8 @@ export type ButtonData = {
   type?: ButtonType,
   value?: string,
   title?: string,
+  iconWidth?: string,
+  iconHeight?: string,
 }|{
   variant: Variant.PRIMARY | Variant.SECONDARY,
   iconUrl?: string,
@@ -69,6 +76,8 @@ export type ButtonData = {
   type?: ButtonType,
   value?: string,
   title?: string,
+  iconWidth?: string,
+  iconHeight?: string,
 }|{
   variant: Variant.UNIFIED_TOOLBAR_2022,
   iconUrl: string,
@@ -120,6 +129,12 @@ export class Button extends HTMLElement {
     if ('size' in data && data.size) {
       this.#props.size = data.size;
     }
+    if ('iconWidth' in data && data.iconWidth) {
+      this.#props.iconWidth = data.iconWidth;
+    }
+    if ('iconHeight' in data && data.iconHeight) {
+      this.#props.iconHeight = data.iconHeight;
+    }
 
     this.#props.active = Boolean(data.active);
     this.#props.spinner = Boolean('spinner' in data ? data.spinner : false);
@@ -148,6 +163,16 @@ export class Button extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  set iconWidth(iconWidth: string) {
+    this.#props.iconWidth = iconWidth;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set iconHeight(iconHeight: string) {
+    this.#props.iconHeight = iconHeight;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
   set type(type: ButtonType) {
     this.#props.type = type;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
@@ -240,8 +265,10 @@ export class Button extends HTMLElement {
       round: this.#props.variant === Variant.ROUND,
       'text-with-icon': Boolean(this.#props.iconUrl) && !this.#isEmpty,
       'only-icon': Boolean(this.#props.iconUrl) && this.#isEmpty,
-      small: Boolean(this.#props.size === Size.SMALL),
+      small: Boolean(this.#props.size === Size.SMALL || this.#props.size === Size.TINY),
+      tiny: Boolean(this.#props.size === Size.TINY),
       active: this.#props.active,
+      'explicit-size': Boolean(this.#props.iconHeight || this.#props.iconWidth),
     };
     const spinnerClasses = {
       primary: this.#props.variant === Variant.PRIMARY,
@@ -257,6 +284,8 @@ export class Button extends HTMLElement {
             .data=${{
               iconPath: this.#props.iconUrl,
               color: 'var(--color-background)',
+              width: this.#props.iconWidth || undefined,
+              height: this.#props.iconHeight || undefined,
             } as IconButton.Icon.IconData}
           >
           </${IconButton.Icon.Icon.litTagName}>` : ''}

package/front_end/ui/components/buttons/button.css

@@ -99,6 +99,11 @@ button.round.small {
   width: 24px;
 }
 
+button.round.tiny {
+  height: 18px;
+  width: 18px;
+}
+
 button.primary {
   border: 1px solid var(--color-primary);
   background: var(--color-primary);
@@ -228,12 +233,28 @@ button.small devtools-icon {
   height: 14px;
 }
 
+button.explicit-size devtools-icon {
+  width: unset;
+  height: unset;
+}
+
 button.toolbar.small devtools-icon,
 button.round.small devtools-icon {
   width: 18px;
   height: 18px;
 }
 
+button.round.tiny devtools-icon {
+  width: 14px;
+  height: 14px;
+}
+
+button.toolbar.explicit-size devtools-icon,
+button.round.explicit-size devtools-icon {
+  width: unset;
+  height: unset;
+}
+
 button.toolbar.active devtools-icon,
 button.toolbar:active devtools-icon {
   --icon-color: var(--color-primary);

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
@@ -37,8 +38,8 @@ export class ChromeLink extends HTMLElement {
 
   // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
   // there using CDP.
-  openSettingsTab(event: Event): void {
-    if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
+  openSettingsTab(event: KeyboardEvent): void {
+    if (event.type === 'click' || (event.type === 'keydown' && Platform.KeyboardUtilities.isEnterOrSpaceKey(event))) {
       const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
       mainTarget && mainTarget.targetAgent().invoke_createTarget({url: this.#href});
       event.consume(true);

package/front_end/ui/components/chrome_link/chromeLink.css

@@ -8,5 +8,5 @@
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }

package/front_end/ui/components/code_highlighter/CodeHighlighter.ts

@@ -8,10 +8,10 @@ const t = CodeMirror.tags;
 
 export const highlightStyle: CodeMirror.HighlightStyle = CodeMirror.HighlightStyle.define([
   {tag: t.variableName, class: 'token-variable'},
+  {tag: t.definition(t.variableName), class: 'token-definition'},
   {tag: t.propertyName, class: 'token-property'},
   {tag: [t.typeName, t.className, t.namespace, t.macroName], class: 'token-type'},
   {tag: [t.special(t.name), t.constant(t.className)], class: 'token-variable-special'},
-  {tag: t.definition(t.name), class: 'token-definition'},
   {tag: t.standard(t.variableName), class: 'token-builtin'},
 
   {tag: [t.number, t.literal, t.unit], class: 'token-number'},
@@ -66,7 +66,25 @@ export async function highlightNode(node: Element, mimeType: string): Promise<vo
 
 export async function languageFromMIME(mimeType: string): Promise<CodeMirror.LanguageSupport|null> {
   switch (mimeType) {
+    case 'application/javascript':
+    case 'application/ecmascript':
+    case 'application/x-ecmascript':
+    case 'application/x-javascript':
+    case 'text/ecmascript':
+    case 'text/javascript1.0':
+    case 'text/javascript1.1':
+    case 'text/javascript1.2':
+    case 'text/javascript1.3':
+    case 'text/javascript1.4':
+    case 'text/javascript1.5':
+    case 'text/jscript':
+    case 'text/livescript ':
+    case 'text/x-ecmascript':
+    case 'text/x-javascript':
     case 'text/javascript':
+      // The correct MIME type for JavaScript is text/javascript, but we also support
+      // the legacy JavaScript MIME types here for backwards compatibility.
+      // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#legacy_javascript_mime_types
       return CodeMirror.javascript.javascript();
     case 'text/jsx':
       return CodeMirror.javascript.javascript({jsx: true});
@@ -85,7 +103,7 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
     case 'application/xml':
       return (await CodeMirror.xml()).xml();
 
-    case 'text/webassembly':
+    case 'application/wasm':
       return (await CodeMirror.wast()).wast();
 
     case 'text/x-c++src':
@@ -95,6 +113,7 @@ export async function languageFromMIME(mimeType: string): Promise<CodeMirror.Lan
       return (await CodeMirror.java()).java();
 
     case 'application/json':
+    case 'application/manifest+json':
       return (await CodeMirror.json()).json();
 
     case 'application/x-httpd-php':

package/front_end/ui/components/docs/button/basic.ts

@@ -10,6 +10,11 @@ await ComponentHelpers.ComponentServerSetup.setup();
 await FrontendHelpers.initializeGlobalVars();
 
 const testIcon = '/front_end/Images/ic_file_image.svg';
+const fileIcon = '/front_end/Images/file_icon.svg';
+const plusIcon = '/front_end/Images/plus_icon.svg';
+const minusIcon = '/front_end/Images/minus_icon.svg';
+const trashBinIcon = '/front_end/Images/trash_bin_icon.svg';
+const closeIcon = '/front_end/Images/close-icon.svg';
 
 function appendButton(button: Buttons.Button.Button): void {
   document.querySelector('#container')?.appendChild(button);
@@ -233,16 +238,44 @@ roundButtonDisabled.title = 'Disabled Round Button';
 roundButtonDisabled.onclick = () => alert('clicked');
 appendButton(roundButtonDisabled);
 
-// Small Round Button
-const smallRoundButton = new Buttons.Button.Button();
-smallRoundButton.data = {
-  variant: Buttons.Button.Variant.ROUND,
-  iconUrl: testIcon,
-  size: Buttons.Button.Size.SMALL,
-};
-smallRoundButton.title = 'Small Round Button';
-smallRoundButton.onclick = () => alert('clicked');
-appendButton(smallRoundButton);
+// Small Round Buttons
+const roundIcons = [
+  {iconUrl: testIcon},
+  {iconUrl: fileIcon, iconWidth: '16px', iconHeight: '16px'},
+  {iconUrl: plusIcon},
+  {iconUrl: minusIcon},
+  {iconUrl: trashBinIcon, iconWidth: '10px', iconHeight: '14px'},
+  {iconUrl: closeIcon, iconWidth: '10px', iconHeight: '10px'},
+];
+for (const roundIcon of roundIcons) {
+  const smallRoundButton = new Buttons.Button.Button();
+  smallRoundButton.data = {
+    variant: Buttons.Button.Variant.ROUND,
+    size: Buttons.Button.Size.SMALL,
+    ...roundIcon,
+  };
+  smallRoundButton.title = 'Small Round Button';
+  smallRoundButton.onclick = () => alert('clicked');
+  appendButton(smallRoundButton);
+}
+
+// Tiny Round Buttons
+const tinyRoundIcons = [
+  {iconUrl: plusIcon},
+  {iconUrl: minusIcon},
+  {iconUrl: closeIcon, iconWidth: '9px', iconHeight: '9px'},
+];
+for (const roundIcon of tinyRoundIcons) {
+  const tinyRoundButton = new Buttons.Button.Button();
+  tinyRoundButton.data = {
+    variant: Buttons.Button.Variant.ROUND,
+    size: Buttons.Button.Size.TINY,
+    ...roundIcon,
+  };
+  tinyRoundButton.title = 'Tiny Round Button';
+  tinyRoundButton.onclick = () => alert('clicked');
+  appendButton(tinyRoundButton);
+}
 
 // Small Disabled Round Button
 const smallRoundButtonDisabled = new Buttons.Button.Button();

package/front_end/ui/components/docs/elements_breadcrumbs/basic.ts

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
 import * as Elements from '../../../../panels/elements/components/components.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
 import {makeCrumb} from './helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
 
 const component = new Elements.ElementsBreadcrumbs.ElementsBreadcrumbs();
 const bodyCrumb = makeCrumb({

package/front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.ts

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
 import * as Elements from '../../../../panels/elements/components/components.js';
 import * as ComponentHelpers from '../../helpers/helpers.js';
 
 import {makeCrumb} from './helpers.js';
 
 await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
 
 const component = new Elements.ElementsBreadcrumbs.ElementsBreadcrumbs();
 const bodyCrumb = makeCrumb({
@@ -57,12 +59,17 @@ const emCrumb = makeCrumb({
   attributes: {id: 'my-em-has-a-long-id', class: 'and-a-very-long-class'},
 });
 
-document.getElementById('container')?.appendChild(component);
+const crumbs = [emCrumb, strongCrumb, spanCrumb, divCrumb, bodyCrumb];
+const crumbsReversed = [...crumbs].reverse();
+
+const selectedNodeParam = new URLSearchParams(location.search)?.get('selectedCrumbIndex');
+const selectedNode = selectedNodeParam ? crumbsReversed[Number(selectedNodeParam)] : bodyCrumb;
 
 component.data = {
-  crumbs: [emCrumb, strongCrumb, spanCrumb, divCrumb, bodyCrumb],
-  selectedNode: bodyCrumb,
+  crumbs,
+  selectedNode,
 };
+document.getElementById('container')?.appendChild(component);
 
 const button = component.shadowRoot?.querySelector?.('button.overflow.right');
 button?.dispatchEvent(new MouseEvent('click'));

package/front_end/ui/components/docs/two_states_counter/basic.html

@@ -0,0 +1,27 @@
+<!--
+  Copyright 2022 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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Two States Counter Example</title>
+    <style>
+      #container {
+        width: 300px;
+        height: 200px;
+        border: 1px solid black;
+        display: flex;
+        gap: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>