Duplicate empty state styles in Recorder controller

This CL duplicates the styles required for the empty states in order
to address the regression on focus styles if the window is narrow.

In the long run we want to remove the preset instead, see linked
bug crbug.com/400964588.

Bug: 402024085, 400964588
Change-Id: I9198f314c9075214d081470e7e3c9a2252431a31
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6349186
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/recorder/RecorderController.ts

@@ -17,9 +17,6 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import type * as Menus from '../../ui/components/menus/menus.js';
-// inspectorCommonStyles is imported for the empty state styling that is used for the start view
-// eslint-disable-next-line rulesdir/es-modules-import
-import inspectorCommonStylesRaw from '../../ui/legacy/inspectorCommon.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -34,10 +31,6 @@ import * as Actions from './recorder-actions/recorder-actions.js';
 import recorderControllerStylesRaw from './recorderController.css.js';
 import * as Events from './RecorderEvents.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
-const inspectorCommonStyles = new CSSStyleSheet();
-inspectorCommonStyles.replaceSync(inspectorCommonStylesRaw.cssContent);
-
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const recorderControllerStyles = new CSSStyleSheet();
 recorderControllerStyles.replaceSync(recorderControllerStylesRaw.cssContent);
@@ -188,7 +181,7 @@ const CONVERTER_ID_TO_METRIC: Record<string, Host.UserMetrics.RecordingExported|
 
 @customElement('devtools-recorder-controller')
 export class RecorderController extends LitElement {
-  static override readonly styles = [recorderControllerStyles, inspectorCommonStyles];
+  static override readonly styles = [recorderControllerStyles];
 
   @state() declare private currentRecordingSession?: Models.RecordingSession.RecordingSession;
   @state() declare private currentRecording: StoredRecording|undefined;

front_end/panels/recorder/recorderController.css

@@ -141,3 +141,38 @@ devtools-recording-list-view {
 .empty-state-description .x-link:focus-visible {
   outline: -webkit-focus-ring-color auto 1px;
 }
+
+.empty-state {
+  margin: var(--sys-size-5);
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  min-height: fit-content;
+  min-width: fit-content;
+
+  > * {
+    max-width: var(--sys-size-29);
+  }
+
+  .empty-state-header {
+    font: var(--sys-typescale-headline5);
+    margin-bottom: var(--sys-size-3);
+  }
+
+  .empty-state-description {
+    font: var(--sys-typescale-body4-regular);
+    color: var(--sys-color-on-surface-subtle);
+
+    > x-link {  /* stylelint-disable-line selector-type-no-unknown */
+      white-space: nowrap;
+      margin-left: var(--sys-size-3);
+    }
+  }
+
+  > devtools-button {
+    margin-top: var(--sys-size-7);
+  }
+}