chrome-devtools-frontend 1.0.966659 → 1.0.967728

package/config/gni/devtools_grd_files.gni

@@ -576,6 +576,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSRule.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
+  "front_end/core/sdk/CSSSupports.js",
   "front_end/core/sdk/CategorizedBreakpoint.js",
   "front_end/core/sdk/ChildTargetManager.js",
   "front_end/core/sdk/CompilerSourceMappingContentProvider.js",

package/front_end/core/i18n/locales/en-US.json

@@ -2966,6 +2966,9 @@
   "panels/application/components/InterestGroupAccessGrid.ts | groupOwner": {
     "message": "Owner"
   },
+  "panels/application/components/InterestGroupAccessGrid.ts | noEvents": {
+    "message": "No interest group events recorded."
+  },
   "panels/application/components/OriginTrialTreeView.ts | expiryTime": {
     "message": "Expiry Time"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -2966,6 +2966,9 @@
   "panels/application/components/InterestGroupAccessGrid.ts | groupOwner": {
     "message": "Ôẃn̂ér̂"
   },
+  "panels/application/components/InterestGroupAccessGrid.ts | noEvents": {
+    "message": "N̂ó îńt̂ér̂éŝt́ ĝŕôúp̂ év̂én̂t́ŝ ŕêćôŕd̂éd̂."
+  },
   "panels/application/components/OriginTrialTreeView.ts | expiryTime": {
     "message": "Êx́p̂ír̂ý T̂ím̂é"
   },

package/front_end/core/sdk/CSSQuery.ts

@@ -9,7 +9,7 @@ import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSLocation} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
-type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery;
+type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports;
 
 export abstract class CSSQuery {
   text = '';

package/front_end/core/sdk/CSSRule.ts

@@ -7,6 +7,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 
 import {CSSContainerQuery} from './CSSContainerQuery.js';
 import {CSSMedia} from './CSSMedia.js';
+import {CSSSupports} from './CSSSupports.js';
 
 import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
@@ -99,6 +100,7 @@ export class CSSStyleRule extends CSSRule {
   selectors!: CSSValue[];
   media: CSSMedia[];
   containerQueries: CSSContainerQuery[];
+  supports: CSSSupports[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
     // TODO(crbug.com/1011811): Replace with spread operator or better types once Closure is gone.
@@ -108,6 +110,7 @@ export class CSSStyleRule extends CSSRule {
     this.containerQueries = payload.containerQueries ?
         CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
         [];
+    this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
     this.wasUsed = wasUsed || false;
   }
 
@@ -191,12 +194,9 @@ export class CSSStyleRule extends CSSRule {
         this.selectors[i].rebase(edit);
       }
     }
-    for (const media of this.media) {
-      media.rebase(edit);
-    }
-    for (const containerQuery of this.containerQueries) {
-      containerQuery.rebase(edit);
-    }
+    this.media.forEach(media => media.rebase(edit));
+    this.containerQueries.forEach(cq => cq.rebase(edit));
+    this.supports.forEach(supports => supports.rebase(edit));
 
     super.rebase(edit);
   }

package/front_end/core/sdk/CSSSupports.ts

@@ -0,0 +1,30 @@
+// 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.
+
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSSupports extends CSSQuery {
+  static parseSupportsPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports[]): CSSSupports[] {
+    return payload.map(supports => new CSSSupports(cssModel, supports));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSSupports): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

package/front_end/core/sdk/sdk.ts

@@ -34,6 +34,7 @@ import * as CSSQuery from './CSSQuery.js';
 import * as CSSRule from './CSSRule.js';
 import * as CSSStyleDeclaration from './CSSStyleDeclaration.js';
 import * as CSSStyleSheetHeader from './CSSStyleSheetHeader.js';
+import * as CSSSupports from './CSSSupports.js';
 import * as DebuggerModel from './DebuggerModel.js';
 import * as DOMDebuggerModel from './DOMDebuggerModel.js';
 import * as DOMModel from './DOMModel.js';
@@ -101,6 +102,7 @@ export {
   CSSRule,
   CSSStyleDeclaration,
   CSSStyleSheetHeader,
+  CSSSupports,
   DebuggerModel,
   DOMDebuggerModel,
   DOMModel,

package/front_end/legacy_test_runner/console_test_runner/console_test_runner.js

@@ -364,6 +364,7 @@ ConsoleTestRunner.dumpConsoleMessagesWithClasses = async function(sortMessages,
     let messageText = ConsoleTestRunner.prepareConsoleMessageText(element);
     if (trimMessages) {
       messageText = messageText.replace(/[ ]+/g, ' ');
+      messageText = messageText.replace(/\s+\n\s+/g, ' ');
     }
     result.push(messageText + ' ' + element.getAttribute('class') + ' > ' + contentElement.getAttribute('class'));
   }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -4144,10 +4144,6 @@ export const NativeFunctions = [
     name: 'isInputPending',
     signatures: [['?options']]
   },
-  {
-    name: 'WindowControlsOverlayGeometryChangeEvent',
-    signatures: [['type','eventInitDict']]
-  },
   {
     name: 'stop',
     signatures: [['?when']],
@@ -5297,6 +5293,10 @@ export const NativeFunctions = [
     name: 'adAuctionComponents',
     signatures: [['numComponents']]
   },
+  {
+    name: 'deprecatedURNToURL',
+    signatures: [['uuid_url']]
+  },
   {
     name: 'createAdRequest',
     signatures: [['config']]
@@ -5876,24 +5876,9 @@ export const NativeFunctions = [
     signatures: [['path','?options','?successCallback','?errorCallback']],
     receiver: 'DirectoryEntry'
   },
-  {
-    name: 'rename',
-    signatures: [['new_entry_name']],
-    receiver: 'FileSystemFileHandle'
-  },
-  {
-    name: 'rename',
-    signatures: [['new_entry_name']],
-    receiver: 'FileSystemHandle'
-  },
-  {
-    name: 'rename',
-    signatures: [['old_name','new_name']],
-    receiver: 'NativeIOFileManager'
-  },
   {
     name: 'move',
-    signatures: [['destination_directory','?new_entry_name']]
+    signatures: [['new_entry_name'],['destination_directory','?new_entry_name']]
   },
   {
     name: 'queryPermission',
@@ -6396,6 +6381,10 @@ export const NativeFunctions = [
     signatures: [['sync']],
     receiver: 'WebGL2RenderingContextBase'
   },
+  {
+    name: 'rename',
+    signatures: [['old_name','new_name']]
+  },
   {
     name: 'renameSync',
     signatures: [['old_name','new_name']]
@@ -6679,6 +6668,10 @@ export const NativeFunctions = [
     name: 'PictureInPictureEvent',
     signatures: [['type','eventInitDict']]
   },
+  {
+    name: 'requestPictureInPictureWindow',
+    signatures: [['options']]
+  },
   {
     name: 'refresh',
     signatures: [['?reload']]
@@ -8401,7 +8394,7 @@ export const NativeFunctions = [
   },
   {
     name: 'dispatch',
-    signatures: [['x','?y','?z']]
+    signatures: [['workgroupCountX','?workgroupCountY','?workgroupCountZ']]
   },
   {
     name: 'dispatchIndirect',
@@ -8683,6 +8676,10 @@ export const NativeFunctions = [
     name: 'USBOutTransferResult',
     signatures: [['status','?bytesWritten']]
   },
+  {
+    name: 'WindowControlsOverlayGeometryChangeEvent',
+    signatures: [['type','eventInitDict']]
+  },
   {
     name: 'getPose',
     signatures: [['relative_to']]

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -32,6 +32,10 @@ const UIStrings = {
    *@description Text in InterestGroupStorage Items View of the Application panel
   */
   groupName: 'Name',
+  /**
+   *@description Text shown instead of a table when the table would be empty.
+  */
+  noEvents: 'No interest group events recorded.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/InterestGroupAccessGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -62,13 +66,17 @@ export class InterestGroupAccessGrid extends HTMLElement {
             {iconName: 'ic_info_black_18dp', color: 'var(--color-link)', width: '14px'} as
             IconButton.Icon.IconWithName}>
         </${IconButton.Icon.Icon.litTagName}>
-        ${this.#renderGrid()}
+        ${this.#renderGridOrNoDataMessage()}
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  #renderGrid(): LitHtml.TemplateResult {
+  #renderGridOrNoDataMessage(): LitHtml.TemplateResult {
+    if (this.#datastores.length === 0) {
+      return LitHtml.html`<div class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
+    }
+
     const gridData: DataGrid.DataGridController.DataGridControllerData = {
       columns: [
         {

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -21,6 +21,6 @@ devtools-data-grid-controller {
   height: 14px;
 }
 
-.no-tt-message {
+.no-events-message {
   margin-top: 20px;
 }

package/front_end/panels/application/interestGroupStorageView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+devtools-interest-group-access-grid {
+  overflow: auto;
+}
+
 .placeholder {
   display: flex;
   align-items: center;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -116,6 +117,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private prompt: CSSPropertyPrompt|null;
   private lastComputedValue: string|null;
   private contextForTest!: Context|undefined;
+  #propertyTextFromSource: string;
 
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
@@ -145,6 +147,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.prompt = null;
 
     this.lastComputedValue = null;
+
+    this.#propertyTextFromSource = property.propertyText || '';
   }
 
   matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles {
@@ -478,7 +482,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.listItemElement.classList.remove('disabled');
     }
 
-    this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(this.property));
+    this.listItemElement.classList.toggle('changed', this.isPropertyChanged(this.property));
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -523,6 +527,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.styleTextAppliedForTest();
   }
 
+  private isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      return false;
+    }
+    // Check local cache first, then check against diffs from the workspace.
+    return this.#propertyTextFromSource !== property.propertyText || this.parentPane().isPropertyChanged(property);
+  }
+
   async onpopulate(): Promise<void> {
     // Only populate once and if this property is a shorthand.
     if (this.childCount() || !this.isShorthand) {
@@ -1481,7 +1493,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     if (updatedProperty) {
-      this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(updatedProperty));
+      this.listItemElement.classList.toggle('changed', this.isPropertyChanged(updatedProperty));
     }
 
     this.matchedStylesInternal.resetActiveProperties();

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1023,9 +1023,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      return false;
-    }
     const url = property.ownerStyle.parentRule?.resourceURL();
     if (!url) {
       return false;
@@ -1843,6 +1840,12 @@ export class StylePropertiesSection {
     this.updateRuleOrigin();
   }
 
+  protected createAtRuleLists(rule: SDK.CSSRule.CSSStyleRule): void {
+    this.createMediaList(rule.media);
+    this.createContainerQueryList(rule.containerQueries);
+    this.createSupportsList(rule.supports);
+  }
+
   protected createMediaList(mediaRules: SDK.CSSMedia.CSSMedia[]): void {
     for (let i = mediaRules.length - 1; i >= 0; --i) {
       const media = mediaRules[i];
@@ -1910,6 +1913,28 @@ export class StylePropertiesSection {
     }
   }
 
+  protected createSupportsList(supportsList: SDK.CSSSupports.CSSSupports[]): void {
+    for (let i = supportsList.length - 1; i >= 0; --i) {
+      const supports = supportsList[i];
+      if (!supports.text) {
+        continue;
+      }
+
+      let onQueryTextClick;
+      if (supports.styleSheetId) {
+        onQueryTextClick = this.handleQueryRuleClick.bind(this, supports);
+      }
+
+      const supportsElement = new ElementsComponents.CSSQuery.CSSQuery();
+      supportsElement.data = {
+        queryPrefix: '@supports',
+        queryText: supports.text,
+        onQueryTextClick,
+      };
+      this.queryListElement.append(supportsElement);
+    }
+  }
+
   private async addContainerForContainerQuery(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery): Promise<void> {
     const container = await containerQuery.getContainerForNode(this.matchedStyles.node().id);
     if (!container) {
@@ -1940,8 +1965,7 @@ export class StylePropertiesSection {
   private updateQueryList(): void {
     this.queryListElement.removeChildren();
     if (this.styleInternal.parentRule && this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this.createMediaList(this.styleInternal.parentRule.media);
-      this.createContainerQueryList(this.styleInternal.parentRule.containerQueries);
+      this.createAtRuleLists(this.styleInternal.parentRule);
     }
   }
 
@@ -2213,8 +2237,7 @@ export class StylePropertiesSection {
     event.consume(true);
   }
 
-  private handleQueryRuleClick(query: SDK.CSSMedia.CSSMedia|SDK.CSSContainerQuery.CSSContainerQuery, event: Event):
-      void {
+  private handleQueryRuleClick(query: SDK.CSSQuery.CSSQuery, event: Event): void {
     const element = event.currentTarget as Element;
     if (UI.UIUtils.isBeingEdited(element)) {
       return;
@@ -2276,8 +2299,8 @@ export class StylePropertiesSection {
   }
 
   private editingMediaCommitted(
-      query: SDK.CSSMedia.CSSMedia|SDK.CSSContainerQuery.CSSContainerQuery, element: Element, newContent: string,
-      _oldContent: string, _context: Context|undefined, _moveDirection: string): void {
+      query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
+      _context: Context|undefined, _moveDirection: string): void {
     this.parentPane.setEditingStyle(false);
     this.editingMediaFinished(element);
 
@@ -2563,8 +2586,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
         cssModel, this.parentPane.linkifier, styleSheetId, this.actualRuleLocation()));
     if (insertAfterStyle && insertAfterStyle.parentRule &&
         insertAfterStyle.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this.createMediaList(insertAfterStyle.parentRule.media);
-      this.createContainerQueryList(insertAfterStyle.parentRule.containerQueries);
+      this.createAtRuleLists(insertAfterStyle.parentRule);
     }
     this.element.classList.add('blank-section');
   }

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

@@ -12,6 +12,8 @@
 input {
   height: 12px;
   width: 12px;
+  min-height: 12px;
+  min-width: 12px;
 }
 
 label {

package/front_end/ui/components/text_editor/config.ts

@@ -188,6 +188,7 @@ function detectLineSeparator(text: string): CM.Extension {
 
 const baseKeymap = CM.keymap.of([
   {key: 'Tab', run: CM.acceptCompletion},
+  {key: 'End', run: CM.acceptCompletion},
   {key: 'Ctrl-m', run: CM.cursorMatchingBracket, shift: CM.selectMatchingBracket},
   {key: 'Mod-/', run: CM.toggleComment},
   {key: 'Mod-d', run: CM.selectNextOccurrence},

package/package.json

@@ -39,6 +39,7 @@
     "debug-unittest": "DEBUG_TEST=1 npm run unittest",
     "e2etest": "third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/e2e/test-runner-config.json",
     "eslint-test": "third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/eslint_rules/tests/*_test.js\"",
+    "build-test": "third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/build/tests/*_test.js\"",
     "generate-dark-mode-styles": "third_party/node/node.py --output scripts/dark_mode/generate_dark_theme_sheet.js",
     "generate-protocol-resources": "scripts/deps/generate_protocol_resources.py && git cl format --js",
     "install-deps": "scripts/deps/manage_node_deps.py",
@@ -53,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.966659"
+  "version": "1.0.967728"
 }

package/scripts/build/esbuild.js

@@ -27,16 +27,17 @@ const plugin = {
         return null;
       }
 
-      if (res.external && res.id) {
-        return {
-          external: res.external,
-          path: './' + path.relative(outdir, res.id),
-        };
-      }
-
       if (res.external) {
+        // res.id can be both of absolutized local JavaScript path or node's
+        // builtin module (e.g. 'fs', 'path'), and only relativize the path in
+        // former case.
+        if (path.isAbsolute(res.id)) {
+          res.id = './' + path.relative(outdir, res.id);
+        }
+
         return {
-          external: true,
+          external: res.external,
+          path: res.id,
         };
       }
 

package/scripts/build/tests/plugins_test.js

@@ -0,0 +1,30 @@
+// 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.
+
+const {assert} = require('chai');
+const path = require('path');
+
+const {devtoolsPlugin} = require('../devtools_plugin.js');
+
+describe('devtools_plugin can compute paths with', () => {
+  it('same directory import', () => {
+    assert.deepEqual(
+        devtoolsPlugin('./AnotherFile.js', 'front_end/core/sdk/FirstFile.js'),
+        {id: path.join('front_end', 'core', 'sdk', 'AnotherFile.js'), external: false});
+  });
+
+  it('different directory import', () => {
+    assert.deepEqual(
+        devtoolsPlugin('../common/common.js', 'front_end/core/sdk/FirstFile.js'),
+        {id: path.join('front_end', 'core', 'common', 'common.js'), external: true});
+  });
+
+  it('node built-in modules', () => {
+    assert.deepEqual(devtoolsPlugin('fs', 'scripts/some-script.js'), {id: 'fs', external: true});
+  });
+
+  it('importing generated files', () => {
+    assert.strictEqual(devtoolsPlugin('../../generated/Protocol.js', 'front_end/core/sdk/FirstFile.js'), null);
+  });
+});