chrome-devtools-frontend 1.0.957983 → 1.0.958475

package/.eslintignore

@@ -5,7 +5,6 @@
 // clang-format check also ignores that file
 front_end/.eslintrc.js
 front_end/diff/diff_match_patch.js
-front_end/protocol_externs.js
 front_end/javascript_metadata/NativeFunctions.js
 front_end/third_party/
 test/e2e/**/*.js

package/front_end/models/persistence/Automapping.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -28,7 +29,7 @@ export class Automapping {
   private readonly onStatusAdded: (arg0: AutomappingStatus) => Promise<void>;
   private readonly onStatusRemoved: (arg0: AutomappingStatus) => Promise<void>;
   private readonly statuses: Set<AutomappingStatus>;
-  private readonly fileSystemUISourceCodes: Map<string, Workspace.UISourceCode.UISourceCode>;
+  private readonly fileSystemUISourceCodes: FileSystemUISourceCodes;
   private readonly sweepThrottler: Common.Throttler.Throttler;
   private readonly sourceCodeToProcessingPromiseMap: WeakMap<Workspace.UISourceCode.UISourceCode, Promise<void>>;
   private readonly sourceCodeToAutoMappingStatusMap: WeakMap<Workspace.UISourceCode.UISourceCode, AutomappingStatus>;
@@ -47,7 +48,7 @@ export class Automapping {
     this.onStatusRemoved = onStatusRemoved;
     this.statuses = new Set();
 
-    this.fileSystemUISourceCodes = new Map();
+    this.fileSystemUISourceCodes = new FileSystemUISourceCodes();
     this.sweepThrottler = new Common.Throttler.Throttler(100);
 
     this.sourceCodeToProcessingPromiseMap = new WeakMap();
@@ -144,7 +145,7 @@ export class Automapping {
         return;
       }
       this.filesIndex.addPath(uiSourceCode.url());
-      this.fileSystemUISourceCodes.set(uiSourceCode.url(), uiSourceCode);
+      this.fileSystemUISourceCodes.add(uiSourceCode);
       this.scheduleSweep();
     } else if (project.type() === Workspace.Workspace.projectTypes.Network) {
       this.computeNetworkStatus(uiSourceCode);
@@ -179,7 +180,7 @@ export class Automapping {
     }
 
     this.filesIndex.addPath(uiSourceCode.url());
-    this.fileSystemUISourceCodes.set(uiSourceCode.url(), uiSourceCode);
+    this.fileSystemUISourceCodes.add(uiSourceCode);
     this.scheduleSweep();
   }
 
@@ -489,6 +490,33 @@ class FolderIndex {
   }
 }
 
+class FileSystemUISourceCodes {
+  private readonly sourceCodes: Map<string, Workspace.UISourceCode.UISourceCode>;
+
+  constructor() {
+    this.sourceCodes = new Map();
+  }
+
+  private getPlatformCanonicalFileUrl(path: string): string {
+    return Host.Platform.isWin() ? path.toLowerCase() : path;
+  }
+
+  add(sourceCode: Workspace.UISourceCode.UISourceCode): void {
+    const fileUrl = this.getPlatformCanonicalFileUrl(sourceCode.url());
+    this.sourceCodes.set(fileUrl, sourceCode);
+  }
+
+  get(fileUrl: string): Workspace.UISourceCode.UISourceCode|undefined {
+    fileUrl = this.getPlatformCanonicalFileUrl(fileUrl);
+    return this.sourceCodes.get(fileUrl);
+  }
+
+  delete(fileUrl: string): void {
+    fileUrl = this.getPlatformCanonicalFileUrl(fileUrl);
+    this.sourceCodes.delete(fileUrl);
+  }
+}
+
 export class AutomappingStatus {
   network: Workspace.UISourceCode.UISourceCode;
   fileSystem: Workspace.UISourceCode.UISourceCode;

package/front_end/models/persistence/PersistenceImpl.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -18,7 +19,7 @@ let persistenceInstance: PersistenceImpl;
 export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private readonly workspace: Workspace.Workspace.WorkspaceImpl;
   private readonly breakpointManager: Bindings.BreakpointManager.BreakpointManager;
-  private readonly filePathPrefixesToBindingCount: Map<string, number>;
+  private readonly filePathPrefixesToBindingCount: FilePathPrefixesBindingCounts;
   private subscribedBindingEventListeners:
       Platform.MapUtilities.Multimap<Workspace.UISourceCode.UISourceCode, () => void>;
   private readonly mapping: Automapping;
@@ -28,7 +29,7 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     super();
     this.workspace = workspace;
     this.breakpointManager = breakpointManager;
-    this.filePathPrefixesToBindingCount = new Map();
+    this.filePathPrefixesToBindingCount = new FilePathPrefixesBindingCounts();
 
     this.subscribedBindingEventListeners = new Platform.MapUtilities.Multimap();
 
@@ -92,7 +93,7 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     binding.fileSystem.addEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.onWorkingCopyChanged, this);
 
-    this.addFilePathBindingPrefixes(binding.fileSystem.url());
+    this.filePathPrefixesToBindingCount.add(binding.fileSystem.url());
 
     await this.moveBreakpoints(binding.fileSystem, binding.network);
 
@@ -131,7 +132,7 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     binding.fileSystem.removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyChanged, this.onWorkingCopyChanged, this);
 
-    this.removeFilePathBindingPrefixes(binding.fileSystem.url());
+    this.filePathPrefixesToBindingCount.remove(binding.fileSystem.url());
     await this.breakpointManager.copyBreakpoints(binding.network.url(), binding.fileSystem);
 
     this.notifyBindingEvent(binding.network);
@@ -307,33 +308,52 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return binding ? binding.network : null;
   }
 
-  private addFilePathBindingPrefixes(filePath: string): void {
+  filePathHasBindings(filePath: string): boolean {
+    return this.filePathPrefixesToBindingCount.hasBindingPrefix(filePath);
+  }
+}
+
+class FilePathPrefixesBindingCounts {
+  private prefixCounts: Map<string, number>;
+
+  constructor() {
+    this.prefixCounts = new Map();
+  }
+
+  private getPlatformCanonicalFilePath(path: string): string {
+    return Host.Platform.isWin() ? path.toLowerCase() : path;
+  }
+
+  add(filePath: string): void {
+    filePath = this.getPlatformCanonicalFilePath(filePath);
     let relative = '';
     for (const token of filePath.split('/')) {
       relative += token + '/';
-      const count = this.filePathPrefixesToBindingCount.get(relative) || 0;
-      this.filePathPrefixesToBindingCount.set(relative, count + 1);
+      const count = this.prefixCounts.get(relative) || 0;
+      this.prefixCounts.set(relative, count + 1);
     }
   }
 
-  private removeFilePathBindingPrefixes(filePath: string): void {
+  remove(filePath: string): void {
+    filePath = this.getPlatformCanonicalFilePath(filePath);
     let relative = '';
     for (const token of filePath.split('/')) {
       relative += token + '/';
-      const count = this.filePathPrefixesToBindingCount.get(relative);
+      const count = this.prefixCounts.get(relative);
       if (count === 1) {
-        this.filePathPrefixesToBindingCount.delete(relative);
+        this.prefixCounts.delete(relative);
       } else if (count !== undefined) {
-        this.filePathPrefixesToBindingCount.set(relative, count - 1);
+        this.prefixCounts.set(relative, count - 1);
       }
     }
   }
 
-  filePathHasBindings(filePath: string): boolean {
+  hasBindingPrefix(filePath: string): boolean {
+    filePath = this.getPlatformCanonicalFilePath(filePath);
     if (!filePath.endsWith('/')) {
       filePath += '/';
     }
-    return this.filePathPrefixesToBindingCount.has(filePath);
+    return this.prefixCounts.has(filePath);
   }
 }
 

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -12,11 +12,11 @@ import {ElementsPanel} from './ElementsPanel.js';
 export class AccessibilityTreeView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.AccessibilityModel.AccessibilityModel> {
   private accessibilityTreeComponent = new TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>();
-  private readonly toggleButton: HTMLButtonElement;
+  private readonly toggleButton: HTMLElement;
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   private root: SDK.AccessibilityModel.AccessibilityNode|null = null;
 
-  constructor(toggleButton: HTMLButtonElement) {
+  constructor(toggleButton: HTMLElement) {
     super();
     // toggleButton is bound to a click handler on ElementsPanel to switch between the DOM tree
     // and accessibility tree views.

package/front_end/panels/elements/ElementsPanel.ts

@@ -42,7 +42,7 @@ import * as Extensions from '../../models/extensions/extensions.js';
 import elementsPanelStyles from './elementsPanel.css.js';
 
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -142,20 +142,21 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLButtonElement => {
-  const button = document.createElement('button');
+const createAccessibilityTreeToggleButton = (isActive: boolean): HTMLElement => {
+  const button = new Buttons.Button.Button();
+  const title =
+      isActive ? i18nString(UIStrings.switchToDomTreeView) : i18nString(UIStrings.switchToAccessibilityTreeView);
+  button.data = {
+    active: isActive,
+    variant: Buttons.Button.Variant.TOOLBAR,
+    iconUrl: new URL('../../Images/accessibility-icon.svg', import.meta.url).toString(),
+    title,
+  };
+  button.tabIndex = 0;
+  button.classList.add('axtree-button');
   if (isActive) {
-    button.classList.add('axtree-button', 'axtree-button-active');
-  } else {
-    button.classList.add('axtree-button');
+    button.classList.add('active');
   }
-  button.tabIndex = 0;
-  button.title =
-      isActive ? i18nString(UIStrings.switchToDomTreeView) : i18nString(UIStrings.switchToAccessibilityTreeView);
-  const icon = new IconButton.Icon.Icon();
-  const bgColor = isActive ? 'var(--color-primary)' : 'var(--color-text-secondary)';
-  icon.data = {iconName: 'accessibility-icon', color: bgColor, width: '16px', height: '16px'};
-  button.appendChild(icon);
   return button;
 };
 
@@ -185,8 +186,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private readonly adornerManager: ElementsComponents.AdornerManager.AdornerManager;
   private adornerSettingsPane: ElementsComponents.AdornerSettingsPane.AdornerSettingsPane|null;
   private readonly adornersByName: Map<string, Set<Adorners.Adorner.Adorner>>;
-  accessibilityTreeButton?: HTMLButtonElement;
-  domTreeButton?: HTMLButtonElement;
+  accessibilityTreeButton?: HTMLElement;
+  domTreeButton?: HTMLElement;
   private selectedNodeOnReset?: SDK.DOMModel.DOMNode;
   private hasNonDefaultSelectedNode?: boolean;
   private searchConfig?: UI.SearchableView.SearchConfig;

package/front_end/panels/elements/elementsPanel.css

@@ -82,11 +82,13 @@ devtools-tree-outline {
 
 .axtree-button {
   position: absolute;
-  padding: 4px;
   top: 16px;
-  right: 16px;
+  right: 20px;
+  background-color: var(--color-background-elevation-1);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
+  border: 1px solid var(--color-details-hairline);
+  border-radius: 3px;
 }

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -1097,17 +1098,19 @@ UI.ActionRegistration.registerActionExtension({
   title: i18nLazyString(UIStrings.createNewSnippet),
 });
 
-UI.ActionRegistration.registerActionExtension({
-  category: UI.ActionRegistration.ActionCategory.SOURCES,
-  actionId: 'sources.add-folder-to-workspace',
-  async loadActionDelegate() {
-    const Sources = await loadSourcesModule();
-    return Sources.SourcesNavigator.ActionDelegate.instance();
-  },
-  iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_ADD,
-  title: i18nLazyString(UIStrings.addFolderToWorkspace),
-  condition: Root.Runtime.ConditionName.NOT_SOURCES_HIDE_ADD_FOLDER,
-});
+if (!Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
+  UI.ActionRegistration.registerActionExtension({
+    category: UI.ActionRegistration.ActionCategory.SOURCES,
+    actionId: 'sources.add-folder-to-workspace',
+    async loadActionDelegate() {
+      const Sources = await loadSourcesModule();
+      return Sources.SourcesNavigator.ActionDelegate.instance();
+    },
+    iconClass: UI.ActionRegistration.IconClass.LARGE_ICON_ADD,
+    title: i18nLazyString(UIStrings.addFolderToWorkspace),
+    condition: Root.Runtime.ConditionName.NOT_SOURCES_HIDE_ADD_FOLDER,
+  });
+}
 
 UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.DEBUGGER,

package/front_end/ui/components/buttons/Button.ts

@@ -36,6 +36,7 @@ interface ButtonState {
   spinner?: boolean;
   type: ButtonType;
   value?: string;
+  title?: string;
 }
 
 export type ButtonData = {
@@ -47,6 +48,7 @@ export type ButtonData = {
   spinner?: boolean,
   type?: ButtonType,
   value?: string,
+  title?: string,
 }|{
   variant: Variant.PRIMARY | Variant.SECONDARY,
   iconUrl?: string,
@@ -56,6 +58,7 @@ export type ButtonData = {
   spinner?: boolean,
   type?: ButtonType,
   value?: string,
+  title?: string,
 };
 
 interface ButtonElementInternals extends ElementInternals {
@@ -101,6 +104,7 @@ export class Button extends HTMLElement {
     this.#props.spinner = Boolean(data.spinner);
     this.#props.type = data.type || 'button';
     this.#setDisabledProperty(data.disabled || false);
+    this.#props.title = data.title;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
@@ -208,7 +212,7 @@ export class Button extends HTMLElement {
     // clang-format off
     LitHtml.render(
       LitHtml.html`
-        <button .disabled=${this.#props.disabled} class=${LitHtml.Directives.classMap(classes)}>
+        <button .title=${this.#props.title} .disabled=${this.#props.disabled} class=${LitHtml.Directives.classMap(classes)}>
           ${this.#props.iconUrl ? LitHtml.html`<${IconButton.Icon.Icon.litTagName}
             .data=${{
               iconPath: this.#props.iconUrl,

package/front_end/ui/components/buttons/button.css

@@ -169,7 +169,7 @@ button.toolbar devtools-icon {
   width: 24px;
   height: 24px;
 
-  --icon-color: var(--color-text-primary);
+  --icon-color: var(--color-text-secondary);
 }
 
 button.primary devtools-icon {
@@ -190,6 +190,15 @@ button.toolbar.small devtools-icon {
   height: 18px;
 }
 
+button.toolbar.active devtools-icon,
+button.toolbar:active devtools-icon {
+  --icon-color: var(--color-primary);
+}
+
+button.toolbar:hover devtools-icon {
+  --icon-color: var(--color-text-primary);
+}
+
 button.toolbar:disabled devtools-icon {
   --icon-color: var(--color-text-disabled);
 }

package/front_end/ui/legacy/toolbar.css

@@ -354,6 +354,7 @@ select.toolbar-item:focus-visible > * {
   overflow: hidden;
   white-space: nowrap;
   cursor: auto;
+  color: var(--color-text-primary);
 }
 /* Separator */
 
@@ -394,6 +395,7 @@ input[is="history-input"] {
   border: 1px solid transparent;
   line-height: 16px;
   padding: 1px;
+  color: var(--color-text-primary);
 }
 
 input[is="history-input"]:hover {

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.957983"
+  "version": "1.0.958475"
 }