chrome-devtools-frontend 1.0.967135 → 1.0.967596

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/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/StylesSidebarPane.ts

@@ -1840,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];
@@ -1907,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) {
@@ -1937,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);
     }
   }
 
@@ -2210,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;
@@ -2273,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);
 
@@ -2560,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/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.967135"
+  "version": "1.0.967596"
 }

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);
+  });
+});