chrome-devtools-frontend 1.0.957983 → 1.0.959844

package/front_end/core/platform/generate-dcheck.js

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const fs = require('fs');
 const path = require('path');
+const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
 const [, , targetGenDir] = process.argv;
 
 let functionImplementation = '';
@@ -16,6 +16,6 @@ if (process.argv.includes('--should-dcheck')) {
 `;
 }
 
-fs.writeFileSync(
+writeIfChanged(
     path.join(targetGenDir, 'dcheck.js'),
     `export function DCHECK(condition, message = 'DCHECK') {${functionImplementation}}`);

package/front_end/core/sdk/ProfileTreeModel.ts

@@ -32,7 +32,7 @@ export class ProfileNode {
   }
 
   get scriptId(): Protocol.Runtime.ScriptId {
-    return this.callFrame.scriptId;
+    return String(this.callFrame.scriptId) as Protocol.Runtime.ScriptId;
   }
 
   get url(): string {

package/front_end/entrypoints/main/main-meta.ts

@@ -672,6 +672,30 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+// Not all locales that are supported should also be made available in the
+// settings. Filter out pseudo locales e.g.
+function filterLocalesForSettings(): string[] {
+  return i18n.i18n.getAllSupportedDevToolsLocales().filter(locale => locale !== 'en-XL');
+}
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.APPEARANCE,
+  storageType: Common.Settings.SettingStorageType.Synced,
+  settingName: 'language',
+  settingType: Common.Settings.SettingType.ENUM,
+  title: i18nLazyString(UIStrings.language),
+  defaultValue: 'en-US',
+  options: [
+    {
+      value: 'browserLanguage',
+      title: i18nLazyString(UIStrings.browserLanguage),
+      text: i18nLazyString(UIStrings.browserLanguage),
+    },
+    ...filterLocalesForSettings().map(locale => createOptionForLocale(locale)),
+  ],
+  reloadRequired: true,
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.APPEARANCE,
   storageType: Common.Settings.SettingStorageType.Synced,
@@ -743,30 +767,6 @@ function createOptionForLocale(localeString: string): Common.Settings.SettingExt
   };
 }
 
-// Not all locales that are supported should also be made available in the
-// settings. Filter out pseudo locales e.g.
-function filterLocalesForSettings(): string[] {
-  return i18n.i18n.getAllSupportedDevToolsLocales().filter(locale => locale !== 'en-XL');
-}
-
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.APPEARANCE,
-  storageType: Common.Settings.SettingStorageType.Synced,
-  settingName: 'language',
-  settingType: Common.Settings.SettingType.ENUM,
-  title: i18nLazyString(UIStrings.language),
-  defaultValue: 'en-US',
-  options: [
-    {
-      value: 'browserLanguage',
-      title: i18nLazyString(UIStrings.browserLanguage),
-      text: i18nLazyString(UIStrings.browserLanguage),
-    },
-    ...filterLocalesForSettings().map(locale => createOptionForLocale(locale)),
-  ],
-  reloadRequired: true,
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SYNC,
   // This name must be kept in sync with DevToolsSettings::kSyncDevToolsPreferencesFrontendName.

package/front_end/generated/SupportedCSSProperties.js

@@ -582,7 +582,7 @@ export const generatedProperties = [
     'name': 'mix-blend-mode',
     'keywords': [
       'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
-      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'
     ]
   },
   {'name': 'negative'},
@@ -1086,7 +1086,7 @@ export const generatedPropertyValues = {
   'mix-blend-mode': {
     'values': [
       'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
-      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+      'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'
     ]
   },
   'object-fit': {'values': ['fill', 'contain', 'cover', 'none', 'scale-down']},

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/models/persistence/WorkspaceSettingsTab.ts

@@ -106,7 +106,6 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     const inputElement = UI.UIUtils.createInput('', 'text');
     UI.ARIAUtils.bindLabelToControl(labelElement, inputElement);
     p.appendChild(inputElement);
-    inputElement.style.width = '270px';
     const folderExcludeSetting = IsolatedFileSystemManager.instance().workspaceFolderExcludePatternSetting();
     const setValue =
         UI.UIUtils.bindInput(inputElement, folderExcludeSetting.set.bind(folderExcludeSetting), regexValidator, false);

package/front_end/models/persistence/workspaceSettingsTab.css

@@ -32,11 +32,6 @@
   column-width: 308px;
 }
 
-.workspace-settings-tab .settings-tab label {
-  padding-right: 4px;
-  display: inline-flex;
-}
-
 .workspace-settings-tab .settings-container-wrapper {
   position: absolute;
   top: 31px;
@@ -57,12 +52,13 @@
 }
 
 .workspace-settings-tab p.folder-exclude-pattern {
-  display: flex;
+  display: grid;
   align-items: center;
 }
 
 .workspace-settings-tab p.folder-exclude-pattern > input {
-  flex: auto;
+  width: 80%;
+  margin-left: 10px;
 }
 
 .workspace-settings-tab .settings-tab .file-system-container {

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;
 };
 
@@ -166,7 +167,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
                                                              UI.View.ViewLocationResolver {
   private splitWidget: UI.SplitWidget.SplitWidget;
   private readonly searchableViewInternal: UI.SearchableView.SearchableView;
-  private contentElementInternal: HTMLDivElement;
+  private mainContainer: HTMLDivElement;
+  private domTreeContainer: HTMLDivElement;
   private splitMode: _splitMode|null;
   private readonly accessibilityTreeView: AccessibilityTreeView|undefined;
   private breadcrumbs: ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs;
@@ -185,8 +187,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;
@@ -210,24 +212,27 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByStringSelectorOrXpath));
     const stackElement = this.searchableViewInternal.element;
 
-    this.contentElementInternal = document.createElement('div');
+    this.mainContainer = document.createElement('div');
+    this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
     if (Root.Runtime.experiments.isEnabled('fullAccessibilityTree')) {
       this.initializeFullAccessibilityTreeView();
     }
-    stackElement.appendChild(this.contentElementInternal);
+    this.mainContainer.appendChild(this.domTreeContainer);
+    stackElement.appendChild(this.mainContainer);
     stackElement.appendChild(crumbsContainer);
 
-    UI.ARIAUtils.markAsMain(this.contentElementInternal);
-    UI.ARIAUtils.setAccessibleName(this.contentElementInternal, i18nString(UIStrings.domTreeExplorer));
+    UI.ARIAUtils.markAsMain(this.domTreeContainer);
+    UI.ARIAUtils.setAccessibleName(this.domTreeContainer, i18nString(UIStrings.domTreeExplorer));
 
     this.splitWidget.setMainWidget(this.searchableViewInternal);
     this.splitMode = null;
 
-    this.contentElementInternal.id = 'elements-content';
+    this.mainContainer.id = 'main-content';
+    this.domTreeContainer.id = 'elements-content';
     // FIXME: crbug.com/425984
     if (Common.Settings.Settings.instance().moduleSetting('domWordWrap').get()) {
-      this.contentElementInternal.classList.add('elements-wrap');
+      this.domTreeContainer.classList.add('elements-wrap');
     }
     Common.Settings.Settings.instance()
         .moduleSetting('domWordWrap')
@@ -281,7 +286,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.domTreeButton = createAccessibilityTreeToggleButton(true);
     this.domTreeButton.addEventListener('click', this.showDOMTree.bind(this));
 
-    this.contentElementInternal.appendChild(this.accessibilityTreeButton);
+    this.mainContainer.appendChild(this.accessibilityTreeButton);
   }
 
   private showAccessibilityTree(): void {
@@ -432,12 +437,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     for (const treeOutline of this.treeOutlines) {
       // Attach heavy component lazily
-      if (treeOutline.element.parentElement !== this.contentElementInternal) {
+      if (treeOutline.element.parentElement !== this.domTreeContainer) {
         const header = this.treeOutlineHeaders.get(treeOutline);
         if (header) {
-          this.contentElementInternal.appendChild(header);
+          this.domTreeContainer.appendChild(header);
         }
-        this.contentElementInternal.appendChild(treeOutline.element);
+        this.domTreeContainer.appendChild(treeOutline.element);
       }
     }
 
@@ -468,10 +473,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     for (const treeOutline of this.treeOutlines) {
       treeOutline.setVisible(false);
       // Detach heavy component on hide
-      this.contentElementInternal.removeChild(treeOutline.element);
+      this.domTreeContainer.removeChild(treeOutline.element);
       const header = this.treeOutlineHeaders.get(treeOutline);
       if (header) {
-        this.contentElementInternal.removeChild(header);
+        this.domTreeContainer.removeChild(header);
       }
     }
     super.willHide();
@@ -667,7 +672,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private domWordWrapSettingChanged(event: Common.EventTarget.EventTargetEvent<boolean>): void {
-    this.contentElementInternal.classList.toggle('elements-wrap', event.data);
+    this.domTreeContainer.classList.toggle('elements-wrap', event.data);
     for (const treeOutline of this.treeOutlines) {
       treeOutline.setWordWrap(event.data);
     }

package/front_end/panels/elements/elementsPanel.css

@@ -27,11 +27,15 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-#elements-content {
+#main-content {
+  position: relative;
   flex: 1 1;
+}
+
+#elements-content {
   overflow: auto;
   padding: 2px 0 0;
-  position: relative;
+  height: 100%;
 }
 
 .style-panes-wrapper {
@@ -82,11 +86,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/settings/settingsScreen.css

@@ -80,9 +80,9 @@ fieldset {
   align-items: center;
 }
 
-.experiments-filter label {
+label {
   padding-right: 8px;
-  flex-shrink: 0;
+  padding-bottom: 8px;
 }
 
 .settings-tab p {
@@ -95,7 +95,7 @@ fieldset {
 
 .settings-select {
   align-items: center;
-  display: flex;
+  display: grid;
 }
 
 .settings-experiments-warning-subsection-warning {
@@ -174,6 +174,7 @@ fieldset {
 
 .settings-tab select {
   margin-left: 10px;
+  width: 80%;
 }
 
 .settings-experiment {

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/filter.css

@@ -65,6 +65,7 @@
   border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
+  line-height: 1.2;
 }
 
 .filter-bitset-filter span:focus-visible {