Duplicate settings screen css styles

Previously we relied on the settings screen styles in order to
style the settings pages outside of the settings panel. Remove
the cross-panel css dependency and duplicate the css settings.

Bug: 368238837
Change-Id: Ie06f08d68e93868fcb1b185ad80095750656ac5a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5999250
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/mobile_throttling/BUILD.gn

@@ -31,7 +31,6 @@ devtools_module("mobile_throttling") {
     "../../ui/components/icon_button:bundle",
     "../../ui/legacy:bundle",
     "../../ui/visual_logging:bundle",
-    "../settings:bundle",
   ]
 }
 

front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -9,7 +9,6 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import settingsScreenStyles from '../settings/settingsScreen.css.js';
 
 import throttlingSettingsTabStyles from './throttlingSettingsTab.css.js';
 
@@ -166,7 +165,7 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
   override wasShown(): void {
     super.wasShown();
     this.list.registerCSSFiles([throttlingSettingsTabStyles]);
-    this.registerCSSFiles([throttlingSettingsTabStyles, settingsScreenStyles]);
+    this.registerCSSFiles([throttlingSettingsTabStyles]);
     this.conditionsUpdated();
   }
 

front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -95,3 +95,28 @@
 .editor-buttons {
   margin-top: 10px;
 }
+
+.settings-card-container-wrapper {
+  padding-top: var(--sys-size-8);
+  padding-bottom: var(--sys-size-8);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+@media (max-width: 1000px) {
+  .settings-card-container-wrapper {
+    position: absolute;
+    top: var(--sys-size-8);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+  }
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}

front_end/panels/sensors/LocationsSettingsTab.ts

@@ -8,7 +8,6 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import settingsScreenStyles from '../settings/settingsScreen.css.js';
 
 import locationsSettingsTabStyles from './locationsSettingsTab.css.js';
 
@@ -168,7 +167,7 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
 
   override wasShown(): void {
     super.wasShown();
-    this.registerCSSFiles([locationsSettingsTabStyles, settingsScreenStyles]);
+    this.registerCSSFiles([locationsSettingsTabStyles]);
     this.list.registerCSSFiles([locationsSettingsTabStyles]);
     this.locationsUpdated();
   }

front_end/panels/sensors/locationsSettingsTab.css

@@ -70,3 +70,28 @@
 .locations-input-container {
   padding: 1px;
 }
+
+.settings-card-container-wrapper {
+  padding-top: var(--sys-size-8);
+  padding-bottom: var(--sys-size-8);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+@media (max-width: 1000px) {
+  .settings-card-container-wrapper {
+    position: absolute;
+    top: var(--sys-size-8);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+  }
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}

front_end/panels/settings/BUILD.gn

@@ -52,7 +52,6 @@ devtools_entrypoint("bundle") {
   visibility = [
     ":*",
     "../../entrypoints/*",
-    "../../panels/mobile_throttling/*",
     "../../panels/profiler/*",
   ]