chrome-devtools-frontend 1.0.961109 → 1.0.963415

package/front_end/models/emulation/EmulatedDevices.ts

@@ -660,7 +660,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {
@@ -680,7 +680,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {
@@ -700,7 +700,7 @@ const emulatedDevices = [
     },
     'capabilities': ['touch', 'mobile'],
     'user-agent':
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
+        'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1',
     'type': 'phone',
   },
   {

package/front_end/models/issues_manager/IssuesManager.ts

@@ -25,7 +25,6 @@ import {SameSiteCookieIssue} from './SameSiteCookieIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
 import {SourceFrameIssuesManager} from './SourceFrameIssuesManager.js';
 import {TrustedWebActivityIssue} from './TrustedWebActivityIssue.js';
-import {WasmCrossOriginModuleSharingIssue} from './WasmCrossOriginModuleSharingIssue.js';
 
 export {Events} from './IssuesManagerEvents.js';
 
@@ -93,10 +92,6 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.AttributionReportingIssue,
     AttributionReportingIssue.fromInspectorIssue,
   ],
-  [
-    Protocol.Audits.InspectorIssueCode.WasmCrossOriginModuleSharingIssue,
-    WasmCrossOriginModuleSharingIssue.fromInspectorIssue,
-  ],
   [
     Protocol.Audits.InspectorIssueCode.GenericIssue,
     GenericIssue.fromInspectorIssue,

package/front_end/models/issues_manager/issues_manager.ts

@@ -24,7 +24,6 @@ import * as SameSiteCookieIssue from './SameSiteCookieIssue.js';
 import * as SharedArrayBufferIssue from './SharedArrayBufferIssue.js';
 import * as SourceFrameIssuesManager from './SourceFrameIssuesManager.js';
 import * as TrustedWebActivityIssue from './TrustedWebActivityIssue.js';
-import * as WasmCrossOriginModuleSharingIssue from './WasmCrossOriginModuleSharingIssue.js';
 
 export {
   AttributionReportingIssue,
@@ -49,5 +48,4 @@ export {
   SharedArrayBufferIssue,
   SourceFrameIssuesManager,
   TrustedWebActivityIssue,
-  WasmCrossOriginModuleSharingIssue,
 };

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -176,7 +176,7 @@ export class IsolatedFileSystem extends PlatformFileSystem {
               this.initialGitFoldersInternal.add(parentFolder);
             }
             if (this.isFileExcluded(entry.fullPath + '/')) {
-              this.excludedEmbedderFolders.push(Common.ParsedURL.ParsedURL.capFilePrefix(
+              this.excludedEmbedderFolders.push(Common.ParsedURL.ParsedURL.urlToRawPathString(
                   this.path() + entry.fullPath as Platform.DevToolsPath.UrlString, Host.Platform.isWin()));
               continue;
             }
@@ -555,7 +555,8 @@ export class IsolatedFileSystem extends PlatformFileSystem {
 
   tooltipForURL(url: string): string {
     const path = Platform.StringUtilities.trimMiddle(
-        Common.ParsedURL.ParsedURL.capFilePrefix(url as Platform.DevToolsPath.UrlString, Host.Platform.isWin()), 150);
+        Common.ParsedURL.ParsedURL.urlToRawPathString(url as Platform.DevToolsPath.UrlString, Host.Platform.isWin()),
+        150);
     return i18nString(UIStrings.linkedToS, {PH1: path});
   }
 

package/front_end/models/persistence/PersistenceActions.ts

@@ -94,8 +94,8 @@ export class ContextMenuProvider implements UI.ContextMenu.Provider {
     const fileURL = binding ? binding.fileSystem.contentURL() : contentProvider.contentURL();
     if (fileURL.startsWith('file://')) {
       // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
-      const path =
-          Common.ParsedURL.ParsedURL.capFilePrefix(fileURL as Platform.DevToolsPath.UrlString, Host.Platform.isWin());
+      const path = Common.ParsedURL.ParsedURL.urlToRawPathString(
+          fileURL as Platform.DevToolsPath.UrlString, Host.Platform.isWin());
       contextMenu.revealSection().appendItem(
           i18nString(UIStrings.openInContainingFolder),
           () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.showItemInFolder(path));

package/front_end/models/text_utils/text_utils-legacy.ts

@@ -45,8 +45,3 @@ TextUtils.BalancedJSONTokenizer = TextUtilsModule.TextUtils.BalancedJSONTokenize
 TextUtils.TokenizerFactory = TextUtilsModule.TextUtils.TokenizerFactory;
 
 TextUtils.isMinified = TextUtilsModule.TextUtils.isMinified;
-
-TextUtils.CodeMirrorUtils = {};
-
-/** @constructor */
-TextUtils.CodeMirrorUtils.TokenizerFactory = TextUtilsModule.CodeMirrorUtils.TokenizerFactory;

package/front_end/models/text_utils/text_utils.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as CodeMirrorUtils from './CodeMirrorUtils.js';
 import * as ContentProvider from './ContentProvider.js';
 import * as StaticContentProvider from './StaticContentProvider.js';
 import * as Text from './Text.js';
@@ -11,7 +10,6 @@ import * as TextRange from './TextRange.js';
 import * as TextUtils from './TextUtils.js';
 
 export {
-  CodeMirrorUtils,
   ContentProvider,
   StaticContentProvider,
   Text,

package/front_end/panels/application/AppManifestView.ts

@@ -617,7 +617,13 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         const copyButton = new IconButton.IconButton.IconButton();
         copyButton.title = i18nString(UIStrings.copyToClipboard);
         copyButton.data = {
-          groups: [{iconName: 'copy_icon', iconHeight: '12px', iconWidth: '12px', text: ''}],
+          groups: [{
+            iconName: 'copy_icon',
+            iconHeight: '12px',
+            iconWidth: '12px',
+            text: '',
+            iconColor: 'var(--color-text-primary)',
+          }],
           clickHandler: (): void => {
             Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
           },

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

@@ -236,6 +236,10 @@ const UIStrings = {
   */
   createdByAdScriptExplanation:
       'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
+  /**
+  *@description Label for a button which when clicked causes some information to be refreshed/updated.
+  */
+  refresh: 'Refresh',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -337,7 +341,8 @@ export class FrameDetailsReportView extends HTMLElement {
       groups: [
         {
           iconName: 'refresh_12x12_icon',
-          text: 'Refresh',
+          text: i18nString(UIStrings.refresh),
+          iconColor: 'var(--color-text-primary)',
         } as IconButton.IconButton.IconWithTextData,
       ],
     } as IconButton.IconButton.IconButtonData}>

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

@@ -52,6 +52,10 @@ const UIStrings = {
   *@description Text describing that a specific feature is blocked by a Permissions Policy specified in a request header.
   */
   disabledByHeader: 'disabled by "`Permissions-Policy`" header',
+  /**
+   *@description Text describing that a specific feature is blocked by virtue of being inside a fenced frame tree.
+   */
+  disabledByFencedFrame: 'disabled inside a `fencedframe`',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/PermissionsPolicySection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -144,10 +148,18 @@ export class PermissionsPolicySection extends HTMLElement {
       const resource = frame && frame.resourceForURL(frame.url);
       const linkTargetRequest =
           blockReason === Protocol.Page.PermissionsPolicyBlockReason.Header && resource && resource.request;
-      const blockReasonText = blockReason === Protocol.Page.PermissionsPolicyBlockReason.IframeAttribute ?
-          i18nString(UIStrings.disabledByIframe) :
-          blockReason === Protocol.Page.PermissionsPolicyBlockReason.Header ? i18nString(UIStrings.disabledByHeader) :
-                                                                              '';
+      const blockReasonText = ((): String => {
+        switch (blockReason) {
+          case Protocol.Page.PermissionsPolicyBlockReason.IframeAttribute:
+            return i18nString(UIStrings.disabledByIframe);
+          case Protocol.Page.PermissionsPolicyBlockReason.Header:
+            return i18nString(UIStrings.disabledByHeader);
+          case Protocol.Page.PermissionsPolicyBlockReason.InFencedFrameTree:
+            return i18nString(UIStrings.disabledByFencedFrame);
+          default:
+            return '';
+        }
+      })();
       const revealHeader = async(): Promise<void> => {
         if (!linkTargetRequest) {
           return;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -477,6 +477,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     } else {
       this.listItemElement.classList.remove('disabled');
     }
+
+    this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(this.property));
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -714,6 +716,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         UI.ARIAUtils.setAccessibleName(
             enabledCheckboxElement, `${this.nameElement.textContent} ${this.valueElement.textContent}`);
       }
+
+      const copyIcon = UI.Icon.Icon.create('largeicon-copy', 'copy');
+      UI.Tooltip.Tooltip.install(copyIcon, i18nString(UIStrings.copyDeclaration));
+      copyIcon.addEventListener('click', () => {
+        const propertyText = `${this.property.name}: ${this.property.value};`;
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
+      });
+      this.listItemElement.append(copyIcon);
       this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
     }
   }
@@ -1470,6 +1480,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.styleTextAppliedForTest();
       return;
     }
+    if (updatedProperty) {
+      this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(updatedProperty));
+    }
 
     this.matchedStylesInternal.resetActiveProperties();
     this.hasBeenEditedIncrementally = true;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -40,6 +40,9 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
+import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
+import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -231,6 +234,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly resizeThrottler: Common.Throttler.Throttler;
   private readonly imagePreviewPopover: ImagePreviewPopover;
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
+  #changedLinesByURLs: Map<string, Set<number>> = new Map();
+  #uiSourceCodeToDiffCallbacks: Map<Workspace.UISourceCode.UISourceCode, () => void> = new Map();
 
   static instance(): StylesSidebarPane {
     if (!_stylesSidebarPaneInstance) {
@@ -834,7 +839,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const blocks = [new SectionBlock(null)];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      this.resetChangedLinesTracking();
+    }
     for (const style of matchedStyles.nodeStyles()) {
+      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES) && style.parentRule) {
+        await this.trackChangedLines(style.parentRule.resourceURL());
+      }
+
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
@@ -987,6 +999,61 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return sections;
   }
 
+  resetChangedLinesTracking(): void {
+    this.#changedLinesByURLs.clear();
+    for (const [uiSourceCode, callback] of this.#uiSourceCodeToDiffCallbacks) {
+      WorkspaceDiff.WorkspaceDiff.workspaceDiff().unsubscribeFromDiffChange(uiSourceCode, callback);
+    }
+    this.#uiSourceCodeToDiffCallbacks.clear();
+  }
+
+  async trackChangedLines(url: string): Promise<void> {
+    if (!url || this.#changedLinesByURLs.has(url)) {
+      return;
+    }
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
+    if (uiSourceCode) {
+      await this.refreshChangedLines(uiSourceCode);
+      const callback = this.refreshChangedLines.bind(this, uiSourceCode);
+      WorkspaceDiff.WorkspaceDiff.workspaceDiff().subscribeToDiffChange(uiSourceCode, callback);
+      this.#uiSourceCodeToDiffCallbacks.set(uiSourceCode, callback);
+    }
+  }
+
+  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;
+    }
+    const changedLines = this.#changedLinesByURLs.get(url);
+    if (!changedLines) {
+      return false;
+    }
+    const uiLocation = Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(property, true);
+    if (!uiLocation) {
+      return false;
+    }
+    // UILocation's lineNumber starts at 0, but changedLines start at 1.
+    return changedLines.has(uiLocation.lineNumber + 1);
+  }
+
+  private async refreshChangedLines(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    const diff = await WorkspaceDiff.WorkspaceDiff.workspaceDiff().requestDiff(uiSourceCode, {shouldFormatDiff: true});
+    const changedLines = new Set<number>();
+    if (diff && diff.length > 0) {
+      const {rows} = DiffView.DiffView.buildDiffRows(diff);
+      for (const row of rows) {
+        if (row.type === DiffView.DiffView.RowType.Addition) {
+          changedLines.add(row.currentLineNumber);
+        }
+      }
+    }
+    this.#changedLinesByURLs.set(uiSourceCode.url(), changedLines);
+  }
+
   private clipboardCopy(_event: Event): void {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleCopied);
   }

package/front_end/panels/elements/stylesSectionTree.css

@@ -126,6 +126,34 @@ ol.expanded {
   opacity: 50%;
 }
 
+.changed::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  width: 2px;
+  height: 100%;
+  background-color: var(--color-accent-green);
+}
+
+.copy {
+  display: none;
+}
+
+.changed:hover {
+  background-color: var(--color-accent-green-background);
+}
+
+.changed:hover .copy {
+  position: absolute;
+  right: -4px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  cursor: pointer;
+  transform: scale(0.9);
+}
+
 .has-ignorable-error {
   color: var(--color-text-disabled);
 }

package/front_end/panels/issues/IssueAggregator.ts

@@ -43,8 +43,6 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
   #trustedWebActivityIssues = new Set<IssuesManager.TrustedWebActivityIssue.TrustedWebActivityIssue>();
   #quirksModeIssues = new Set<IssuesManager.QuirksModeIssue.QuirksModeIssue>();
   #attributionReportingIssues = new Set<IssuesManager.AttributionReportingIssue.AttributionReportingIssue>();
-  #wasmCrossOriginModuleSharingIssues =
-      new Set<IssuesManager.WasmCrossOriginModuleSharingIssue.WasmCrossOriginModuleSharingIssue>();
   #genericIssues = new Set<IssuesManager.GenericIssue.GenericIssue>();
   #representative?: IssuesManager.Issue.Issue;
   #aggregatedIssuesCount = 0;
@@ -126,11 +124,6 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     return this.#attributionReportingIssues;
   }
 
-  getWasmCrossOriginModuleSharingIssue():
-      ReadonlySet<IssuesManager.WasmCrossOriginModuleSharingIssue.WasmCrossOriginModuleSharingIssue> {
-    return this.#wasmCrossOriginModuleSharingIssues;
-  }
-
   getGenericIssues(): ReadonlySet<IssuesManager.GenericIssue.GenericIssue> {
     return this.#genericIssues;
   }
@@ -223,9 +216,6 @@ export class AggregatedIssue extends IssuesManager.Issue.Issue {
     if (issue instanceof IssuesManager.AttributionReportingIssue.AttributionReportingIssue) {
       this.#attributionReportingIssues.add(issue);
     }
-    if (issue instanceof IssuesManager.WasmCrossOriginModuleSharingIssue.WasmCrossOriginModuleSharingIssue) {
-      this.#wasmCrossOriginModuleSharingIssues.add(issue);
-    }
     if (issue instanceof IssuesManager.GenericIssue.GenericIssue) {
       this.#genericIssues.add(issue);
     }

package/front_end/panels/issues/IssueView.ts

@@ -30,7 +30,6 @@ import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrustedWebActivityIssueDetailsView} from './AffectedTrustedWebActivityIssueDetailsView.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
 import {GenericIssueDetailsView} from './GenericIssueDetailsView.js';
-import {WasmCrossOriginModuleSharingAffectedResourcesView} from './WasmCrossOriginModuleSharingAffectedResourcesView.js';
 import {AttributionReportingIssueDetailsView} from './AttributionReportingIssueDetailsView.js';
 
 import type {AggregatedIssue} from './IssueAggregator.js';
@@ -253,7 +252,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new GenericIssueDetailsView(this, this.#issue),
       new AffectedDocumentsInQuirksModeView(this, this.#issue),
       new AttributionReportingIssueDetailsView(this, this.#issue),
-      new WasmCrossOriginModuleSharingAffectedResourcesView(this, this.#issue),
       new AffectedRawCookieLinesView(this, this.#issue),
     ];
     if (Root.Runtime.experiments.isEnabled('hideIssuesFeature')) {

package/front_end/panels/media/PlayerListView.ts

@@ -87,8 +87,10 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
     this.mainContainer.renderMainPanel(playerID);
     if (this.currentlySelectedEntry !== null) {
       this.currentlySelectedEntry.classList.remove('selected');
+      this.currentlySelectedEntry.classList.remove('force-white-icons');
     }
     element.classList.add('selected');
+    element.classList.add('force-white-icons');
     this.currentlySelectedEntry = element;
   }
 

package/front_end/panels/media/playerListView.css

@@ -42,6 +42,9 @@ li.storage-group-list-item::before {
 
 .player-entry-frame-title {
   height: 26px;
+  width: 125px;
+  min-width: 125px;
+  text-overflow: elipsis;
   padding: 0 10px;
   border-right: 1px solid var(--color-details-hairline);
   overflow: hidden;

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

@@ -184,7 +184,7 @@ Common.Settings.registerSettingExtension({
       title: 'Mountain View',
       lat: 37.386052,
       long: -122.083851,
-      timezoneId: 'US/Pacific',
+      timezoneId: 'America/Los_Angeles',
       locale: 'en-US',
     },
     {
@@ -198,7 +198,7 @@ Common.Settings.registerSettingExtension({
       title: 'San Francisco',
       lat: 37.774929,
       long: -122.419416,
-      timezoneId: 'US/Pacific',
+      timezoneId: 'America/Los_Angeles',
       locale: 'en-US',
     },
     {

package/front_end/panels/sources/NavigatorView.ts

@@ -849,7 +849,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
     if (project.type() === Workspace.Workspace.projectTypes.FileSystem) {
       // TODO(crbug.com/1253323): Cast to RawPathString will be removed when migration to branded types is complete.
-      const folderPath = Common.ParsedURL.ParsedURL.capFilePrefix(
+      const folderPath = Common.ParsedURL.ParsedURL.urlToRawPathString(
           Persistence.FileSystemWorkspaceBinding.FileSystemWorkspaceBinding.completeURL(project, path) as
               Platform.DevToolsPath.UrlString,
           Host.Platform.isWin());

package/front_end/third_party/additional_readme_paths.json

@@ -10,5 +10,6 @@
   "lighthouse",
   "lit-html",
   "marked",
+  "puppeteer",
   "wasmparser"
 ]

package/front_end/ui/components/diff_view/DiffView.ts

@@ -44,14 +44,14 @@ interface Row {
   type: RowType;
 }
 
-const enum RowType {
+export const enum RowType {
   Deletion = 'deletion',
   Addition = 'addition',
   Equal = 'equal',
   Spacer = 'spacer',
 }
 
-function buildDiffRows(diff: Diff.Diff.DiffArray): {
+export function buildDiffRows(diff: Diff.Diff.DiffArray): {
   originalLines: readonly string[],
   currentLines: readonly string[],
   rows: readonly Row[],

package/front_end/ui/components/docs/icon_button/basic.ts

@@ -12,18 +12,13 @@ function appendComponent(data: IconButton.IconButton.IconButtonData) {
 
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
-});
-
-appendComponent({
-  clickHandler: (): void => {},
-  groups: [{iconName: 'survey_feedback_icon', iconColor: 'black', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'var(--color-text-primary)', text: '1 item'}],
 });
 
 appendComponent({
   clickHandler: (): void => {},
   groups: [
-    {iconName: 'survey_feedback_icon', iconColor: 'blue', text: 'Test'},
+    {iconName: 'survey_feedback_icon', iconColor: 'var(--color-primary)', text: 'Test'},
     {iconName: 'warning_icon', iconColor: '', text: '1'},
   ],
 });

package/front_end/ui/components/icon_button/IconButton.ts

@@ -85,7 +85,7 @@ export class IconButton extends HTMLElement {
       ${filteredGroups.map(counter =>
       LitHtml.html`
       <${Icon.litTagName} class="status-icon"
-      .data=${{iconName: counter.iconName, color: counter.iconColor || '', width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
+      .data=${{iconName: counter.iconName, color: counter.iconColor, width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
       </${Icon.litTagName}>
       ${this.#compact ? LitHtml.html`<!-- Force line-height for this element --><span>&#8203;</span>` : LitHtml.nothing}
       <span class="icon-button-title">${counter.text}</span>

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

@@ -5,11 +5,12 @@
 import * as Common from '../../../core/common/common.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
-import {baseConfiguration, dynamicSetting, DynamicSetting} from './config.js';
+import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
 import {toLineColumn, toOffset} from './position.js';
 
 declare global {
@@ -66,6 +67,12 @@ export class TextEditor extends HTMLElement {
     });
     this.#ensureSettingListeners();
     this.#startObservingResize();
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const currentTheme = ThemeSupport.ThemeSupport.instance().themeName() === 'dark' ? dummyDarkTheme : [];
+      this.editor.dispatch({
+        effects: themeSelection.reconfigure(currentTheme),
+      });
+    });
     return this.#activeEditor;
   }
 

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

@@ -202,10 +202,11 @@ function themeIsDark(): boolean {
   return setting === 'systemPreferred' ? window.matchMedia('(prefers-color-scheme: dark)').matches : setting === 'dark';
 }
 
-const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
+export const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
+export const themeSelection = new CM.Compartment();
 
 export function theme(): CM.Extension {
-  return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
+  return [editorTheme, themeIsDark() ? themeSelection.of(dummyDarkTheme) : themeSelection.of([])];
 }
 
 let sideBarElement: HTMLElement|null = null;

package/front_end/ui/legacy/GlassPane.ts

@@ -120,6 +120,7 @@ export class GlassPane {
     // Deliberately starts with 3000 to hide other z-indexed elements below.
     this.element.style.zIndex = `${3000 + 1000 * _panes.size}`;
     document.body.addEventListener('mousedown', this.onMouseDownBound, true);
+    document.body.addEventListener('pointerdown', this.onMouseDownBound, true);
     this.widgetInternal.show(document.body);
     _panes.add(this);
     this.positionContent();
@@ -131,6 +132,7 @@ export class GlassPane {
     }
     _panes.delete(this);
     this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
+    this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
     this.widgetInternal.detach();
   }
 

package/front_end/ui/legacy/UIUtils.ts

@@ -1031,7 +1031,7 @@ export class LongClickController {
     if (!this.longClickData) {
       return;
     }
-    this.element.removeEventListener('poinerdown', this.longClickData.mouseDown, false);
+    this.element.removeEventListener('pointerdown', this.longClickData.mouseDown, false);
     this.element.removeEventListener('pointerout', this.longClickData.reset, false);
     this.element.removeEventListener('pointerup', this.longClickData.mouseUp, false);
     this.element.addEventListener('click', this.longClickData.reset, true);

package/front_end/ui/legacy/softDropDownButton.css

@@ -26,6 +26,8 @@ button.soft-dropdown > .title {
 @media (forced-colors: active) {
   button.soft-dropdown {
     border: 1px solid ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
   }
 
   button.soft-dropdown[disabled] {

package/front_end/ui/legacy/themeColors.css

@@ -57,6 +57,7 @@
   --color-accent-red: rgb(217 48 37);
   --color-red: rgb(238 68 47);
   --color-accent-green: rgb(24 128 56);
+  --color-accent-green-background: rgb(24 128 56 / 10%);
   --color-green: rgb(99 172 190);
   --color-link: var(--color-primary);
   --color-syntax-1: rgb(200 0 0);
@@ -219,6 +220,7 @@
   --color-accent-red: rgb(242 139 130);
   --color-red: rgb(237 78 76);
   --color-accent-green: rgb(129 201 149);
+  --color-accent-green-background: rgb(129 201 149 / 20%);
   --color-link: var(--color-primary);
   --color-syntax-1: rgb(53 212 199);
   --color-syntax-2: rgb(93 176 215);

package/front_end/ui/legacy/toolbar.css

@@ -537,4 +537,10 @@ devtools-icon.leading-issue-icon {
   .toolbar-item .devtools-link {
     color: linktext;
   }
+
+  .toolbar-has-dropdown {
+    forced-color-adjust: none;
+    background: ButtonFace;
+    color: ButtonText;
+  }
 }

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.961109"
+  "version": "1.0.963415"
 }

package/scripts/build/assert_third_party_readmes.py

@@ -49,7 +49,8 @@ def main(argv):
     for listed_directory in listed_third_party_directories_json:
         if (listed_directory not in found_directories
                 # TODO(crbug.com/1287519): Remove exception for codemirror 5
-                and not listed_directory == "codemirror"):
+                and not listed_directory == "codemirror"
+                and not listed_directory == "puppeteer"):
             print(
                 "Directory `" + listed_directory + "`" +
                 " is not included in `config/gni/devtools_grd_files.gni`." +