Simplify device emulation toolbar composition

Fixed: 379846475
Change-Id: I99fd9ef09e8724aecf2b4a3227785eda8fb4dfb2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6187107
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/emulation/DeviceModeToolbar.ts

@@ -254,13 +254,9 @@ export class DeviceModeToolbar {
     this.elementInternal.classList.add('device-mode-toolbar');
     this.elementInternal.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
 
-    const leftContainer = this.elementInternal.createChild('div', 'device-mode-toolbar-spacer');
-    leftContainer.createChild('div', 'device-mode-toolbar-spacer');
-    const leftToolbar = leftContainer.createChild('devtools-toolbar');
-    this.fillLeftToolbar(leftToolbar);
+    const mainToolbar = this.elementInternal.createChild('devtools-toolbar', 'main-toolbar');
+    this.appendDeviceSelectMenu(mainToolbar);
 
-    const mainToolbar = this.elementInternal.createChild('devtools-toolbar');
-    mainToolbar.wrappable = true;
     this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
         i18nString(UIStrings.width), {jslogContext: 'width'});
     this.widthInput.addEventListener('sizechanged', ({size: width}) => {
@@ -279,17 +275,11 @@ export class DeviceModeToolbar {
         this.model.setHeight(height);
       }
     });
-    this.fillMainToolbar(mainToolbar);
-
-    const rightContainer = this.elementInternal.createChild('div', 'device-mode-toolbar-spacer');
-    const rightToolbar = rightContainer.createChild('devtools-toolbar', 'device-mode-toolbar-fixed-size');
-    rightToolbar.wrappable = true;
-    this.fillRightToolbar(rightToolbar);
-    const modeToolbar = rightContainer.createChild('devtools-toolbar', 'device-mode-toolbar-fixed-size');
-    modeToolbar.wrappable = true;
-    this.fillModeToolbar(modeToolbar);
-    rightContainer.createChild('div', 'device-mode-toolbar-spacer');
-    const optionsToolbar = rightContainer.createChild('devtools-toolbar', 'device-mode-toolbar-options');
+    this.appendDimensionInputs(mainToolbar);
+
+    this.appendDisplaySettings(mainToolbar);
+    this.appendDevicePositionItems(mainToolbar);
+    const optionsToolbar = this.elementInternal.createChild('devtools-toolbar', 'device-mode-toolbar-options');
     optionsToolbar.wrappable = true;
     this.fillOptionsToolbar(optionsToolbar);
 
@@ -307,10 +297,7 @@ export class DeviceModeToolbar {
 
     function updateToolbarsEnabled(): void {
       const enabled = model.toolbarControlsEnabledSetting().get();
-      leftToolbar.setEnabled(enabled);
       mainToolbar.setEnabled(enabled);
-      rightToolbar.setEnabled(enabled);
-      modeToolbar.setEnabled(enabled);
       optionsToolbar.setEnabled(enabled);
     }
   }
@@ -321,7 +308,7 @@ export class DeviceModeToolbar {
     return element;
   }
 
-  private fillLeftToolbar(toolbar: UI.Toolbar.Toolbar): void {
+  private appendDeviceSelectMenu(toolbar: UI.Toolbar.Toolbar): void {
     toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
     this.deviceSelectItem =
         new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
@@ -330,7 +317,7 @@ export class DeviceModeToolbar {
     toolbar.appendToolbarItem(this.deviceSelectItem);
   }
 
-  private fillMainToolbar(toolbar: UI.Toolbar.Toolbar): void {
+  private appendDimensionInputs(toolbar: UI.Toolbar.Toolbar): void {
     toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.widthInput));
 
     const xElement = document.createElement('div');
@@ -342,18 +329,20 @@ export class DeviceModeToolbar {
     toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.heightInput));
   }
 
-  private fillRightToolbar(toolbar: UI.Toolbar.Toolbar): void {
+  private appendDisplaySettings(toolbar: UI.Toolbar.Toolbar): void {
     toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
     this.scaleItem =
         new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this), undefined, undefined, 'scale');
     setTitleForButton(this.scaleItem, i18nString(UIStrings.zoom));
+    this.scaleItem.turnShrinkable();
     this.scaleItem.setDarkText();
     toolbar.appendToolbarItem(this.scaleItem);
 
     toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
 
     this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
         this.appendDeviceScaleMenuItems.bind(this), undefined, undefined, 'device-pixel-ratio');
+    this.deviceScaleItem.turnShrinkable();
     this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
     setTitleForButton(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
     this.deviceScaleItem.setDarkText();
@@ -362,17 +351,19 @@ export class DeviceModeToolbar {
     toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
     this.uaItem =
         new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this), undefined, undefined, 'device-type');
+    this.uaItem.turnShrinkable();
     this.uaItem.setVisible(this.showUserAgentTypeSetting.get());
     setTitleForButton(this.uaItem, i18nString(UIStrings.deviceType));
     this.uaItem.setDarkText();
     toolbar.appendToolbarItem(this.uaItem);
 
     this.throttlingConditionsItem =
         MobileThrottling.ThrottlingManager.throttlingManager().createMobileThrottlingButton();
+    this.throttlingConditionsItem.turnShrinkable();
     toolbar.appendToolbarItem(this.throttlingConditionsItem);
   }
 
-  private fillModeToolbar(toolbar: UI.Toolbar.Toolbar): void {
+  private appendDevicePositionItems(toolbar: UI.Toolbar.Toolbar): void {
     toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
     this.modeButton = new UI.Toolbar.ToolbarButton('', 'screen-rotation', undefined, 'screen-rotation');
     this.modeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.modeMenuClicked, this);
@@ -387,6 +378,7 @@ export class DeviceModeToolbar {
     toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
     this.postureItem = new UI.Toolbar.ToolbarMenuButton(
         this.appendDevicePostureItems.bind(this), undefined, undefined, 'device-posture');
+    this.postureItem.turnShrinkable();
     this.postureItem.setDarkText();
     setTitleForButton(this.postureItem, i18nString(UIStrings.devicePosture));
     toolbar.appendToolbarItem(this.postureItem);

front_end/panels/emulation/deviceModeView.css

@@ -30,23 +30,14 @@ devtools-toolbar {
   }
 }
 
-devtools-toolbar.device-mode-toolbar-fixed-size {
-  flex: 0 1 auto;
+devtools-toolbar.main-toolbar {
+  margin: 0 auto;
 }
 
 devtools-toolbar.device-mode-toolbar-options {
-  position: sticky;
-  right: 0;
   flex: none;
 }
 
-.device-mode-toolbar-spacer {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
 .device-mode-content-clip {
   overflow: hidden;
   flex: auto;