npm - chrome-devtools-frontend - Versions diffs - 1.0.933401 → 1.0.934332 - Mend

chrome-devtools-frontend 1.0.933401 → 1.0.934332

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/config/gni/devtools_grd_files.gni CHANGED Viewed

@@ -430,6 +430,7 @@ grd_files_release_sources = [
   "front_end/panels/security/security_module.js",
   "front_end/panels/sensors/sensors-meta.js",
   "front_end/panels/sensors/sensors.js",
+  "front_end/panels/settings/components/components.js",
   "front_end/panels/settings/emulation/components/components.js",
   "front_end/panels/settings/emulation/emulation-meta.js",
   "front_end/panels/settings/emulation/emulation.js",
@@ -1186,6 +1187,8 @@ grd_files_debug_sources = [
   "front_end/panels/settings/FrameworkIgnoreListSettingsTab.js",
   "front_end/panels/settings/KeybindsSettingsTab.js",
   "front_end/panels/settings/SettingsScreen.js",
+  "front_end/panels/settings/components/SyncSection.js",
+  "front_end/panels/settings/components/syncSection.css.js",
   "front_end/panels/settings/emulation/DevicesSettingsTab.js",
   "front_end/panels/settings/emulation/components/UserAgentClientHintsForm.js",
   "front_end/panels/settings/emulation/components/userAgentClientHintsForm.css.js",

package/front_end/core/host/InspectorFrontendHostAPI.ts CHANGED Viewed

@@ -330,7 +330,7 @@ export interface SyncInformation {
   /** Whether Chrome Sync is enabled and active */
   isSyncActive: boolean;
   /** Whether syncing of Chrome Settings is enabled via Chrome Sync is enabled */
-  arePreferencesSynced: boolean;
+  arePreferencesSynced?: boolean;
   /** The email of the account used for syncing */
   accountEmail?: string;
   /** The image of the account used for syncing. Its a base64 encoded PNG */

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

@@ -2678,6 +2678,9 @@
   "panels/application/BackForwardCacheView.ts | circumstantial": {
     "message": "Not Actionable"
   },
+  "panels/application/BackForwardCacheView.ts | circumstantialExplanation": {
+    "message": "These reasons are not actionable i.e. caching was prevented by something outside of the direct control of the page."
+  },
   "panels/application/BackForwardCacheView.ts | lastMainFrameNavigation": {
     "message": "Last Main Frame Navigation"
   },
@@ -2690,12 +2693,18 @@
   "panels/application/BackForwardCacheView.ts | pageSupportNeeded": {
     "message": "Actionable"
   },
+  "panels/application/BackForwardCacheView.ts | pageSupportNeededExplanation": {
+    "message": "These reasons are actionable i.e. they can be cleaned up to make the page eligible for back-forward cache."
+  },
   "panels/application/BackForwardCacheView.ts | restoredFromBFCache": {
     "message": "Restored from back-forward cache"
   },
   "panels/application/BackForwardCacheView.ts | supportPending": {
     "message": "Pending Support"
   },
+  "panels/application/BackForwardCacheView.ts | supportPendingExplanation": {
+    "message": "Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back-forward cache in a future version of Chrome."
+  },
   "panels/application/BackForwardCacheView.ts | unavailable": {
     "message": "unavailable"
   },
@@ -8756,6 +8765,18 @@
   "panels/sensors/SensorsView.ts | timezoneId": {
     "message": "Timezone ID"
   },
+  "panels/settings/components/SyncSection.ts | preferencesSyncDisabled": {
+    "message": "To turn this setting on, you must first enable settings sync in Chrome."
+  },
+  "panels/settings/components/SyncSection.ts | settings": {
+    "message": "Go to Settings"
+  },
+  "panels/settings/components/SyncSection.ts | signedIn": {
+    "message": "Signed into Chrome as:"
+  },
+  "panels/settings/components/SyncSection.ts | syncDisabled": {
+    "message": "To turn this setting on, you must enable Chrome sync."
+  },
   "panels/settings/emulation/components/UserAgentClientHintsForm.ts | addBrand": {
     "message": "Add Brand"
   },

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

@@ -2678,6 +2678,9 @@
   "panels/application/BackForwardCacheView.ts | circumstantial": {
     "message": "N̂ót̂ Áĉt́îón̂áb̂ĺê"
   },
+  "panels/application/BackForwardCacheView.ts | circumstantialExplanation": {
+    "message": "T̂h́êśê ŕêáŝón̂ś âŕê ńôt́ âćt̂íôńâb́l̂é î.é. ĉáĉh́îńĝ ẃâś p̂ŕêv́êńt̂éd̂ b́ŷ śôḿêt́ĥín̂ǵ ôút̂śîd́ê óf̂ t́ĥé d̂ír̂éĉt́ ĉón̂t́r̂ól̂ óf̂ t́ĥé p̂áĝé."
+  },
   "panels/application/BackForwardCacheView.ts | lastMainFrameNavigation": {
     "message": "L̂áŝt́ M̂áîń F̂ŕâḿê Ńâv́îǵât́îón̂"
   },
@@ -2690,12 +2693,18 @@
   "panels/application/BackForwardCacheView.ts | pageSupportNeeded": {
     "message": "Âćt̂íôńâb́l̂é"
   },
+  "panels/application/BackForwardCacheView.ts | pageSupportNeededExplanation": {
+    "message": "T̂h́êśê ŕêáŝón̂ś âŕê áĉt́îón̂áb̂ĺê í.ê. t́ĥéŷ ćâń b̂é ĉĺêán̂éd̂ úp̂ t́ô ḿâḱê t́ĥé p̂áĝé êĺîǵîb́l̂é f̂ór̂ b́âćk̂-f́ôŕŵár̂d́ ĉáĉh́ê."
+  },
   "panels/application/BackForwardCacheView.ts | restoredFromBFCache": {
     "message": "R̂éŝt́ôŕêd́ f̂ŕôḿ b̂áĉḱ-f̂ór̂ẃâŕd̂ ćâćĥé"
   },
   "panels/application/BackForwardCacheView.ts | supportPending": {
     "message": "P̂én̂d́îńĝ Śûṕp̂ór̂t́"
   },
+  "panels/application/BackForwardCacheView.ts | supportPendingExplanation": {
+    "message": "Ĉh́r̂óm̂é ŝúp̂ṕôŕt̂ f́ôŕ t̂h́êśê ŕêáŝón̂ś îś p̂én̂d́îńĝ í.ê. t́ĥéŷ ẃîĺl̂ ńôt́ p̂ŕêv́êńt̂ t́ĥé p̂áĝé f̂ŕôḿ b̂éîńĝ él̂íĝíb̂ĺê f́ôŕ b̂áĉḱ-f̂ór̂ẃâŕd̂ ćâćĥé îń â f́ût́ûŕê v́êŕŝíôń ôf́ Ĉh́r̂óm̂é."
+  },
   "panels/application/BackForwardCacheView.ts | unavailable": {
     "message": "ûńâv́âíl̂áb̂ĺê"
   },
@@ -8756,6 +8765,18 @@
   "panels/sensors/SensorsView.ts | timezoneId": {
     "message": "T̂ím̂éẑón̂é ÎD́"
   },
+  "panels/settings/components/SyncSection.ts | preferencesSyncDisabled": {
+    "message": "T̂ó t̂úr̂ń t̂h́îś ŝét̂t́îńĝ ón̂, ýôú m̂úŝt́ f̂ír̂śt̂ én̂áb̂ĺê śêt́t̂ín̂ǵŝ śŷńĉ ín̂ Ćĥŕôḿê."
+  },
+  "panels/settings/components/SyncSection.ts | settings": {
+    "message": "Ĝó t̂ó Ŝét̂t́îńĝś"
+  },
+  "panels/settings/components/SyncSection.ts | signedIn": {
+    "message": "Ŝíĝńêd́ îńt̂ó Ĉh́r̂óm̂é âś:"
+  },
+  "panels/settings/components/SyncSection.ts | syncDisabled": {
+    "message": "T̂ó t̂úr̂ń t̂h́îś ŝét̂t́îńĝ ón̂, ýôú m̂úŝt́ êńâb́l̂é Ĉh́r̂óm̂é ŝýn̂ć."
+  },
   "panels/settings/emulation/components/UserAgentClientHintsForm.ts | addBrand": {
     "message": "Âd́d̂ B́r̂án̂d́"
   },

package/front_end/core/platform/string-utilities.ts CHANGED Viewed

@@ -240,9 +240,9 @@ const escapedReplacements = new Map([
   ['\v', '\\v'],
   ['\'', '\\\''],
   ['\\', '\\\\'],
-  ['<!--', '<\\!--'],
-  ['<script', '<\\script'],
-  ['</script', '<\\/script'],
+  ['<!--', '\\x3C!--'],
+  ['<script', '\\x3Cscript'],
+  ['</script', '\\x3C/script'],
 ]);
 export const formatAsJSLiteral = (content: string): string => {

package/front_end/core/sdk/ChildTargetManager.ts CHANGED Viewed

@@ -118,14 +118,14 @@ export class ChildTargetManager extends SDKModel<EventTypes> implements Protocol
     let targetName = '';
     if (targetInfo.type === 'worker' && targetInfo.title && targetInfo.title !== targetInfo.url) {
       targetName = targetInfo.title;
-    } else if (targetInfo.type !== 'iframe') {
+    } else if (targetInfo.type !== 'iframe' && targetInfo.type !== 'webview') {
       const parsedURL = Common.ParsedURL.ParsedURL.fromString(targetInfo.url);
       targetName =
           parsedURL ? parsedURL.lastPathComponentWithFragment() : '#' + (++ChildTargetManager.lastAnonymousTargetId);
     }
     let type = Type.Browser;
-    if (targetInfo.type === 'iframe') {
+    if (targetInfo.type === 'iframe' || targetInfo.type === 'webview') {
       type = Type.Frame;
     }
     // TODO(lfg): ensure proper capabilities for child pages (e.g. portals).

package/front_end/core/sdk/DOMModel.ts CHANGED Viewed

@@ -159,14 +159,14 @@ export class DOMNode {
       this.childrenInternal = [];
     }
+    const frameOwnerTags = ['IFRAME', 'PORTAL', 'EMBED', 'OBJECT'];
     if (payload.contentDocument) {
       this.contentDocumentInternal = new DOMDocument(this.#domModelInternal, payload.contentDocument);
       this.contentDocumentInternal.parentNode = this;
       this.childrenInternal = [];
-    } else if ((payload.nodeName === 'IFRAME' || payload.nodeName === 'PORTAL') && payload.frameId) {
+    } else if (payload.frameId && frameOwnerTags.includes(payload.nodeName)) {
       // At this point we know we are in an OOPIF, otherwise #payload.contentDocument would have been set.
-      this.childDocumentPromiseForTesting =
-          this.createChildDocumentPromiseForTesting(payload.frameId, this.#domModelInternal.target());
+      this.childDocumentPromiseForTesting = this.requestChildDocument(payload.frameId, this.#domModelInternal.target());
       this.childrenInternal = [];
     }
@@ -205,14 +205,10 @@ export class DOMNode {
     }
   }
-  private async createChildDocumentPromiseForTesting(frameId: Protocol.Page.FrameId, notInTarget: Target):
-      Promise<DOMDocument|null> {
+  private async requestChildDocument(frameId: Protocol.Page.FrameId, notInTarget: Target): Promise<DOMDocument|null> {
     const frame = await FrameManager.instance().getOrWaitForFrame(frameId, notInTarget);
     const childModel = frame.resourceTreeModel()?.target().model(DOMModel);
-    if (childModel) {
-      return childModel.requestDocument();
-    }
-    return null;
+    return childModel?.requestDocument() || null;
   }
   isAdFrameNode(): boolean {

package/front_end/panels/animation/animationTimeline.css CHANGED Viewed

@@ -399,12 +399,12 @@ text.animation-timeline-grid-label {
 }
 .animation-playback-rate-button {
-  border: 1px solid var(--color-details-hairline);
+  border: 1px solid var(--color-button-secondary-border);
   color: var(--color-text-primary);
   display: inline-block;
   margin-right: -1px;
   padding: 1px 4px;
-  background: var(--color-background);
+  background-color: transparent;
   flex: 1 0 auto;
   text-align: center;
   cursor: pointer;
@@ -419,9 +419,9 @@ text.animation-timeline-grid-label {
 }
 .animation-playback-rate-button.selected {
-  color: var(--legacy-selection-fg-color);
-  background-color: var(--legacy-selection-bg-color);
-  border-color: var(--legacy-selection-bg-color);
+  color: var(--color-button-primary-text);
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
   z-index: 1;
 }

package/front_end/panels/application/BackForwardCacheView.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as ReportView from '../../ui/components/report_view/report_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -53,21 +54,41 @@ const UIStrings = {
    */
   restoredFromBFCache: 'Restored from back-forward cache',
   /**
-   * @description Category text for the reasons which need to be cleaned up on the websites in
-   * order to make the page eligible for the back-forward cache.
+   * @description Label for a list of reasons which prevent the page from being eligible for
+   * back-forward cache. These reasons are actionable i.e. they can be cleaned up to make the
+   * page eligible for back-forward cache.
    */
   pageSupportNeeded: 'Actionable',
   /**
-   * @description Category text for the reasons which are circumstantial and cannot be addressed
-   * by developers.
+   * @description Explanation for actionable items which prevent the page from being eligible
+   * for back-forward cache.
+   */
+  pageSupportNeededExplanation:
+      'These reasons are actionable i.e. they can be cleaned up to make the page eligible for back-forward cache.',
+  /**
+   * @description Label for a list of reasons which prevent the page from being eligible for
+   * back-forward cache. These reasons are circumstantial / not actionable i.e. they cannot be
+   * cleaned up by developers to make the page eligible for back-forward cache.
    */
   circumstantial: 'Not Actionable',
   /**
-   * @description Explanation text appended to a reason why the usage of the back-forward cache
-   * is not possible, if in a future version of Chrome this reason will not prevent the usage
-   * of the back-forward cache anymore.
+   * @description Explanation for circumstantial/non-actionable items which prevent the page from being eligible
+   * for back-forward cache.
+   */
+  circumstantialExplanation:
+      'These reasons are not actionable i.e. caching was prevented by something outside of the direct control of the page.',
+  /**
+   * @description Label for a list of reasons which prevent the page from being eligible for
+   * back-forward cache. These reasons are pending support by chrome i.e. in a future version
+   * of chrome they will not prevent back-forward cache usage anymore.
    */
   supportPending: 'Pending Support',
+  /**
+   * @description Explanation for 'pending support' items which prevent the page from being eligible
+   * for back-forward cache.
+   */
+  supportPendingExplanation:
+      'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back-forward cache in a future version of Chrome.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -160,25 +181,35 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return LitHtml.html`
-      ${this.renderExplanations(UIStrings.pageSupportNeeded, pageSupportNeeded)}
-      ${this.renderExplanations(UIStrings.supportPending, supportPending)}
-      ${this.renderExplanations(UIStrings.circumstantial, circumstantial)}
+      ${this.renderExplanations(i18nString(UIStrings.pageSupportNeeded), i18nString(UIStrings.pageSupportNeededExplanation), pageSupportNeeded)}
+      ${this.renderExplanations(i18nString(UIStrings.supportPending), i18nString(UIStrings.supportPendingExplanation), supportPending)}
+      ${this.renderExplanations(i18nString(UIStrings.circumstantial), i18nString(UIStrings.circumstantialExplanation), circumstantial)}
     `;
     // clang-format on
   }
-  private renderExplanations(category: string, explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]):
-      LitHtml.TemplateResult {
+  private renderExplanations(
+      category: Platform.UIString.LocalizedString, explainerText: Platform.UIString.LocalizedString,
+      explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]): LitHtml.TemplateResult {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return LitHtml.html`
-      ${
-        explanations.length > 0 ? LitHtml.html`
-          <${ReportView.ReportView.ReportKey.litTagName}>${category}</${ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName}>
+      ${explanations.length > 0 ? LitHtml.html`
+        <${ReportView.ReportView.ReportKey.litTagName}>
+          ${category}
+          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+            iconName: 'help_outline',
+            color: 'var(--color-text-secondary)',
+            width: '16px',
+            height: '16px',
+            } as IconButton.Icon.IconData} title=${explainerText}></${IconButton.Icon.Icon.litTagName}>
+        </${ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportValue.litTagName}>
           <ul class='not-restored-reason-list'>${explanations.map(explanation => this.renderReason(explanation))}</ul>
-          </${ReportView.ReportView.ReportValue.litTagName}>
-        ` :
-                                  LitHtml.nothing}
+        </${ReportView.ReportView.ReportValue.litTagName}>
+      ` : LitHtml.nothing}
     `;
+    // clang-format on
   }
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {

package/front_end/panels/application/backForwardCacheView.css CHANGED Viewed

@@ -8,3 +8,7 @@
   list-style-type: none;
   padding-inline-start: 0;
 }
+.inline-icon {
+  vertical-align: sub;
+}

package/front_end/panels/console/ConsoleContextSelector.ts CHANGED Viewed

@@ -254,7 +254,7 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
   }
   itemSelected(item: SDK.RuntimeModel.ExecutionContext|null): void {
-    this.toolbarItemInternal.element.classList.toggle('warning', !this.isTopContext(item) && this.hasTopContext());
+    this.toolbarItemInternal.element.classList.toggle('highlight', !this.isTopContext(item) && this.hasTopContext());
     const title = item ? i18nString(UIStrings.javascriptContextS, {PH1: this.titleFor(item)}) :
                          i18nString(UIStrings.javascriptContextNotSelected);
     this.toolbarItemInternal.setTitle(title);

package/front_end/panels/console/ConsoleViewMessage.ts CHANGED Viewed

@@ -1650,9 +1650,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const suffix = `${line.substring(link.positionRight)}${newline}`;
       formattedLine.appendChild(this.linkifyStringAsFragment(prefix));
-      const scriptLocationLink = this.linkifier.linkifyScriptLocation(
-          debuggerModel.target(), null, link.url, link.lineNumber,
-          {columnNumber: link.columnNumber, className: undefined, tabStop: undefined, inlineFrameIndex: 0});
+      const scriptLocationLink =
+          this.linkifier.linkifyScriptLocation(debuggerModel.target(), null, link.url, link.lineNumber, {
+            columnNumber: link.columnNumber,
+            className: undefined,
+            tabStop: undefined,
+            inlineFrameIndex: 0,
+            showColumnNumber: true,
+          });
       scriptLocationLink.tabIndex = -1;
       this.selectableChildren.push({element: scriptLocationLink, forceSelect: (): void => scriptLocationLink.focus()});
       formattedLine.appendChild(scriptLocationLink);

package/front_end/panels/elements/components/adornerSettingsPane.css CHANGED Viewed

@@ -65,3 +65,7 @@
 .close::after {
   transform: rotate(-45deg);
 }
+:host-context(.-theme-with-dark-background) input[type="checkbox"] {
+  filter: invert(80%);
+}

package/front_end/panels/help/releaseNote.css CHANGED Viewed

@@ -45,7 +45,7 @@
 }
 .release-note-container .release-note-link {
-  border: 1px solid var(--color-details-hairline);
+  border: 1px solid var(--color-details-hairline-light);
   padding-left: 8px;
   padding-right: 8px;
   margin-bottom: 4px;
@@ -53,7 +53,7 @@
 }
 .release-note-container .release-note-link:hover {
-  box-shadow: 0 0 0 1px var(--box-shadow-outline-color) inset;
+  border-color: var(--color-details-hairline);
 }
 .release-note-title,

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts CHANGED Viewed

@@ -51,11 +51,6 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
     if (!container) {
       return;
     }
-    const disclaimerEl = container.querySelector('.lh-metrics__disclaimer');
-    // If it was a PWA-only run, we'd have a trace but no perf category to add the button to
-    if (!disclaimerEl) {
-      return;
-    }
     const defaultPassTrace = artifacts.traces.defaultPass;
     const text = simulated ? i18nString(UIStrings.viewOriginalTrace) : i18nString(UIStrings.viewTrace);

package/front_end/panels/sensors/sensors.css CHANGED Viewed

@@ -293,7 +293,7 @@ fieldset.device-orientation-override-section {
 }
 button.text-button {
-  margin: 0 10px;
+  margin: 4px 0 0 10px;
 }
 @media (forced-colors: active) {

package/front_end/panels/settings/SettingsScreen.ts CHANGED Viewed

@@ -35,6 +35,7 @@ import * as Root from '../../core/root/root.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as PanelComponents from './components/components.js';
 import settingsScreenStyles from './settingsScreen.css.js';
@@ -260,6 +261,8 @@ class SettingsTab extends UI.Widget.VBox {
 let genericSettingsTabInstance: GenericSettingsTab;
 export class GenericSettingsTab extends SettingsTab {
+  private readonly syncSection: PanelComponents.SyncSection.SyncSection = new PanelComponents.SyncSection.SyncSection();
   constructor() {
     super(i18nString(UIStrings.preferences), 'preferences-tab-content');
@@ -301,13 +304,7 @@ export class GenericSettingsTab extends SettingsTab {
     for (const sectionCategory of explicitSectionOrder) {
       const settingsForSection = preRegisteredSettings.filter(
           setting => setting.category === sectionCategory && GenericSettingsTab.isSettingVisible(setting));
-      // Always create the EXTENSIONS section and append the link handling control.
-      if (sectionCategory === Common.Settings.SettingCategory.EXTENSIONS) {
-        this.createExtensionSection(settingsForSection);
-      } else if (settingsForSection.length > 0) {
-        this.createSectionElement(sectionCategory, settingsForSection);
-      }
+      this.createSectionElement(sectionCategory, settingsForSection);
     }
     this.appendSection().appendChild(
@@ -335,17 +332,43 @@ export class GenericSettingsTab extends SettingsTab {
     return Boolean(title && setting.category);
   }
+  override wasShown(): void {
+    super.wasShown();
+    this.updateSyncSection();
+  }
+  private updateSyncSection(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(syncInfo => {
+      this.syncSection.data = {
+        syncInfo,
+        syncSetting: Common.Settings.moduleSetting('sync_preferences') as Common.Settings.Setting<boolean>,
+      };
+    });
+  }
   private createExtensionSection(settings: Common.Settings.SettingRegistration[]): void {
     const sectionName = Common.Settings.SettingCategory.EXTENSIONS;
     const settingUI = Components.Linkifier.LinkHandlerSettingUI.instance() as UI.SettingsUI.SettingUI;
     const element = settingUI.settingElement();
     if (element) {
-      const sectionElement = this.createSectionElement(sectionName, settings);
+      const sectionElement = this.createStandardSectionElement(sectionName, settings);
       sectionElement.appendChild(element);
     }
   }
   private createSectionElement(
+      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[]): void {
+    // Always create the EXTENSIONS section and append the link handling control.
+    if (category === Common.Settings.SettingCategory.EXTENSIONS) {
+      this.createExtensionSection(settings);
+    } else if (category === Common.Settings.SettingCategory.SYNC && settings.length > 0) {
+      this.containerElement.appendChild(this.syncSection);
+    } else if (settings.length > 0) {
+      this.createStandardSectionElement(category, settings);
+    }
+  }
+  private createStandardSectionElement(
       category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[]): Element {
     const uiSectionName = Common.Settings.getLocalizedSettingsCategory(category);
     const sectionElement = this.appendSection(uiSectionName);

package/front_end/panels/settings/components/SyncSection.ts ADDED Viewed

@@ -0,0 +1,118 @@
+// Copyright 2021 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 Common from '../../../core/common/common.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import type * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Settings from '../../../ui/components/settings/settings.js';
+import syncSectionStyles from './syncSection.css.js';
+const UIStrings = {
+  /**
+   * @description Text shown to the user in the Settings UI. 'This setting' refers
+   * to a checkbox that is disabled.
+   */
+  syncDisabled: 'To turn this setting on, you must enable Chrome sync.',
+  /**
+   * @description Text shown to the user in the Settings UI. 'This setting' refers
+   * to a checkbox that is disabled.
+   */
+  preferencesSyncDisabled: 'To turn this setting on, you must first enable settings sync in Chrome.',
+  /**
+   * @description Label for a link that take the user to the "Sync" section of the
+   * chrome settings. The link is shown in the DevTools Settings UI.
+   */
+  settings: 'Go to Settings',
+  /**
+   * @description Label for the account email address. Shown in the DevTools Settings UI in
+   * front of the email address currently used for Chrome Sync.
+   */
+  signedIn: 'Signed into Chrome as:',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/settings/components/SyncSection.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export interface SyncSectionData {
+  syncInfo: Host.InspectorFrontendHostAPI.SyncInformation;
+  syncSetting: Common.Settings.Setting<boolean>;
+}
+export class SyncSection extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-sync-section`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  private syncInfo: Host.InspectorFrontendHostAPI.SyncInformation = {isSyncActive: false};
+  private syncSetting?: Common.Settings.Setting<boolean>;
+  private boundRender = this.render.bind(this);
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [syncSectionStyles];
+  }
+  set data(data: SyncSectionData) {
+    this.syncInfo = data.syncInfo;
+    this.syncSetting = data.syncSetting;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+  }
+  private render(): void {
+    if (!this.syncSetting) {
+      throw new Error('SyncSection not properly initialized');
+    }
+    const checkboxDisabled = !this.syncInfo.isSyncActive || !this.syncInfo.arePreferencesSynced;
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <fieldset>
+        <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
+        ${renderAccountInfoOrWarning(this.syncInfo)}
+        <${Settings.SettingCheckbox.SettingCheckbox.litTagName} .data=${
+            {setting: this.syncSetting, disabled: checkboxDisabled} as Settings.SettingCheckbox.SettingCheckboxData}>
+        </${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
+      </fieldset>
+    `, this.shadow, {host: this});
+    // clang-format on
+  }
+}
+function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
+  if (!syncInfo.isSyncActive) {
+    return LitHtml.html`
+      <span class="warning">
+        ${i18nString(UIStrings.syncDisabled)} <x-link href="chrome://settings/syncSetup" class="link">${
+        i18nString(UIStrings.settings)}</x-link>
+      </span>`;
+  }
+  if (!syncInfo.arePreferencesSynced) {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return LitHtml.html`
+      <span class="warning">
+        ${i18nString(UIStrings.preferencesSyncDisabled)} <x-link href="chrome://settings/syncSetup/advanced" class="link">${
+        i18nString(UIStrings.settings)}</x-link>
+      </span>`;
+    // clang-format on
+  }
+  return LitHtml.html`
+    <div class="account-info">
+      <img src="data:image/png;base64, ${syncInfo.accountImage}" alt="Account avatar" />
+      <div class="account-email">
+        <span>${i18nString(UIStrings.signedIn)}</span>
+        <span>${syncInfo.accountEmail}</span>
+      </div>
+    </div>`;
+}
+ComponentHelpers.CustomElements.defineComponent('devtools-sync-section', SyncSection);
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-sync-section': SyncSection;
+  }
+}

package/front_end/panels/settings/components/components.ts ADDED Viewed

@@ -0,0 +1,9 @@
+// Copyright 2021 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 SyncSection from './SyncSection.js';
+export {
+  SyncSection,
+};

package/front_end/panels/settings/components/syncSection.css ADDED Viewed

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021 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.
+ */
+:host {
+  break-inside: avoid;
+  display: block;
+  padding-bottom: 9px;
+  width: 288px;
+}
+fieldset {
+  border: 0;
+  margin-left: 20px;
+  padding: 0;
+}
+legend {
+  color: var(--color-text-secondary);
+  font-size: 120%;
+  margin-left: -20px;
+  padding: 0;
+  text-align: left;
+}
+.link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}
+img {
+  background-size: 32px 32px;
+  border: 0;
+  border-radius: 50%;
+  display: block;
+  height: 32px;
+  width: 32px;
+}
+.warning {
+  display: block;
+  margin-top: 12px;
+}
+.account-info {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+}
+.account-email {
+  display: flex;
+  flex-direction: column;
+  margin-left: 8px;
+}

package/front_end/panels/settings/keybindsSettingsTab.css CHANGED Viewed

@@ -42,7 +42,7 @@ h1 {
   min-height: 30px;
   display: grid;
   grid-template-rows: repeat(auto-fit, 30px);
-  grid-template-columns: 1fr 30px 1fr 30px 30px;
+  grid-template-columns: 1fr 30px 2fr 30px 30px;
   flex: auto 1 1;
 }

package/front_end/ui/components/settings/SettingCheckbox.ts CHANGED Viewed

@@ -10,6 +10,11 @@ import settingCheckboxStyles from './settingCheckbox.css.js';
 export interface SettingCheckboxData {
   setting: Common.Settings.Setting<boolean>;
+  /**
+   * If set to true, the checkbox is disabled and not clickable by the user.
+   * The checkbox will still reflect the current value of the setting (i.e. checked/unchecked).
+   */
+  disabled?: boolean;
 }
 /**
@@ -20,6 +25,7 @@ export class SettingCheckbox extends HTMLElement {
   private readonly shadow = this.attachShadow({mode: 'open'});
   private setting?: Common.Settings.Setting<boolean>;
+  private disabled: boolean = false;
   private changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
   connectedCallback(): void {
@@ -32,6 +38,7 @@ export class SettingCheckbox extends HTMLElement {
     }
     this.setting = data.setting;
+    this.disabled = Boolean(data.disabled);
     this.changeListenerDescriptor = this.setting.addChangeListener(() => {
       this.render();
@@ -48,8 +55,8 @@ export class SettingCheckbox extends HTMLElement {
         LitHtml.html`
       <p>
         <label>
-          <input type="checkbox" ?checked=${this.setting.get()} @change="${this.checkboxChanged}" aria-label="${
-            this.setting.title()}" /> ${this.setting.title()}
+          <input type="checkbox" ?checked=${this.setting.get()} ?disabled=${this.disabled} @change="${
+            this.checkboxChanged}" aria-label="${this.setting.title()}" /> ${this.setting.title()}
         </label>
       </p>`,
         this.shadow, {host: this});

package/front_end/ui/legacy/tabbedPane.css CHANGED Viewed

@@ -163,7 +163,7 @@
 }
 .-theme-with-dark-background .tabbed-pane-header-tab.selected,
-:host-context(.-theme-with-dark-background) .tabbed-pane-header-tab.selected:focus {
+:host-context(.-theme-with-dark-background) .tabbed-pane-header-tab.selected:focus-visible {
   background-color: var(--color-background-elevation-0);
 }
 /* stylelint-enable no-descending-specificity */

package/front_end/ui/legacy/themeColors.css CHANGED Viewed

@@ -120,8 +120,10 @@
   --color-button-outline-focus: rgb(26 115 232 / 50%);
   --color-button-primary-background-hovering: rgb(77 134 225 / 100%);
   --color-button-primary-background-pressed: rgb(88 132 205);
+  --color-button-primary-text: rgb(255 255 255);
   --color-button-secondary-background-hovering: rgb(26 115 232 / 10%);
   --color-button-secondary-background-pressed: rgb(26 92 178 / 25%);
+  --color-button-secondary-border: rgb(218 220 224);
   /* Colors for file icons */
   --color-ic-file-document: rgb(39 116 240);
@@ -239,8 +241,10 @@
   --color-button-outline-focus: rgb(138 180 248 / 80%);
   --color-button-primary-background-hovering: rgb(174 203 250 / 100%);
   --color-button-primary-background-pressed: rgb(210 227 252 / 100%);
+  --color-button-primary-text: rgb(0 0 0);
   --color-button-secondary-background-hovering: rgb(138 180 248 / 15%);
   --color-button-secondary-background-pressed: rgb(138 180 248 / 23%);
+  --color-button-secondary-border: rgb(60 61 65);
   /* Colors for file icons */
   --color-ic-file-document: rgb(39 116 240);

package/front_end/ui/legacy/toolbar.css CHANGED Viewed

@@ -7,8 +7,6 @@
 :host {
   flex: none;
   padding: 0 2px;
-  --override-toolbar-warning-red: rgb(238 68 47 / 7%);
 }
 .toolbar-shadow {
@@ -406,8 +404,24 @@ input[is=history-input]:not(:placeholder-shown) {
   box-shadow: var(--legacy-focus-ring-active-shadow);
 }
-.toolbar-item.warning {
-  background: var(--override-toolbar-warning-red);
+.toolbar-item.highlight::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-radius: 2px;
+  background: var(--color-primary);
+  z-index: -1;
+}
+.toolbar-item.highlight {
+  color: var(--color-button-primary-text);
+}
+.toolbar-item.highlight > .icon-mask {
+  background: var(--color-button-primary-text);
 }
 devtools-icon.leading-issue-icon {

package/package.json CHANGED Viewed

@@ -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.933401"
+  "version": "1.0.934332"
 }