chrome-devtools-frontend 1.0.1674545 → 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;