chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -2,9 +2,7 @@
 // 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 i18n from '../../core/i18n/i18n.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -58,38 +56,36 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/GoToLineQuickOpen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let goToLineQuickOpenInstance: GoToLineQuickOpen;
 export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
   #goToLineStrings: string[] = [];
 
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): GoToLineQuickOpen {
-    const {forceNew} = opts;
-    if (!goToLineQuickOpenInstance || forceNew) {
-      goToLineQuickOpenInstance = new GoToLineQuickOpen();
-    }
-
-    return goToLineQuickOpenInstance;
-  }
-
   selectItem(_itemIndex: number|null, promptValue: string): void {
-    const uiSourceCode = this.currentUISourceCode();
-    if (!uiSourceCode) {
+    const sourceFrame = this.currentSourceFrame();
+    if (!sourceFrame) {
       return;
     }
     const position = this.parsePosition(promptValue);
     if (!position) {
       return;
     }
-    void Common.Revealer.reveal(uiSourceCode.uiLocation(position.line - 1, position.column - 1));
+    sourceFrame.revealPosition({lineNumber: position.line - 1, columnNumber: position.column - 1});
+  }
+
+  itemCount(): number {
+    return this.#goToLineStrings.length;
+  }
+
+  renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
+    UI.UIUtils.createTextChild(titleElement, this.#goToLineStrings[itemIndex]);
   }
 
-  updateGoToLineStrings(query: string): void {
+  rewriteQuery(_query: string): string {
+    // For Go to Line Quick Open, we don't need to filter any item, set query to empty string, so the filter regex matching will be skipped
+    return '';
+  }
+
+  queryChanged(query: string): void {
     this.#goToLineStrings = [];
-    if (!this.currentUISourceCode()) {
-      return;
-    }
     const position = this.parsePosition(query);
     const sourceFrame = this.currentSourceFrame();
     if (!position) {
@@ -99,7 +95,9 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
       }
       const editorState = sourceFrame.textEditor.state;
       const disassembly = sourceFrame.wasmDisassembly;
-      const currentLineNumber = editorState.doc.lineAt(editorState.selection.main.head).number - 1;
+      const currentLineNumber =
+          sourceFrame.editorLocationToUILocation(editorState.doc.lineAt(editorState.selection.main.head).number - 1)
+              .lineNumber;
       if (disassembly) {
         const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
         const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
@@ -111,7 +109,7 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
         }));
         return;
       }
-      const linesCount = editorState.doc.lines;
+      const linesCount = sourceFrame.editorLocationToUILocation(editorState.doc.lines - 1).lineNumber + 1;
       this.#goToLineStrings.push(
           i18nString(UIStrings.currentLineSTypeALineNumber, {PH1: currentLineNumber + 1, PH2: linesCount}));
       return;
@@ -131,25 +129,8 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     this.#goToLineStrings.push(i18nString(UIStrings.goToLineS, {PH1: position.line}));
   }
 
-  itemCount(): number {
-    return this.#goToLineStrings.length;
-  }
-
-  renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
-    UI.UIUtils.createTextChild(titleElement, this.#goToLineStrings[itemIndex]);
-  }
-
-  rewriteQuery(_query: string): string {
-    // For Go to Line Quick Open, we don't need to filter any item, set query to empty string, so the filter regex matching will be skipped
-    return '';
-  }
-
-  queryChanged(query: string): void {
-    this.updateGoToLineStrings(query);
-  }
-
   notFoundText(_query: string): string {
-    if (!this.currentUISourceCode()) {
+    if (!this.currentSourceFrame()) {
       return i18nString(UIStrings.noFileSelected);
     }
     return i18nString(UIStrings.noResultsFound);
@@ -182,14 +163,6 @@ export class GoToLineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     return {line: Math.max(line | 0, 1), column: Math.max(column | 0, 1)};
   }
 
-  private currentUISourceCode(): Workspace.UISourceCode.UISourceCode|null {
-    const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
-    if (!sourcesView) {
-      return null;
-    }
-    return sourcesView.currentUISourceCode();
-  }
-
   private currentSourceFrame(): UISourceCodeFrame|null {
     const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
     if (!sourcesView) {

package/front_end/panels/sources/NavigatorView.ts

@@ -211,15 +211,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       this.navigatorGroupByAuthoredExperiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
     }
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('skipStackFramesPattern')
-        .addChangeListener(this.ignoreListChanged.bind(this));
-    Common.Settings.Settings.instance()
-        .moduleSetting('skipContentScripts')
-        .addChangeListener(this.ignoreListChanged.bind(this));
-    Common.Settings.Settings.instance()
-        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
-        .addChangeListener(this.ignoreListChanged.bind(this));
+    Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListChanged.bind(this));
 
     this.initGrouping();
 
@@ -726,7 +718,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
 
     const rootOrDeployed = this.rootOrDeployedNode();
-    if (target === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+    if (target === SDK.TargetManager.TargetManager.instance().mainFrameTarget()) {
       return rootOrDeployed;
     }
 

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -11,20 +11,7 @@ import {imageNameForResourceType} from '../../panels/utils/utils.js';
 import {FilteredUISourceCodeListProvider} from './FilteredUISourceCodeListProvider.js';
 import {SourcesView} from './SourcesView.js';
 
-let openFileQuickOpenInstance: OpenFileQuickOpen;
-
 export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): OpenFileQuickOpen {
-    const {forceNew} = opts;
-    if (!openFileQuickOpenInstance || forceNew) {
-      openFileQuickOpenInstance = new OpenFileQuickOpen();
-    }
-
-    return openFileQuickOpenInstance;
-  }
-
   attach(): void {
     this.setDefaultScores(SourcesView.defaultUISourceCodeScores());
     super.attach();

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -2,12 +2,11 @@
 // 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 i18n from '../../core/i18n/i18n.js';
-import * as Formatter from '../../models/formatter/formatter.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {type UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 import {SourcesView} from './SourcesView.js';
 
@@ -28,43 +27,265 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/OutlineQuickOpen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let outlineQuickOpenInstance: OutlineQuickOpen;
+export type OutlineItem = {
+  title: string,
+  subtitle?: string, lineNumber: number, columnNumber: number,
+};
 
-export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
-  private items: Formatter.FormatterWorkerPool.OutlineItem[];
-  private active: boolean;
-  private constructor() {
-    super();
-    this.items = [];
-    this.active = false;
+export function outline(state: CodeMirror.EditorState): OutlineItem[] {
+  function toLineColumn(offset: number): {lineNumber: number, columnNumber: number} {
+    offset = Math.max(0, Math.min(offset, state.doc.length));
+    const line = state.doc.lineAt(offset);
+    return {lineNumber: line.number - 1, columnNumber: offset - line.from};
   }
 
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): OutlineQuickOpen {
-    const {forceNew} = opts;
-    if (!outlineQuickOpenInstance || forceNew) {
-      outlineQuickOpenInstance = new OutlineQuickOpen();
+  function subtitleFromParamList(): string {
+    while (cursor.name !== 'ParamList' && cursor.nextSibling()) {
     }
-
-    return outlineQuickOpenInstance;
+    let parameters = '';
+    if (cursor.name === 'ParamList' && cursor.firstChild()) {
+      do {
+        switch (cursor.name as string) {
+          case 'ArrayPattern':
+            parameters += '[‥]';
+            break;
+          case 'ObjectPattern':
+            parameters += '{‥}';
+            break;
+          case 'VariableDefinition':
+            parameters += state.sliceDoc(cursor.from, cursor.to);
+            break;
+          case 'Spread':
+            parameters += '...';
+            break;
+          case ',':
+            parameters += ', ';
+            break;
+        }
+      } while (cursor.nextSibling());
+    }
+    return `(${parameters})`;
   }
 
-  attach(): void {
-    this.items = [];
-    this.active = false;
+  const tree = CodeMirror.syntaxTree(state);
+  const items: OutlineItem[] = [];
+  const cursor = tree.cursor();
+  do {
+    switch (cursor.name) {
+      // css.grammar
+      case 'RuleSet': {
+        for (cursor.firstChild();; cursor.nextSibling()) {
+          const title = state.sliceDoc(cursor.from, cursor.to);
+          const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          items.push({title, lineNumber, columnNumber});
+          cursor.nextSibling();
+          if (cursor.name as string !== ',') {
+            break;
+          }
+        }
+        break;
+      }
+      // javascript.grammar
+      case 'FunctionDeclaration':
+      case 'MethodDeclaration': {
+        let prefix = '';
+        cursor.firstChild();
+        do {
+          switch (cursor.name as string) {
+            case 'abstract':
+            case 'async':
+            case 'get':
+            case 'set':
+            case 'static':
+              prefix = `${prefix}${cursor.name} `;
+              break;
+            case 'Star':
+              prefix += '*';
+              break;
+            case 'PropertyDefinition':
+            case 'VariableDefinition': {
+              const title = prefix + state.sliceDoc(cursor.from, cursor.to);
+              const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+              const subtitle = subtitleFromParamList();
+              items.push({title, subtitle, lineNumber, columnNumber});
+              break;
+            }
+          }
+        } while (cursor.nextSibling());
+        break;
+      }
+      case 'Property': {
+        let prefix = '';
+        cursor.firstChild();
+        do {
+          if (cursor.name as string === 'async' || cursor.name as string === 'get' || cursor.name as string === 'set') {
+            prefix = `${prefix}${cursor.name} `;
+          } else if (cursor.name as string === 'Star') {
+            prefix += '*';
+          } else if (cursor.name as string === 'PropertyDefinition') {
+            let title = state.sliceDoc(cursor.from, cursor.to);
+            const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+            while (cursor.nextSibling()) {
+              if (cursor.name as string === 'ClassExpression') {
+                title = `class ${title}`;
+                items.push({title, lineNumber, columnNumber});
+                break;
+              }
+              if (cursor.name as string === 'ArrowFunction' || cursor.name as string === 'FunctionExpression') {
+                cursor.firstChild();
+              }
+              if (cursor.name as string === 'async') {
+                prefix = `async ${prefix}`;
+              } else if (cursor.name as string === 'Star') {
+                prefix += '*';
+              } else if (cursor.name as string === 'ParamList') {
+                title = prefix + title;
+                const subtitle = subtitleFromParamList();
+                items.push({title, subtitle, lineNumber, columnNumber});
+                break;
+              }
+            }
+            break;
+          } else {
+            // We don't support any other Property syntax.
+            break;
+          }
+        } while (cursor.nextSibling());
+        break;
+      }
+      case 'PropertyName':
+      case 'VariableDefinition': {
+        if (cursor.matchContext(['ClassDeclaration'])) {
+          const title = 'class ' + state.sliceDoc(cursor.from, cursor.to);
+          const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          items.push({title, lineNumber, columnNumber});
+        } else if (
+            cursor.matchContext([
+              'AssignmentExpression',
+              'MemberExpression',
+            ]) ||
+            cursor.matchContext([
+              'VariableDeclaration',
+            ])) {
+          let title = state.sliceDoc(cursor.from, cursor.to);
+          const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          cursor.next();
+          do {
+            if (cursor.name as string === 'ArrowFunction' || cursor.name as string === 'FunctionExpression') {
+              cursor.firstChild();
+              let prefix = '';
+              while (cursor.name as string !== 'ParamList') {
+                if (cursor.name as string === 'async') {
+                  prefix = `async ${prefix}`;
+                } else if (cursor.name as string === 'Star') {
+                  prefix += '*';
+                }
+                if (!cursor.nextSibling()) {
+                  break;
+                }
+              }
+              title = prefix + title;
+              const subtitle = subtitleFromParamList();
+              items.push({title, subtitle, lineNumber, columnNumber});
+              break;
+            } else if (cursor.name as string === 'ClassExpression') {
+              title = `class ${title}`;
+              items.push({title, lineNumber, columnNumber});
+              break;
+            } else if (cursor.name as string === 'ObjectExpression' || cursor.name as string === 'VariableDefinition') {
+              cursor.prevSibling();
+              break;
+            }
+          } while (cursor.nextSibling());
+        }
+        break;
+      }
+      // wast.grammar
+      case 'App': {
+        if (cursor.firstChild() && cursor.nextSibling() && state.sliceDoc(cursor.from, cursor.to) === 'module') {
+          if (cursor.nextSibling() && cursor.name as string === 'Identifier') {
+            const title = state.sliceDoc(cursor.from, cursor.to);
+            const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+            items.push({title, lineNumber, columnNumber});
+          }
+          do {
+            if (cursor.name as string === 'App' && cursor.firstChild()) {
+              if (cursor.nextSibling() && state.sliceDoc(cursor.from, cursor.to) === 'func' && cursor.nextSibling() &&
+                  cursor.name as string === 'Identifier') {
+                const title = state.sliceDoc(cursor.from, cursor.to);
+                const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+                const params = [];
+                while (cursor.nextSibling()) {
+                  if (cursor.name as string === 'App' && cursor.firstChild()) {
+                    if (cursor.nextSibling() && state.sliceDoc(cursor.from, cursor.to) === 'param') {
+                      if (cursor.nextSibling() && cursor.name as string === 'Identifier') {
+                        params.push(state.sliceDoc(cursor.from, cursor.to));
+                      } else {
+                        params.push(`$${params.length}`);
+                      }
+                    }
+                    cursor.parent();
+                  }
+                }
+                const subtitle = `(${params.join(', ')})`;
+                items.push({title, subtitle, lineNumber, columnNumber});
+              }
+              cursor.parent();
+            }
+          } while (cursor.nextSibling());
+        }
+        break;
+      }
+      // cpp.grammar
+      case 'FieldIdentifier':
+      case 'Identifier': {
+        if (cursor.matchContext(['FunctionDeclarator'])) {
+          const title = state.sliceDoc(cursor.from, cursor.to);
+          const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          items.push({title, lineNumber, columnNumber});
+        }
+        break;
+      }
+      case 'TypeIdentifier': {
+        if (cursor.matchContext(['ClassSpecifier'])) {
+          const title = `class ${state.sliceDoc(cursor.from, cursor.to)}`;
+          const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          items.push({title, lineNumber, columnNumber});
+        } else if (cursor.matchContext(['StructSpecifier'])) {
+          const title = `struct ${state.sliceDoc(cursor.from, cursor.to)}`;
+          const {lineNumber, columnNumber} = toLineColumn(cursor.from);
+          items.push({title, lineNumber, columnNumber});
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  } while (cursor.next());
+  return items;
+}
+
+export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
+  private items: OutlineItem[] = [];
+  private active: boolean = false;
 
-    const uiSourceCode = this.currentUISourceCode();
-    if (uiSourceCode) {
-      this.active = Formatter.FormatterWorkerPool.formatterWorkerPool().outlineForMimetype(
-          uiSourceCode.workingCopy(), uiSourceCode.contentType().canonicalMimeType(),
-          this.didBuildOutlineChunk.bind(this));
+  attach(): void {
+    const sourceFrame = this.currentSourceFrame();
+    if (sourceFrame) {
+      this.active = true;
+      this.items = outline(sourceFrame.textEditor.state).map(({title, subtitle, lineNumber, columnNumber}) => {
+        ({lineNumber, columnNumber} = sourceFrame.editorLocationToUILocation(lineNumber, columnNumber));
+        return {title, subtitle, lineNumber, columnNumber};
+      });
+    } else {
+      this.active = false;
+      this.items = [];
     }
   }
 
-  private didBuildOutlineChunk(isLastChunk: boolean, items: Formatter.FormatterWorkerPool.OutlineItem[]): void {
-    this.items.push(...items);
-    this.refresh();
+  detach(): void {
+    this.active = false;
+    this.items = [];
   }
 
   itemCount(): number {
@@ -80,9 +301,9 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     const item = this.items[itemIndex];
     const methodName = query.split('(')[0];
     if (methodName.toLowerCase() === item.title.toLowerCase()) {
-      return 1 / (1 + item.line);
+      return 1 / (1 + item.lineNumber);
     }
-    return -item.line - 1;
+    return -item.lineNumber - 1;
   }
 
   renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
@@ -90,37 +311,45 @@ export class OutlineQuickOpen extends QuickOpen.FilteredListWidget.Provider {
     titleElement.textContent = item.title + (item.subtitle ? item.subtitle : '');
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query);
 
+    const sourceFrame = this.currentSourceFrame();
+    if (!sourceFrame) {
+      return;
+    }
+
     const tagElement = (titleElement.parentElement?.parentElement?.createChild('span', 'tag') as HTMLElement);
     if (!tagElement) {
       return;
     }
-    tagElement.textContent = ':' + (item.line + 1);
+
+    const disassembly = sourceFrame.wasmDisassembly;
+    if (disassembly) {
+      const lastBytecodeOffset = disassembly.lineNumberToBytecodeOffset(disassembly.lineNumbers - 1);
+      const bytecodeOffsetDigits = lastBytecodeOffset.toString(16).length;
+      tagElement.textContent = `:0x${item.columnNumber.toString(16).padStart(bytecodeOffsetDigits, '0')}`;
+    } else {
+      tagElement.textContent = `:${item.lineNumber + 1}`;
+    }
   }
 
   selectItem(itemIndex: number|null, _promptValue: string): void {
     if (itemIndex === null) {
       return;
     }
-    const uiSourceCode = this.currentUISourceCode();
-    if (!uiSourceCode) {
+    const sourceFrame = this.currentSourceFrame();
+    if (!sourceFrame) {
       return;
     }
-    const lineNumber = this.items[itemIndex].line;
-    if (!isNaN(lineNumber) && lineNumber >= 0) {
-      void Common.Revealer.reveal(uiSourceCode.uiLocation(lineNumber, this.items[itemIndex].column));
-    }
+    const item = this.items[itemIndex];
+    sourceFrame.revealPosition({lineNumber: item.lineNumber, columnNumber: item.columnNumber}, true);
   }
 
-  private currentUISourceCode(): Workspace.UISourceCode.UISourceCode|null {
+  private currentSourceFrame(): UISourceCodeFrame|null {
     const sourcesView = UI.Context.Context.instance().flavor(SourcesView);
-    if (!sourcesView) {
-      return null;
-    }
-    return sourcesView.currentUISourceCode();
+    return sourcesView && sourcesView.currentSourceFrame();
   }
 
   notFoundText(): string {
-    if (!this.currentUISourceCode()) {
+    if (!this.currentSourceFrame()) {
       return i18nString(UIStrings.noFileSelected);
     }
     if (!this.active) {

package/front_end/panels/sources/SourcesNavigator.ts

@@ -136,7 +136,7 @@ export class NetworkNavigatorView extends NavigatorView {
   }
 
   private inspectedURLChanged(event: Common.EventTarget.EventTargetEvent<SDK.Target.Target>): void {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (event.data !== mainTarget) {
       return;
     }
@@ -152,7 +152,7 @@ export class NetworkNavigatorView extends NavigatorView {
   }
 
   uiSourceCodeAdded(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     const inspectedURL = mainTarget && mainTarget.inspectedURL();
     if (!inspectedURL) {
       return;

package/front_end/panels/sources/SourcesPanel.ts

@@ -651,11 +651,13 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
   }
 
   private pauseOnExceptionEnabledChanged(): void {
-    const enabled = Common.Settings.Settings.instance().moduleSetting('pauseOnExceptionEnabled').get();
-    const button = (this.pauseOnExceptionButton as UI.Toolbar.ToolbarToggle);
-    button.setToggled(enabled);
-    button.setTitle(enabled ? i18nString(UIStrings.dontPauseOnExceptions) : i18nString(UIStrings.pauseOnExceptions));
-    this.debugToolbarDrawer.classList.toggle('expanded', enabled);
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.BREAKPOINT_VIEW)) {
+      const enabled = Common.Settings.Settings.instance().moduleSetting('pauseOnExceptionEnabled').get();
+      const button = (this.pauseOnExceptionButton as UI.Toolbar.ToolbarToggle);
+      button.setToggled(enabled);
+      button.setTitle(enabled ? i18nString(UIStrings.dontPauseOnExceptions) : i18nString(UIStrings.pauseOnExceptions));
+      this.debugToolbarDrawer.classList.toggle('expanded', enabled);
+    }
   }
 
   private async updateDebuggerButtonsAndStatus(): Promise<void> {
@@ -871,10 +873,12 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     debugToolbar.appendSeparator();
     debugToolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton(this.toggleBreakpointsActiveAction));
 
-    this.pauseOnExceptionButton = new UI.Toolbar.ToolbarToggle('', 'largeicon-pause-on-exceptions');
-    this.pauseOnExceptionButton.addEventListener(
-        UI.Toolbar.ToolbarButton.Events.Click, this.togglePauseOnExceptions, this);
-    debugToolbar.appendToolbarItem(this.pauseOnExceptionButton);
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.BREAKPOINT_VIEW)) {
+      this.pauseOnExceptionButton = new UI.Toolbar.ToolbarToggle('', 'largeicon-pause-on-exceptions');
+      this.pauseOnExceptionButton.addEventListener(
+          UI.Toolbar.ToolbarButton.Events.Click, this.togglePauseOnExceptions, this);
+      debugToolbar.appendToolbarItem(this.pauseOnExceptionButton);
+    }
 
     return debugToolbar;
   }

package/front_end/panels/sources/SourcesView.ts

@@ -69,7 +69,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     super();
 
     this.element.id = 'sources-panel-sources-view';
-    this.setMinimumAndPreferredSizes(250, 52, 250, 100);
+    this.setMinimumAndPreferredSizes(88, 52, 150, 100);
 
     this.placeholderOptionArray = [];
     this.selectedIndex = 0;
@@ -191,7 +191,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   private placeholderOnKeyDown(event: Event): void {
     const keyboardEvent = (event as KeyboardEvent);
-    if (isEnterOrSpaceKey(keyboardEvent)) {
+    if (Platform.KeyboardUtilities.isEnterOrSpaceKey(keyboardEvent)) {
       this.placeholderOptionArray[this.selectedIndex].handler();
       return;
     }
@@ -760,6 +760,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'sources.jump-to-next-location':
         sourcesView.onJumpToNextLocation();
         return true;
+      case 'sources.next-editor-tab':
+        sourcesView.editorContainer.selectNextTab();
+        return true;
+      case 'sources.previous-editor-tab':
+        sourcesView.editorContainer.selectPrevTab();
+        return true;
       case 'sources.close-editor-tab':
         return sourcesView.onCloseEditorTab();
       case 'sources.go-to-line':

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -216,6 +216,14 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     return result;
   }
 
+  selectNextTab(): void {
+    this.tabbedPane.selectNextTab();
+  }
+
+  selectPrevTab(): void {
+    this.tabbedPane.selectPrevTab();
+  }
+
   private addViewListeners(): void {
     if (!this.currentView || !(this.currentView instanceof SourceFrame.SourceFrame.SourceFrameImpl)) {
       return;