Make several toolbars wrappable so their items don't get hidden

When the devtools window gets narrower, some of the toolbars don't have
enough space to display their items (icons, dropdowns, buttons, etc.).
This is the case for the Network panel, the Console panel, the Coverage
panel, the Performance panel (including the various subpanels in it).

It's easy to run into this issue with toolbars that have a lot of
controls in it (e.g. Network), but for users who require a larger zoom
level to use the tools, it's almost unavoidable. This is also more of a
problem when you don't have a lot of space for devtools (which is often
the case on laptops and with devtools displayed on the side).

Turns out toolbars support a wrap mode already, so this is what I've
used here to address the issue.

I've also given softDropDownButtons the ability to shrink. Otherwise
they are fixed at a 120px width, and that takes a lot of space in the
toolbars (e.g. the frame switcher in the Console panel).

Before/after animations for network and console:
https://imgur.com/a/obtGr1n

Bug: 1194407
Change-Id: Ia6d04091458a6598f7fa812742d37c833cec2f09
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2796891
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Brandon Walderman <brwalder@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

front_end/panels/console/ConsoleView.ts

diff --git a/front_end/panels/console/ConsoleView.ts b/front_end/panels/console/ConsoleView.ts
index 5b9798b..73a6902 100644
--- a/front_end/panels/console/ConsoleView.ts
+++ b/front_end/panels/console/ConsoleView.ts
@@ -335,6 +335,7 @@
         this._groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole));
 
     const toolbar = new UI.Toolbar.Toolbar('console-main-toolbar', this._consoleToolbarContainer);
+    toolbar.makeWrappable(true);
     const rightToolbar = new UI.Toolbar.Toolbar('', this._consoleToolbarContainer);
     toolbar.appendToolbarItem(this._splitWidget.createShowHideSidebarButton(
         i18nString(UIStrings.showConsoleSidebar), i18nString(UIStrings.hideConsoleSidebar)));

front_end/panels/coverage/CoverageView.ts

diff --git a/front_end/panels/coverage/CoverageView.ts b/front_end/panels/coverage/CoverageView.ts
index 18762b6..a20d2e5 100644
--- a/front_end/panels/coverage/CoverageView.ts
+++ b/front_end/panels/coverage/CoverageView.ts
@@ -135,6 +135,7 @@
 
     const toolbarContainer = this.contentElement.createChild('div', 'coverage-toolbar-container');
     const toolbar = new UI.Toolbar.Toolbar('coverage-toolbar', toolbarContainer);
+    toolbar.makeWrappable(true);
 
     this._coverageTypeComboBox = new UI.Toolbar.ToolbarComboBox(
         this._onCoverageTypeComboBoxSelectionChanged.bind(this), i18nString(UIStrings.chooseCoverageGranularityPer));

front_end/panels/network/NetworkPanel.ts

diff --git a/front_end/panels/network/NetworkPanel.ts b/front_end/panels/network/NetworkPanel.ts
index 637c8fd..96242e5 100644
--- a/front_end/panels/network/NetworkPanel.ts
+++ b/front_end/panels/network/NetworkPanel.ts
@@ -212,6 +212,7 @@
 
     const networkToolbarContainer = panel.contentElement.createChild('div', 'network-toolbar-container');
     this._panelToolbar = new UI.Toolbar.Toolbar('', networkToolbarContainer);
+    this._panelToolbar.makeWrappable(true);
     this._rightToolbar = new UI.Toolbar.Toolbar('', networkToolbarContainer);
 
     this._filterBar = new UI.FilterBar.FilterBar('networkPanel', true);

front_end/timeline/TimelinePanel.js

diff --git a/front_end/timeline/TimelinePanel.js b/front_end/timeline/TimelinePanel.js
index 99133cb..bcb0e2d 100644
--- a/front_end/timeline/TimelinePanel.js
+++ b/front_end/timeline/TimelinePanel.js
@@ -311,6 +311,7 @@
 
     const timelineToolbarContainer = this.element.createChild('div', 'timeline-toolbar-container');
     this._panelToolbar = new UI.Toolbar.Toolbar('timeline-main-toolbar', timelineToolbarContainer);
+    this._panelToolbar.makeWrappable(true);
     this._panelRightToolbar = new UI.Toolbar.Toolbar('', timelineToolbarContainer);
     this._createSettingsPane();
     this._updateShowSettingsToolbarButton();

front_end/timeline/TimelineTreeView.js

diff --git a/front_end/timeline/TimelineTreeView.js b/front_end/timeline/TimelineTreeView.js
index 3d6c863..acb7e72 100644
--- a/front_end/timeline/TimelineTreeView.js
+++ b/front_end/timeline/TimelineTreeView.js
@@ -242,6 +242,7 @@
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'timelineTreeViewDetailsSplitWidget');
     const mainView = new UI.Widget.VBox();
     const toolbar = new UI.Toolbar.Toolbar('', mainView.element);
+    toolbar.makeWrappable(true);
     this.populateToolbar(toolbar);
 
     this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({

front_end/ui/softDropDownButton.css

diff --git a/front_end/ui/softDropDownButton.css b/front_end/ui/softDropDownButton.css
index 2e0b5f7..b6e68a1 100644
--- a/front_end/ui/softDropDownButton.css
+++ b/front_end/ui/softDropDownButton.css
@@ -18,7 +18,7 @@
 
 button.soft-dropdown > .title {
   padding-right: 5px;
-  width: 120px;
+  flex: 0 1 120px;
   overflow: hidden;
   text-overflow: ellipsis;
 }