The Debugger's Sources and Outline panes have or can have a few controls that behave like toolbars, kinda look like toolbars, but have a very ad hoc design.
Sources
Right-clicking a domain name or folder and picking "Set directory root" makes this node the top-level node and hides other branches in the tree. We use a kind of header with a "Home" icon to signal this. When clicking anywhere in that header, we go back to the unfiltered view.
It feels counter-intuitive that clicking the current selection's label would undo the selection. For that reason, I recommend doing a split control with a "undo" (or "go back") button one one side and the label on the other side:
On the label's side, we could show the label text only (like this mockup), or maybe add the selected root's icon: window for Main Thread, worker icon for Workers, globe icon for domains, folder icon for directories.
Outline
In the Outline tab, we use a big text input with a style that doesn't match anything else in Debugger or DevTools, and we loose a bunch of space:
with the input's height and the padding around it
using a fixed footer at the bottom for just one button
My proposal is to move both controls (filter input and the sorting option) into a single fixed header that mimicks styles from Inspector (Rules, Computed) or Console:
(I used a light gray background like the top toolbar and tabs, but for consistency with other "search/filter" toolbars we probably want a white background here.)
The Debugger's Sources and Outline panes have or can have a few controls that behave like toolbars, kinda look like toolbars, but have a very ad hoc design.
Sources
Right-clicking a domain name or folder and picking "Set directory root" makes this node the top-level node and hides other branches in the tree. We use a kind of header with a "Home" icon to signal this. When clicking anywhere in that header, we go back to the unfiltered view.
It feels counter-intuitive that clicking the current selection's label would undo the selection. For that reason, I recommend doing a split control with a "undo" (or "go back") button one one side and the label on the other side:
On the label's side, we could show the label text only (like this mockup), or maybe add the selected root's icon: window for Main Thread, worker icon for Workers, globe icon for domains, folder icon for directories.
Outline
In the Outline tab, we use a big text input with a style that doesn't match anything else in Debugger or DevTools, and we loose a bunch of space:
My proposal is to move both controls (filter input and the sorting option) into a single fixed header that mimicks styles from Inspector (Rules, Computed) or Console:
(I used a light gray background like the top toolbar and tabs, but for consistency with other "search/filter" toolbars we probably want a white background here.)