[sources] Fix resize handler for vertical debugger sidebar.

The resizer logic has to act directly on the `<devtools-toolbar>`,
otherwise the pointer events aren't caught, and the only interesting
toolbar element within the toolbar container is the script view toolbar,
since the other toolbar only contains a single button.

Fixed: 408383933
Change-Id: Ic34b01d115e8168ea0ac07382f68b1271bf9759c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6441161
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>

Author: bmeurer

front_end/panels/sources/SourcesPanel.ts

@@ -341,9 +341,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
     const isInWrapper = UI.Context.Context.instance().flavor(QuickSourceView) &&
         !UI.InspectorView.InspectorView.instance().isDrawerMinimized();
     if (panel.splitWidget.isVertical() || isInWrapper) {
-      panel.splitWidget.uninstallResizer(panel.sourcesViewInternal.toolbarContainerElement());
+      panel.splitWidget.uninstallResizer(panel.sourcesViewInternal.scriptViewToolbar());
     } else {
-      panel.splitWidget.installResizer(panel.sourcesViewInternal.toolbarContainerElement());
+      panel.splitWidget.installResizer(panel.sourcesViewInternal.scriptViewToolbar());
     }
     if (!isInWrapper) {
       panel.sourcesViewInternal.leftToolbar().appendToolbarItem(panel.toggleNavigatorSidebarButton);

front_end/panels/sources/SourcesView.ts

@@ -63,8 +63,7 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   private readonly sourceViewByUISourceCode: Map<Workspace.UISourceCode.UISourceCode, UI.Widget.Widget>;
   editorContainer: TabbedEditorContainer;
   private readonly historyManager: EditingLocationHistoryManager;
-  private readonly toolbarContainerElementInternal: HTMLElement;
-  private readonly scriptViewToolbar: UI.Toolbar.Toolbar;
+  readonly #scriptViewToolbar: UI.Toolbar.Toolbar;
   private readonly bottomToolbarInternal: UI.Toolbar.Toolbar;
   private toolbarChangedListener: Common.EventTarget.EventDescriptor|null;
   private readonly focusedPlaceholderElement?: HTMLElement;
@@ -98,11 +97,11 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
     this.historyManager = new EditingLocationHistoryManager(this);
 
-    this.toolbarContainerElementInternal = this.element.createChild('div', 'sources-toolbar');
-    this.toolbarContainerElementInternal.setAttribute('jslog', `${VisualLogging.toolbar('bottom')}`);
-    this.scriptViewToolbar = this.toolbarContainerElementInternal.createChild('devtools-toolbar');
-    this.scriptViewToolbar.style.flex = 'auto';
-    this.bottomToolbarInternal = this.toolbarContainerElementInternal.createChild('devtools-toolbar');
+    const toolbarContainerElementInternal = this.element.createChild('div', 'sources-toolbar');
+    toolbarContainerElementInternal.setAttribute('jslog', `${VisualLogging.toolbar('bottom')}`);
+    this.#scriptViewToolbar = toolbarContainerElementInternal.createChild('devtools-toolbar');
+    this.#scriptViewToolbar.style.flex = 'auto';
+    this.bottomToolbarInternal = toolbarContainerElementInternal.createChild('devtools-toolbar');
 
     this.toolbarChangedListener = null;
 
@@ -232,6 +231,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     return this.bottomToolbarInternal;
   }
 
+  scriptViewToolbar(): UI.Toolbar.Toolbar {
+    return this.#scriptViewToolbar;
+  }
+
   override wasShown(): void {
     super.wasShown();
     UI.Context.Context.instance().setFlavor(SourcesView, this);
@@ -242,10 +245,6 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     super.willHide();
   }
 
-  toolbarContainerElement(): Element {
-    return this.toolbarContainerElementInternal;
-  }
-
   searchableView(): UI.SearchableView.SearchableView {
     return this.searchableViewInternal;
   }
@@ -348,11 +347,11 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     const view = this.visibleView();
     if (view instanceof UI.View.SimpleView) {
       void view.toolbarItems().then(items => {
-        this.scriptViewToolbar.removeToolbarItems();
+        this.#scriptViewToolbar.removeToolbarItems();
         for (const action of getRegisteredEditorActions()) {
-          this.scriptViewToolbar.appendToolbarItem(action.getOrCreateButton(this));
+          this.#scriptViewToolbar.appendToolbarItem(action.getOrCreateButton(this));
         }
-        items.map(item => this.scriptViewToolbar.appendToolbarItem(item));
+        items.map(item => this.#scriptViewToolbar.appendToolbarItem(item));
       });
     }
   }