chrome-devtools-frontend 1.0.957495 → 1.0.959543

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -83,7 +83,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
       clearTimeout(this.frameResizedTimer);
     }
 
-    this.frameResizedTimer = setTimeout(refreshContents.bind(this), 100);
+    this.frameResizedTimer = window.setTimeout(refreshContents.bind(this), 100);
   }
 
   private elementNode(): SDK.DOMModel.DOMNode|null {

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/StylesSidebarPane.ts

@@ -590,7 +590,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   async doUpdate(): Promise<void> {
     if (!this.initialUpdateCompleted) {
-      setTimeout(() => {
+      window.setTimeout(() => {
         if (!this.initialUpdateCompleted) {
           // the spinner will get automatically removed when innerRebuildUpdate is called
           this.sectionsContainer.createChild('span', 'spinner');
@@ -1650,7 +1650,7 @@ export class StylePropertiesSection {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    this.hoverTimer = setTimeout(this.highlight.bind(this), 300);
+    this.hoverTimer = window.setTimeout(this.highlight.bind(this), 300);
   }
 
   highlight(mode: string|undefined = 'all'): void {

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/network/NetworkItemView.ts

@@ -275,7 +275,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     if (!this.selectTab(tabId)) {
       // maybeAppendPayloadPanel might cause payload tab to appear asynchronously, so
       // it makes sense to retry on the next tick
-      setTimeout(() => {
+      window.setTimeout(() => {
         if (!this.selectTab(tabId)) {
           this.selectTab('headers');
         }

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -196,7 +196,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
 
   onWindowChanged(): void {
     if (!this.updateGridTimerId) {
-      this.updateGridTimerId = setTimeout(this.updateGrid.bind(this), 10);
+      this.updateGridTimerId = window.setTimeout(this.updateGrid.bind(this), 10);
     }
   }
 
@@ -204,7 +204,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     if (this.updateTimerId) {
       return;
     }
-    this.updateTimerId = setTimeout(this.update.bind(this), 10);
+    this.updateTimerId = window.setTimeout(this.update.bind(this), 10);
   }
 
   updateBoundaries(): void {

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -203,7 +203,7 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
         return;
       }
       this.update(isolates, profiles);
-      await new Promise(r => setTimeout(r, 3000));
+      await new Promise(r => window.setTimeout(r, 3000));
     } while (this.currentPollId === pollId);
   }
 

package/front_end/panels/screencast/ScreencastView.ts

@@ -796,7 +796,7 @@ export class ProgressTracker {
   private onLoad(): void {
     this.requestIds = null;
     this.updateProgress(1);  // Display 100% progress on load, hide it in 0.5s.
-    setTimeout(() => {
+    window.setTimeout(() => {
       if (!this.navigationProgressVisible()) {
         this.displayProgress(0);
       }
@@ -831,7 +831,7 @@ export class ProgressTracker {
       return;
     }
     ++this.finishedRequests;
-    setTimeout(() => {
+    window.setTimeout(() => {
       this.updateProgress(
           this.finishedRequests / this.startedRequests * 0.9);  // Finished requests drive the progress up to 90%.
     }, 500);  // Delay to give the new requests time to start. This makes the progress smoother.

package/front_end/panels/settings/SettingsScreen.ts

@@ -392,7 +392,7 @@ export class ExperimentsSettingsTab extends SettingsTab {
   constructor() {
     super(i18nString(UIStrings.experiments), 'experiments-tab-content');
     const filterSection = this.appendSection();
-    filterSection.style.paddingTop = '1px';
+    filterSection.classList.add('experiments-filter');
 
     const labelElement = filterSection.createChild('label');
     labelElement.textContent = i18nString(UIStrings.filterExperimentsLabel);

package/front_end/panels/settings/settingsScreen.css

@@ -74,10 +74,15 @@ fieldset {
   border: none;
 }
 
-.settings-tab label {
-  padding-right: 4px;
-  display: inline-flex;
-  flex-shrink: 0;
+.experiments-filter {
+  padding-top: 1px;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  padding-right: 8px;
+  padding-bottom: 8px;
 }
 
 .settings-tab p {
@@ -90,7 +95,7 @@ fieldset {
 
 .settings-select {
   align-items: center;
-  display: flex;
+  display: grid;
 }
 
 .settings-experiments-warning-subsection-warning {
@@ -169,6 +174,7 @@ fieldset {
 
 .settings-tab select {
   margin-left: 10px;
+  width: 80%;
 }
 
 .settings-experiment {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -603,7 +603,7 @@ export class DebuggerPlugin extends Plugin {
     } else if (/^text\/(javascript|typescript|jsx)/.test(this.uiSourceCode.mimeType())) {
       let node: CodeMirror.SyntaxNode|null = CodeMirror.syntaxTree(editor.state).resolveInner(textPosition, 1);
       // Only do something if the cursor is over a leaf node.
-      if (node.firstChild) {
+      if (node?.firstChild) {
         return null;
       }
       while (

package/front_end/panels/sources/NavigatorView.ts

@@ -1137,7 +1137,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
       super.selectOnMouseDown(event);
       return;
     }
-    setTimeout(rename.bind(this), 300);
+    window.setTimeout(rename.bind(this), 300);
 
     function rename(this: NavigatorSourceTreeElement): void {
       if (this.shouldRenameOnMouseDown()) {

package/front_end/panels/sources/SourcesSearchScope.ts

@@ -240,7 +240,7 @@ export class SourcesSearchScope implements Search.SearchConfig.SearchScope {
 
       ++callbacksLeft;
       const uiSourceCode = files[fileIndex++];
-      setTimeout(searchInNextFile.bind(this, uiSourceCode), 0);
+      window.setTimeout(searchInNextFile.bind(this, uiSourceCode), 0);
     }
 
     function contentLoaded(

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/panels/timeline/TimelineController.ts

@@ -146,7 +146,7 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     const extensionCompletionPromises = this.extensionSessions.map(session => session.stop());
     if (extensionCompletionPromises.length) {
       tracingStoppedPromises.push(
-          Promise.race([Promise.all(extensionCompletionPromises), new Promise(r => setTimeout(r, 5000))]));
+          Promise.race([Promise.all(extensionCompletionPromises), new Promise(r => window.setTimeout(r, 5000))]));
     }
     await Promise.all(tracingStoppedPromises);
   }
@@ -222,7 +222,7 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
 
   private allSourcesFinished(): void {
     this.client.processingStarted();
-    setTimeout(() => this.finalizeTrace(), 0);
+    window.setTimeout(() => this.finalizeTrace(), 0);
   }
 
   private async finalizeTrace(): Promise<void> {

package/front_end/panels/timeline/TimelineLoader.ts

@@ -80,14 +80,14 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
   static loadFromEvents(events: SDK.TracingManager.EventPayload[], client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
 
-    setTimeout(async () => {
+    window.setTimeout(async () => {
       const eventsPerChunk = 5000;
       client.loadingStarted();
       for (let i = 0; i < events.length; i += eventsPerChunk) {
         const chunk = events.slice(i, i + eventsPerChunk);
         (loader.tracingModel as SDK.TracingModel.TracingModel).addEvents(chunk);
         client.loadingProgress((i + chunk.length) / events.length);
-        await new Promise(r => setTimeout(r));  // Yield event loop to paint.
+        await new Promise(r => window.setTimeout(r));  // Yield event loop to paint.
       }
       void loader.close();
     });
@@ -228,7 +228,7 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
       return;
     }
     this.client.processingStarted();
-    setTimeout(() => this.finalizeTrace(), 0);
+    window.setTimeout(() => this.finalizeTrace(), 0);
   }
 
   private finalizeTrace(): void {

package/front_end/panels/timeline/TimelinePanel.ts

@@ -1148,7 +1148,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
     const controller = this.controller;
-    await new Promise(r => setTimeout(r, this.millisecondsToRecordAfterLoadEvent));
+    await new Promise(r => window.setTimeout(r, this.millisecondsToRecordAfterLoadEvent));
 
     // Check if we're still in the same recording session.
     if (controller !== this.controller || this.state !== State.Recording) {

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -404,7 +404,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     }
 
     // TODO(crbug.com/1112528): Add back-end events for credential creation and removal to avoid polling.
-    setTimeout(this.#updateCredentials.bind(this, authenticatorId), TIMEOUT);
+    window.setTimeout(this.#updateCredentials.bind(this, authenticatorId), TIMEOUT);
   }
 
   #maybeAddEmptyNode(dataGrid: DataGrid.DataGrid.DataGridImpl<DataGridNode>): void {