[cleanup] Remove unnecessary shadow roots in device mode toolbar.
The shadow roots were originally required due to the enforced shadow DOM
by the old `UI.Toolbar.Toolbar`, but with the new light DOM approach,
these are just unnecessary.
Bug: 391381439, 388445687
Change-Id: Ia1a99363e82bd624c91d29bda0654cd5ab63be30
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6194452
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
diff --git a/front_end/panels/emulation/BUILD.gn b/front_end/panels/emulation/BUILD.gn
index be05883..9963fd3 100644
--- a/front_end/panels/emulation/BUILD.gn
+++ b/front_end/panels/emulation/BUILD.gn
@@ -16,12 +16,6 @@
]
}
-generate_css("legacy_css_files") {
- sources = [ "deviceModeToolbar.css" ]
-
- legacy = true
-}
-
devtools_module("emulation") {
sources = [
"AdvancedApp.ts",
@@ -63,7 +57,6 @@
deps = [
":css_files",
":emulation",
- ":legacy_css_files",
]
visibility = [
diff --git a/front_end/panels/emulation/DeviceModeToolbar.ts b/front_end/panels/emulation/DeviceModeToolbar.ts
index 4799923..46d0d52 100644
--- a/front_end/panels/emulation/DeviceModeToolbar.ts
+++ b/front_end/panels/emulation/DeviceModeToolbar.ts
@@ -14,7 +14,6 @@
import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
import * as EmulationComponents from './components/components.js';
-import deviceModeToolbarStyles from './deviceModeToolbar.css.legacy.js';
const UIStrings = {
/**
@@ -302,14 +301,14 @@
}
}
- private createEmptyToolbarElement(): Element {
+ private createEmptyToolbarElement(): HTMLDivElement {
const element = document.createElement('div');
element.classList.add('device-mode-empty-toolbar-element');
return element;
}
private appendDeviceSelectMenu(toolbar: UI.Toolbar.Toolbar): void {
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
this.deviceSelectItem =
new UI.Toolbar.ToolbarMenuButton(this.appendDeviceMenuItems.bind(this), undefined, undefined, 'device');
this.deviceSelectItem.turnShrinkable();
@@ -323,14 +322,14 @@
const xElement = document.createElement('div');
xElement.classList.add('device-mode-x');
xElement.textContent = '×';
- this.xItem = this.wrapToolbarItem(xElement);
+ this.xItem = new UI.Toolbar.ToolbarItem(xElement);
toolbar.appendToolbarItem(this.xItem);
toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.heightInput));
}
private appendDisplaySettings(toolbar: UI.Toolbar.Toolbar): void {
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
this.scaleItem =
new UI.Toolbar.ToolbarMenuButton(this.appendScaleMenuItems.bind(this), undefined, undefined, 'scale');
setTitleForButton(this.scaleItem, i18nString(UIStrings.zoom));
@@ -338,7 +337,7 @@
this.scaleItem.setDarkText();
toolbar.appendToolbarItem(this.scaleItem);
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
this.deviceScaleItem = new UI.Toolbar.ToolbarMenuButton(
this.appendDeviceScaleMenuItems.bind(this), undefined, undefined, 'device-pixel-ratio');
@@ -348,7 +347,7 @@
this.deviceScaleItem.setDarkText();
toolbar.appendToolbarItem(this.deviceScaleItem);
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
this.uaItem =
new UI.Toolbar.ToolbarMenuButton(this.appendUserAgentMenuItems.bind(this), undefined, undefined, 'device-type');
this.uaItem.turnShrinkable();
@@ -364,7 +363,7 @@
}
private appendDevicePositionItems(toolbar: UI.Toolbar.Toolbar): void {
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
this.modeButton = new UI.Toolbar.ToolbarButton('', 'screen-rotation', undefined, 'screen-rotation');
this.modeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.modeMenuClicked, this);
toolbar.appendToolbarItem(this.modeButton);
@@ -375,7 +374,7 @@
toolbar.appendToolbarItem(this.spanButton);
// Show posture toolbar menu for foldable devices.
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
this.postureItem = new UI.Toolbar.ToolbarMenuButton(
this.appendDevicePostureItems.bind(this), undefined, undefined, 'device-posture');
this.postureItem.turnShrinkable();
@@ -406,7 +405,7 @@
}
private fillOptionsToolbar(toolbar: UI.Toolbar.Toolbar): void {
- toolbar.appendToolbarItem(this.wrapToolbarItem(this.createEmptyToolbarElement()));
+ toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
const moreOptionsButton = new UI.Toolbar.ToolbarMenuButton(
this.appendOptionsMenuItems.bind(this), true, undefined, 'more-options', 'dots-vertical');
moreOptionsButton.setTitle(i18nString(UIStrings.moreOptions));
@@ -547,13 +546,6 @@
this.model.reset();
}
- private wrapToolbarItem(element: Element): UI.Toolbar.ToolbarItem {
- const container = document.createElement('div');
- const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {cssFile: deviceModeToolbarStyles});
- shadowRoot.appendChild(element);
- return new UI.Toolbar.ToolbarItem(container);
- }
-
private emulateDevice(device: EmulationModel.EmulatedDevices.EmulatedDevice): void {
const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
this.model.emulate(
diff --git a/front_end/panels/emulation/deviceModeToolbar.css b/front_end/panels/emulation/deviceModeToolbar.css
deleted file mode 100644
index b58f1dc..0000000
--- a/front_end/panels/emulation/deviceModeToolbar.css
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * Copyright 2015 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-.device-mode-x {
- margin: 0 1px;
- font-size: 16px;
-}
-
-.device-mode-empty-toolbar-element {
- width: 0;
-}
diff --git a/front_end/panels/emulation/deviceModeView.css b/front_end/panels/emulation/deviceModeView.css
index 69775d7..1ec18ad 100644
--- a/front_end/panels/emulation/deviceModeView.css
+++ b/front_end/panels/emulation/deviceModeView.css
@@ -20,6 +20,15 @@
align-items: stretch;
}
+.device-mode-x {
+ margin: 0 1px;
+ font-size: 16px;
+}
+
+.device-mode-empty-toolbar-element {
+ width: 0;
+}
+
devtools-toolbar {
overflow: hidden;
flex: 0 100000 auto;
