Use kebap case in view IDs so that VE context will also be in kebab case.

Bug: chromium:1467464, b:320405843
Change-Id: Idaae3e602af5f3e81f958c50f095fdf0453b0be6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5210776
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
diff --git a/front_end/ui/legacy/View.ts b/front_end/ui/legacy/View.ts
index c8e69bb..ac168e7 100644
--- a/front_end/ui/legacy/View.ts
+++ b/front_end/ui/legacy/View.ts
@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 
 import {type TabbedPane} from './TabbedPane.js';
 import {type ToolbarItem, type ToolbarMenuButton} from './Toolbar.js';
 import {ViewManager} from './ViewManager.js';
-
 import {VBox, type Widget} from './Widget.js';
 
 export interface View {
@@ -30,12 +29,17 @@
 
 export class SimpleView extends VBox implements View {
   readonly #title: Platform.UIString.LocalizedString;
-  readonly #viewId: string;
+  readonly #viewId: Lowercase<string>;
 
-  constructor(title: Platform.UIString.LocalizedString, isWebComponent?: boolean, viewId?: string) {
+  constructor(title: Platform.UIString.LocalizedString, isWebComponent?: boolean, viewId?: Lowercase<string>) {
     super(isWebComponent);
     this.#title = title;
-    this.#viewId = viewId ?? title;
+    if (viewId) {
+      if (!Platform.StringUtilities.isExtendedKebabCase(viewId)) {
+        throw new Error(`Invalid view ID '${viewId}'`);
+      }
+    }
+    this.#viewId = viewId ?? Platform.StringUtilities.toKebabCase(title);
   }
 
   viewId(): string {