chrome-devtools-frontend 1.0.936736 → 1.0.938150

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

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer",
-  "version": "10.4.0",
+  "version": "11.0.0",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "main": "./cjs-entry.js",
   "types": "lib/types.d.ts",
@@ -17,7 +17,7 @@
     "assert-unit-coverage": "cross-env COVERAGE=1 mocha --config mocha-config/coverage-tests.js",
     "funit": "cross-env PUPPETEER_PRODUCT=firefox npm run unit",
     "test": "npm run tsc && npm run lint --silent && npm run unit-with-coverage && npm run test-browser",
-    "prepare": "node typescript-if-required.js",
+    "prepare": "node typescript-if-required.js && husky install",
     "prepublishOnly": "npm run build",
     "dev-install": "npm run tsc && node install.js",
     "install": "node install.js",
@@ -58,67 +58,60 @@
   "author": "The Chromium Authors",
   "license": "Apache-2.0",
   "dependencies": {
-    "debug": "4.3.1",
+    "debug": "4.3.2",
     "devtools-protocol": "0.0.901419",
     "extract-zip": "2.0.1",
     "https-proxy-agent": "5.0.0",
-    "node-fetch": "2.6.1",
+    "node-fetch": "2.6.5",
     "pkg-dir": "4.2.0",
-    "progress": "2.0.1",
+    "progress": "2.0.3",
     "proxy-from-env": "1.1.0",
     "rimraf": "3.0.2",
-    "tar-fs": "2.0.0",
-    "unbzip2-stream": "1.3.3",
-    "ws": "7.4.6"
+    "tar-fs": "2.1.1",
+    "unbzip2-stream": "1.4.3",
+    "ws": "8.2.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "11.0.0",
-    "@commitlint/config-conventional": "11.0.0",
-    "@microsoft/api-documenter": "7.13.8",
-    "@microsoft/api-extractor": "7.15.1",
-    "@types/debug": "0.0.31",
+    "@commitlint/cli": "13.2.0",
+    "@commitlint/config-conventional": "13.2.0",
+    "@microsoft/api-documenter": "7.13.65",
+    "@microsoft/api-extractor": "7.18.15",
+    "@types/debug": "4.1.7",
     "@types/mime": "2.0.3",
-    "@types/mocha": "7.0.2",
-    "@types/node": "14.14.45",
+    "@types/mocha": "9.0.0",
+    "@types/node": "16.10.9",
     "@types/proxy-from-env": "1.0.1",
-    "@types/rimraf": "2.0.2",
-    "@types/sinon": "9.0.11",
-    "@types/tar-fs": "1.16.2",
-    "@types/ws": "7.4.4",
+    "@types/rimraf": "3.0.2",
+    "@types/sinon": "10.0.4",
+    "@types/tar-fs": "2.0.1",
+    "@types/ws": "8.2.0",
     "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
-    "@web/test-runner": "0.12.20",
+    "@typescript-eslint/parser": "4.33.0",
+    "@web/test-runner": "0.13.18",
     "commonmark": "0.29.3",
     "cross-env": "7.0.3",
-    "eslint": "7.26.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-mocha": "8.1.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-unicorn": "22.0.0",
-    "esprima": "4.0.0",
+    "eslint-plugin-mocha": "9.0.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-unicorn": "37.0.1",
+    "esprima": "4.0.1",
     "expect": "25.2.7",
-    "husky": "4.3.8",
+    "husky": "7.0.2",
     "jpeg-js": "0.3.7",
     "mime": "2.5.2",
     "minimist": "1.2.0",
-    "mocha": "8.4.0",
+    "mocha": "9.1.3",
     "ncp": "2.0.0",
-    "pixelmatch": "4.0.2",
-    "pngjs": "5.0.0",
+    "pixelmatch": "5.2.1",
+    "pngjs": "6.0.0",
     "prettier": "2.3.0",
     "sinon": "9.2.4",
     "source-map-support": "0.5.19",
-    "standard-version": "9.3.0",
+    "standard-version": "9.3.2",
     "text-diff": "1.0.1",
-    "ts-node": "9.1.1",
-    "typescript": "4.2.4"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run eslint",
-      "commit-msg": "commitlint --env HUSKY_GIT_PARAMS",
-      "pre-push": "npm run tsc && npm run eslint && npm run doc && npm run ensure-pinned-deps"
-    }
+    "ts-node": "10.4.0",
+    "typescript": "4.4.4"
   }
 }

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -729,6 +729,7 @@ export class DataGrid extends HTMLElement {
                 const cellIsFocusableCell = anyColumnsSortable && columnIndex === tabbableCell[0] && tabbableCell[1] === 0;
 
                 return LitHtml.html`<th class=${thClasses}
+                  style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
                   data-grid-header-cell=${col.id}
                   @focus=${(): void => {
                     this.focusCellIfRequired([columnIndex, 0]);
@@ -749,7 +750,7 @@ export class DataGrid extends HTMLElement {
                   data-row-index='0'
                   data-col-index=${columnIndex}
                   tabindex=${LitHtml.Directives.ifDefined(anyColumnsSortable ? (cellIsFocusableCell ? '0' : '-1') : undefined)}
-                >${col.title}</th>`;
+                >${col.titleElement || col.title}</th>`;
               })}
             </tr>
           </thead>
@@ -790,6 +791,7 @@ export class DataGrid extends HTMLElement {
                   const cellOutput = col.visible ? renderCellValue(cell) : null;
                   return LitHtml.html`<td
                     class=${cellClasses}
+                    style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
                     tabindex=${cellIsFocusableCell ? '0' : '-1'}
                     aria-colindex=${columnIndex + 1}
                     title=${cell.title || String(cell.value).substr(0, 20)}

package/front_end/ui/components/data_grid/DataGridUtils.ts

@@ -6,6 +6,10 @@ import type * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as DataGridRenderers from './DataGridRenderers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 
+export interface CSSStylesObject {
+  readonly [name: string]: string;
+}
+
 /**
   * A column is an object with the following properties:
   *
@@ -19,14 +23,17 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
   *   Note, if you're rendering a data-grid yourself you likely  shouldn't set
   *   this. It's set by the `data-grid-controller`, which is the component you
   *   want if your table needs to be sortable.
+  * - `styles`: an optional property of key-value sets of CSS properties and values.
 */
 export interface Column {
   id: string;
   title: string;
+  titleElement?: LitHtml.TemplateResult;
   sortable?: boolean;
   widthWeighting: number;
   hideable: boolean;
   visible: boolean;
+  styles?: CSSStylesObject;
 }
 
 export type CellValue = string|number|boolean|IconButton.Icon.Icon|null;
@@ -56,14 +63,10 @@ export function getStringifiedCellValues(cells: Cell[]): string {
       .toLowerCase();
 }
 
-export interface RowCSSStylesObject {
-  readonly [name: string]: string;
-}
-
 export type Row = {
   cells: Cell[],
   hidden?: boolean,
-  styles?: RowCSSStylesObject,
+  styles?: CSSStylesObject,
 };
 
 export const enum SortDirection {

package/front_end/ui/components/data_grid/dataGrid.css

@@ -106,11 +106,6 @@ th.firstVisibleColumn {
   padding: 0;
 }
 
-tr td:nth-child(1),
-tr th:nth-child(1) {
-  text-align: center;
-}
-
 .filler-row.empty-table td {
   /* If the table is empty and we have no renderable rows, the filler row cell
    * needs to have some form of padding to make it have some height, else it

package/front_end/ui/components/icon_button/iconButton.css

@@ -61,6 +61,7 @@
     background-color: ButtonFace;
   }
 
+  .icon-button:focus-visible,
   .icon-button.with-click-handler:hover {
     background-color: Highlight;
     color: HighlightText;

package/front_end/ui/components/settings/settingCheckbox.css

@@ -24,8 +24,3 @@ label {
 p {
   margin: 12px 0;
 }
-
-/* Preserve look of legacy checkboxes in dark mode */
-:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
-  filter: invert(80%);
-}

package/front_end/ui/legacy/ListWidget.ts

@@ -283,10 +283,8 @@ export class Editor<T> {
     const buttonsRow = this.element.createChild('div', 'editor-buttons');
     this.commitButton = createTextButton('', this.commitClicked.bind(this), '', true /* primary */);
     buttonsRow.appendChild(this.commitButton);
-    this.cancelButton = createTextButton(
-        i18nString(UIStrings.cancelString), this.cancelClicked.bind(this), '', true /* primary */, 'mousedown');
-    this.cancelButton.addEventListener(
-        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.cancelClicked.bind(this)), false);
+    this.cancelButton =
+        createTextButton(i18nString(UIStrings.cancelString), this.cancelClicked.bind(this), '', true /* primary */);
     buttonsRow.appendChild(this.cancelButton);
 
     this.errorMessageContainer = this.element.createChild('div', 'list-widget-input-validation-error');

package/front_end/ui/legacy/XLink.ts

@@ -5,6 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as ComponentHelpers from '../components/helpers/helpers.js';
+import * as LitHtml from '../lit-html/lit-html.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu, Provider} from './ContextMenu.js';
@@ -14,9 +15,6 @@ import {addReferrerToURLIfNecessary, copyLinkAddressLabel, MaxLengthForDisplayed
 import {XElement} from './XElement.js';
 
 export class XLink extends XElement {
-  tabIndex: number;
-  target: string;
-  rel: string;
   hrefInternal: string|null;
   private clickable: boolean;
   private readonly onClick: (arg0: Event) => void;
@@ -40,9 +38,9 @@ export class XLink extends XElement {
 
     this.style.setProperty('display', 'inline');
     ARIAUtils.markAsLink(this);
-    this.tabIndex = 0;
-    this.target = '_blank';
-    this.rel = 'noopener';
+    this.setAttribute('tabindex', '0');
+    this.setAttribute('target', '_blank');
+    this.setAttribute('rel', 'noopener');
 
     this.hrefInternal = null;
     this.clickable = true;
@@ -152,3 +150,5 @@ export class ContextMenuProvider implements Provider {
 }
 
 ComponentHelpers.CustomElements.defineComponent('x-link', XLink);
+
+export const sample = LitHtml.html`<p>Hello, <x-link>world!</x-link></p>`;

package/front_end/ui/legacy/checkboxTextLabel.css

@@ -60,10 +60,6 @@ input.dt-checkbox-themed:checked::after {
   background-color: var(--color-background-inverted);
 }
 
-:host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
-  filter: invert(80%);
-}
-
 .dt-checkbox-text {
   margin-left: 3px;
   overflow: hidden;

package/front_end/ui/legacy/components/perf_ui/module.json

@@ -1,8 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/source_frame",
-    "ui/legacy/components/text_editor"
+    "ui/legacy"
   ],
     "resources": [
     "chartViewport.css",

package/front_end/ui/legacy/components/source_frame/module.json

@@ -1,6 +1,5 @@
 {
   "dependencies": [
-    "ui/legacy/components/text_editor",
     "ui/legacy"
   ],
     "resources": [

package/front_end/ui/legacy/inspectorCommon.css

@@ -287,10 +287,6 @@ input::placeholder {
   --override-input-placeholder-color: rgb(230 230 230 / 54%);
 }
 
-:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
-  filter: invert(80%);
-}
-
 .harmony-input:not([type]),
 .harmony-input[type=number],
 .harmony-input[type=text] {

package/front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -113,7 +113,7 @@
 
 .cm-css-property,
 .webkit-css-property {
-  color: rgb(200 0 0); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, rgb(200 0 0)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .cm-xml-meta {

package/front_end/ui/legacy/inspectorSyntaxHighlightDark.css

@@ -213,7 +213,7 @@
 }
 
 .webkit-css-property {
-  color: rgb(53 212 199); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, rgb(53 212 199)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .cm-def {

package/front_end/ui/legacy/tabbedPane.css

@@ -390,6 +390,11 @@
     color: HighlightText;
   }
 
+  .tabbed-pane-header-tab:hover .tabbed-pane-close-button,
+  .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible .tabbed-pane-close-button {
+    --icon-color: HighlightText;
+  }
+
   .tabbed-pane-header-tabs-drop-down-container {
     opacity: 100%;
   }

package/front_end/ui/legacy/treeoutline.css

@@ -215,4 +215,20 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
     forced-color-adjust: none;
     color: HighlightText;
   }
+
+  .tree-outline:not(.hide-selection-when-blurred) li.selected:focus-visible devtools-adorner,
+  .tree-outline.hide-selection-when-blurred li.selected:focus-visible devtools-adorner {
+    --override-adorner-background-color: Highlight;
+    --override-adorner-border-color: HighlightText;
+  }
+
+  .tree-outline:not(.hide-selection-when-blurred) devtools-icon,
+  .tree-outline.hide-selection-when-blurred devtools-icon {
+    --icon-color: ButtonText;
+  }
+
+  .tree-outline:not(.hide-selection-when-blurred) .selected devtools-icon,
+  .tree-outline.hide-selection-when-blurred .selected:focus-visible devtools-icon {
+    --icon-color: HighlightText;
+  }
 }

package/front_end/ui/legacy/viewContainers.css

@@ -71,7 +71,12 @@
 @media (forced-colors: active) {
   .expandable-view-title:focus-visible {
     forced-color-adjust: none;
-    background: canvas !important; /* stylelint-disable-line declaration-no-important */
+    color: HighlightText;
+    background-color: Highlight;
     box-shadow: 0 0 0 2px Highlight inset;
   }
+
+  .expandable-view-title:focus-visible .title-expand-icon {
+    background-color: HighlightText;
+  }
 }

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.936736"
+  "version": "1.0.938150"
 }

package/scripts/build/ninja/copy-file.js

@@ -12,7 +12,7 @@ const destPath = path.join(process.cwd(), dest);
 // is because the file in that location might be a hardlinked file, and
 // overwriting it doesn't change the fact that it's hardlinked.
 const srcContents = fs.readFileSync(srcPath);
-if (fs.existsSync(destPath)) {
+if (fileExists(destPath)) {
   // Check contents, return early if match
   const destContents = fs.readFileSync(destPath);
   if (srcContents.equals(destContents)) {
@@ -24,3 +24,12 @@ if (fs.existsSync(destPath)) {
 // toolchain will create a hardlink, which in turn reflects changes in
 // gen and resources/inspector back to //front_end.
 fs.writeFileSync(destPath, srcContents);
+
+/**
+ * Case sensitive implementation of a file look up.
+ */
+function fileExists(filePath) {
+  const dir = path.dirname(filePath);
+  const files = fs.readdirSync(dir);
+  return files.includes(path.basename(filePath));
+}

package/scripts/build/ninja/copy-files.js

@@ -13,7 +13,7 @@ for (const file of files.split(',')) {
   // is because the file in that location might be a hardlinked file, and
   // overwriting it doesn't change the fact that it's hardlinked.
   const srcContents = fs.readFileSync(srcPath);
-  if (fs.existsSync(destPath)) {
+  if (fileExists(destPath)) {
     // Check contents, return early if match
     const destContents = fs.readFileSync(destPath);
     if (srcContents.equals(destContents)) {
@@ -26,3 +26,12 @@ for (const file of files.split(',')) {
   // gen and resources/inspector back to //front_end.
   fs.writeFileSync(destPath, srcContents);
 }
+
+/**
+ * Case sensitive implementation of a file look up.
+ */
+function fileExists(filePath) {
+  const dir = path.dirname(filePath);
+  const files = fs.readdirSync(dir);
+  return files.includes(path.basename(filePath));
+}

package/scripts/eslint_rules/lib/check_test_definitions.js

@@ -47,7 +47,8 @@ module.exports = {
   create: function(context) {
     return {
       MemberExpression(node) {
-        if (node.object.name === 'it' && (node.property.name === 'skip' || node.property.name === 'skipOnPlatforms') &&
+        if ((node.object.name === 'it' || node.object.name === 'describe') &&
+            (node.property.name === 'skip' || node.property.name === 'skipOnPlatforms') &&
             node.parent.type === 'CallExpression') {
           const testNameNode = node.property.name === 'skip' ? node.parent.arguments[0] : node.parent.arguments[1];
 

package/scripts/eslint_rules/tests/check_test_definitions_test.js

@@ -62,6 +62,24 @@ ruleTester.run('check_e2e_tests', rule, {
       `,
       filename: 'test/e2e/folder/file.ts',
     },
+    {
+      code: `import {describe, it} from '../../shared/mocha-extensions.js';
+      // Explaining comment
+      describe.skip('[crbug.com/123456]: e2e-test', async () => {
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [{message: rule.meta.messages.missingBugId}],
+    },
+    {
+      code: `import {describe, it} from '../../shared/mocha-extensions.js';
+      // Explaining comment
+      describe.skipOnPlatforms(['mac'], '[crbug.com/123456]: e2e-test', async () => {
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [{message: rule.meta.messages.missingBugId}],
+    },
   ],
 
   invalid: [
@@ -111,5 +129,21 @@ ruleTester.run('check_e2e_tests', rule, {
       filename: 'test/e2e/folder/file.ts',
       errors: [{message: rule.meta.messages.extraBugId}],
     },
+    {
+      code: `import {describe, it} from '../../shared/mocha-extensions.js';
+      describe.skip('e2e-test', async () => {
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [{message: rule.meta.messages.missingBugId}, {message: rule.meta.messages.comment}],
+    },
+    {
+      code: `import {describe, it} from '../../shared/mocha-extensions.js';
+      describe.skipOnPlatforms(['mac'], 'e2e-test', async () => {
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [{message: rule.meta.messages.missingBugId}, {message: rule.meta.messages.comment}],
+    },
   ]
 });

package/scripts/eslint_rules/tests/migrate_create_shadow_root_with_styles_test.js

@@ -12,7 +12,7 @@ const ruleTester = new (require('eslint').RuleTester)({
 
 const MIGRATION_ERROR_MESSAGE = 'Import CSS file instead of passing a string into createShadowRootWithStyles';
 const MANUALLY_MIGRATE_ERROR_ESSAGE =
-    'Please manually migrate this file. Got error: Cannot read property \'properties\' of undefined';
+    'Please manually migrate this file. Got error: Cannot read properties of undefined (reading \'properties\')';
 
 ruleTester.run('check_migrate_RegisterRequiredCSS', rule, {
   valid: [

package/scripts/eslint_rules/tests/migrate_register_required_css_test.js

@@ -15,7 +15,7 @@ const ADD_WAS_SHOW_EXPECTED_ERROR_MESSAGE =
 const EDIT_WAS_SHOW_EXPECTED_ERROR_MESSAGE =
     'Import CSS file instead of using registerRequiredCSS and edit wasShown method';
 const MANUALLY_MIGRATE_ERROR_ESSAGE =
-    'Please manually migrate components/test.css as it has edge cases not covered by this script. Got error: Cannot read property \'range\' of undefined.';
+    'Please manually migrate components/test.css as it has edge cases not covered by this script. Got error: Cannot read properties of undefined (reading \'range\').';
 
 ruleTester.run('check_migrate_RegisterRequiredCSS', rule, {
   valid: [

package/front_end/entrypoints/inspector_main/module.json

@@ -1,9 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-    "resources": [
-    "nodeIcon.css",
-    "renderingOptions.css"
-  ]
-}

package/front_end/panels/accessibility/module.json

@@ -1,7 +0,0 @@
-{
-    "resources": [
-    "accessibilityNode.css",
-    "accessibilityProperties.css",
-    "axBreadcrumbs.css"
-  ]
-}

package/front_end/panels/console/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/text_editor"
-  ]
-}

package/front_end/panels/coverage/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy/components/source_frame",
-    "ui/legacy"
-  ]
-}

package/front_end/panels/css_overview/module.json

@@ -1,4 +0,0 @@
-{
-  "dependencies": [
-  ]
-}

package/front_end/panels/elements/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/text_editor"
-  ]
-}

package/front_end/panels/protocol_monitor/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/source_frame"
-  ]
-}

package/front_end/panels/sources/module.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/source_frame",
-    "panels/coverage"
-  ]
-}