chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -89,6 +90,14 @@ const UIStrings = {
    * @description Explanation text for the 'Highlight ads' setting.
    */
   highlightsElementsRedDetectedToBe: 'Highlights elements (red) detected to be ads.',
+  /**
+   * @description Text explaining that ad detection is not perfect.
+   */
+  adDetectionMistakes: 'Chrome’s ad detection can make mistakes.',
+  /**
+   * @description Link text for learning more about ad detection in Chrome.
+   */
+  learnMore: 'Learn more',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/AdsView.ts', UIStrings);
@@ -203,6 +212,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           </dd>
         </div>
       </dl>
+      <hr class="divider">
       <div class="ad-frames-title">${i18nString(UIStrings.adIframesTitle, {PH1: input.adFrames.length})}</div>
       <div class="ad-frames-container">
         <devtools-data-grid striped resize="last" class="ad-frames-data-grid" name=${i18nString(UIStrings.adIframes)}>
@@ -232,14 +242,27 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           </table>
         </devtools-data-grid>
       </div>
+      <hr class="divider">
       <div class="settings-title">${i18nString(UIStrings.settings)}</div>
-      <devtools-checkbox class="setting-container"
+      <devtools-checkbox class="setting-container small"
           ${bindToSetting(Common.Settings.Settings.instance().moduleSetting('show-ad-highlights'))}>
         <div class="setting-text-container">
           <div class="setting-label">${i18nString(UIStrings.highlightAds)}</div>
           <div class="setting-explanation">${i18nString(UIStrings.highlightsElementsRedDetectedToBe)}</div>
         </div>
       </devtools-checkbox>
+      <hr class="divider">
+      <div class="footer-text">
+        <devtools-icon class="inline-icon" name="info"></devtools-icon>
+        &#32;
+        <span>
+          ${i18nString(UIStrings.adDetectionMistakes)}
+          &#32;
+          <devtools-link class="link devtools-link" href="https://chromium.googlesource.com/chromium/src/+/main/docs/ad_tagging.md" jslogcontext="learn-more">
+            ${i18nString(UIStrings.learnMore)}
+          </devtools-link>
+        </span>
+      </div>
     </div>
   `, target);
   // clang-format on

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

@@ -5,7 +5,7 @@
  */
 
 :host {
-  padding: 12px;
+  padding: var(--sys-size-6);
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -19,17 +19,17 @@
 
 .metrics-container {
   flex: 0 0 auto;
-  margin: 0 0 24px;
+  margin: 0;
   border: 1px solid var(--sys-color-divider);
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1px;
+  gap: var(--sys-size-1);
   background-color: var(--sys-color-divider);
 }
 
 .metric-box {
   background-color: var(--sys-color-surface);
-  padding: 12px;
+  padding: var(--sys-size-6);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -37,24 +37,24 @@
 }
 
 .metric-title {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface-subtle);
-  margin: 0 0 4px;
+  margin: 0 0 var(--sys-size-3);
 }
 
 .metric-value {
-  font-size: 18px;
+  font-size: var(--sys-typescale-headline3-size);
   font-weight: bold;
   color: var(--sys-color-on-surface);
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0;
-  gap: 2px;
+  gap: var(--sys-size-2);
 }
 
 .metric-average {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   font-weight: normal;
   color: var(--sys-color-on-surface-subtle);
 }
@@ -65,7 +65,7 @@
   color: var(--sys-color-on-surface);
   flex: 0 0 auto;
   font-weight: bold;
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .ad-frames-data-grid {
@@ -75,22 +75,18 @@
 .ad-frames-container {
   border: 1px solid var(--sys-color-divider);
   display: flex;
-  flex: auto;
+  flex: 1; /* Takes up remaining space */
   flex-direction: column;
-  margin-bottom: 24px;
-  height: 300px;
-  min-height: 150px;
+  margin-bottom: 0;
+  min-height: var(--sys-size-22); /* 144px */
   position: relative;
-  resize: vertical;
   overflow: hidden;
 }
 
-devtools-checkbox.setting-container {
-  /*
-   * Apply negative margins here to offset the default devtools-checkbox style
-   * to align this component with the rest of the Ads panel layout.
-   */
-  margin: 0 0 -6px -6px;
+.divider {
+  border: none;
+  border-top: 1px solid var(--sys-color-divider);
+  margin: var(--sys-size-8) 0 var(--sys-size-6);
 }
 
 .setting-text-container {
@@ -103,3 +99,13 @@ devtools-checkbox.setting-container {
   white-space: break-spaces;
   margin-top: 0;
 }
+
+.footer-text {
+  margin-bottom: var(--sys-size-6);
+}
+
+.inline-icon {
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+  vertical-align: text-bottom;
+}

package/front_end/panels/autofill/AutofillView.ts

@@ -29,30 +29,30 @@ const UIStrings = {
    */
   noAutofill: 'No autofill detected',
   /**
-   * @description Explanation for how to populate the autofill panel with data. Shown when there is
+   * @description Explanation for how to populate the Autofill panel with data. Shown when there is
    * no data available.
    */
-  toStartDebugging: 'To start debugging autofill, use Chrome’s autofill menu to fill an address form.',
+  toStartDebugging: 'To start debugging autofill, use Chrome’s autofill menu to fill an address form',
   /**
-   * @description Column header for column containing form field values
+   * @description Column header for column containing form field values.
    */
   value: 'Value',
   /**
-   * @description Column header for column containing the predicted autofill categories
+   * @description Column header for column containing the predicted autofill categories.
    */
   predictedAutofillValue: 'Predicted autofill value',
   /**
-   * @description Column header for column containing the name/label/id of form fields
+   * @description Column header for column containing the name/label/id of form fields.
    */
   formField: 'Form field',
   /**
    * @description Tooltip for an adorner for form fields which have an autocomplete attribute
-   * (http://go/mdn/HTML/Attributes/autocomplete)
+   * (http://go/mdn/HTML/Attributes/autocomplete).
    */
   autocompleteAttribute: 'Autocomplete attribute',
   /**
    * @description Abbreviation of 'attribute'. Text content of an adorner for form fields which
-   * have an autocomplete attribute (http://go/mdn/HTML/Attributes/autocomplete)
+   * have an autocomplete attribute (http://go/mdn/HTML/Attributes/autocomplete).
    */
   attr: 'attr',
   /**
@@ -80,21 +80,21 @@ const UIStrings = {
    * @description Tooltip text for a checkbox label in the Autofill panel. If checked, this panel
    * will open automatically whenever a form is being autofilled.
    */
-  autoShowTooltip: 'Open the autofill panel automatically when an autofill activity is detected.',
+  autoShowTooltip: 'Open the Autofill panel automatically when an autofill activity is detected',
   /**
-   * @description Aria text for the section of the autofill view containing a preview of the autofilled address.
+   * @description Aria text for the section of the Autofill view containing a preview of the autofilled address.
    */
   addressPreview: 'Address preview',
   /**
-   * @description Aria text for the section of the autofill view containing the info about the autofilled form fields.
+   * @description Aria text for the section of the Autofill view containing the info about the autofilled form fields.
    */
   formInspector: 'Form inspector',
   /**
-   * @description Link text for a hyperlink to more documentation
+   * @description Link text for a hyperlink to more documentation.
    */
   learnMore: 'Learn more',
   /**
-   * @description Link text for a hyperlink to webpage for leaving user feedback
+   * @description Link text for a hyperlink to webpage for leaving user feedback.
    */
   sendFeedback: 'Send feedback',
 } as const;

package/front_end/panels/autofill/autofill-meta.ts

@@ -9,11 +9,11 @@ import type * as Autofill from './autofill.js';
 
 const UIStrings = {
   /**
-   * @description Label for the autofill pane
+   * @description Label for the Autofill panel.
    */
   autofill: 'Autofill',
   /**
-   * @description Command for showing the 'Autofill' pane
+   * @description Command for showing the Autofill panel.
    */
   showAutofill: 'Show Autofill',
 } as const;

package/front_end/panels/common/ExtensionServer.ts

@@ -951,7 +951,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   /**
    * Slightly more permissive as {@link extensionAllowedOnURL}: This method also permits
    * UISourceCodes that originate from a {@link SDK.Script.Script} with a sourceURL magic comment as
-   * long as the corresponding target is permitted.
+   * long as the corresponding target and the embedder name (if it is a URL) are permitted.
    */
   private extensionAllowedOnContentProvider(
       contentProvider: TextUtils.ContentProvider.ContentProvider, port: MessagePort): boolean {
@@ -968,6 +968,12 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         }
         return scripts.every(script => {
           if (script.hasSourceURL) {
+            // TODO(542925220): embedderName is a terrible proxy, but currently V8 stores the original URL only in there.
+            // We'll add a proper field in the future and will replace it then.
+            const embedderName = script.embedderName();
+            if (embedderName && URL.canParse(embedderName) && !this.extensionAllowedOnURL(embedderName, port)) {
+              return false;
+            }
             return this.extensionAllowedOnTarget(script.target(), port);
           }
           return this.extensionAllowedOnURL(script.contentURL(), port) &&

package/front_end/panels/common/common.ts

@@ -109,5 +109,4 @@ export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
-export * as ThrottlingUtils from './ThrottlingUtils.js';
 export * as ExtensionIframe from './ExtensionView.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -437,10 +437,12 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  #getConsoleInsightsEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
-    const result = Common.Settings.Settings.instance().maybeResolve(
-        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor);
-    return 'setting' in result ? (result.setting as Common.Settings.Setting<boolean>) : undefined;
+  #getConsoleInsightsEnabledSetting(): AiAssistanceModel.AiSetting.AiSetting<boolean> {
+    return new AiAssistanceModel.AiSetting.AiSetting(
+        AiAssistanceModel.AiUtils.consoleInsightsEnabledSettingDescriptor,
+        Host.AidaClient.HostConfigTracker.instance(),
+        Common.Settings.Settings.instance(),
+    );
   }
 
   #getOnboardingCompletedSetting(): Common.Settings.Setting<boolean> {
@@ -466,8 +468,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
 
   #onTellMeMoreClick(event: Event): void {
     event.stopPropagation();
-    if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() &&
-        this.#getOnboardingCompletedSetting()?.getIfNotDisabled()) {
+    if (this.#getConsoleInsightsEnabledSetting()?.getIfNotDisabled() && this.#getOnboardingCompletedSetting()?.get()) {
       this.#executeConsoleInsightAction();
       return;
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1539,7 +1539,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (!this.shouldShowInsights()) {
       return false;
     }
-    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
+    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get() ||
         !AiAssistanceModel.BuiltInAi.BuiltInAi.instance().isEventuallyAvailable()) {
       return false;
     }

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -342,8 +342,8 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
     return [...completions];
   }
 
-  private async buildClassNameCompletions(expression: string, prefix: string, force?: boolean):
-      Promise<UI.SuggestBox.Suggestions> {
+  private async buildClassNameCompletions(expression: string, prefix: string,
+                                          force?: boolean): Promise<UI.SuggestBox.Suggestions> {
     if (!prefix || force) {
       this.classNamesPromise = null;
     }