[ui] Add scaffold widget script

Adds a new script to scaffold UI widgets, automating the initial
boilerplate and structural setup. This would help us build widgets
faster and more consistently, in line with the UI engineering vision

Bug: none
Change-Id: I79d61be5b4ab3ad6d899346fded9425e816a79a0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6556183
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>

Author: ergunsh

scripts/scaffold/README.md

@@ -0,0 +1,4 @@
+# Scaffold script
+
+This directory contains scripts designed to automate the creation of boilerplate code for various components and
+modules with Chrome DevTools.

scripts/scaffold/scaffold-widget.js

@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+
+// Copyright 2025 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.
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Converts a string to camelCase.
+ * e.g., "my-component-name" -> "myComponentName"
+ * e.g., "MyComponentName" -> "myComponentName"
+ * @param {string} str
+ * @returns {string}
+ */
+function toCamelCase(str) {
+  if (!str) {
+    return '';
+  }
+  // Normalize to handle various inputs (kebab, snake, space, Pascal)
+  const s = str.replace(/[-_.\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : '')).replace(/^(.)/, m => m.toLowerCase());
+  return s.charAt(0).toLowerCase() + s.substring(1);
+}
+
+/**
+ * Converts a string to PascalCase.
+ * e.g., "my-component-name" -> "MyComponentName"
+ * e.g., "myComponentName" -> "MyComponentName"
+ * @param {string} str
+ * @returns {string}
+ */
+function toPascalCase(str) {
+  if (!str) {
+    return '';
+  }
+  // Normalize to handle various inputs (kebab, snake, space, camel)
+  const s = str.replace(/[-_.\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : '')).replace(/^(.)/, m => m.toUpperCase());
+  return s.charAt(0).toUpperCase() + s.substring(1);
+}
+
+/**
+ * Converts a string to kebab-case.
+ * e.g., "MyComponentName" -> "my-component-name"
+ * e.g., "myComponentName" -> "my-component-name"
+ * @param {string} str
+ * @returns {string}
+ */
+function toKebabCase(str) {
+  if (!str) {
+    return '';
+  }
+  return str
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')  // Add hyphen before capital in camelCase or PascalCase
+      .replace(/[\s_]+/g, '-')                 // Replace spaces and underscores with hyphens
+      .toLowerCase();
+}
+
+// --- Main Script Logic ---
+
+function main() {
+  const args = process.argv.slice(2);
+  if (args.length !== 2) {
+    console.error('Usage: node scaffold-widget.js <path-to-create-component> <ComponentName>');
+    console.error('Example: node scaffold-widget.js front_end/panels/ai_assistance ChatInputWidget');
+    process.exit(1);
+  }
+
+  const componentDestPath = args[0];
+  const componentBaseName = args[1];
+
+  // --- Derive Name Variations ---
+  const pascalCaseName = toPascalCase(componentBaseName);  // e.g., MyNewWidget
+  const camelCaseName = toCamelCase(componentBaseName);    // e.g., myNewWidget
+  const kebabCaseName = toKebabCase(componentBaseName);    // e.g., my-new-widget
+
+  // --- Define Replacements ---
+  const currentYear = new Date().getFullYear().toString();
+  const componentPathAbsolute = path.resolve(componentDestPath);
+  const frontEndPathAbsolute = path.resolve(process.cwd(), 'front_end');
+  const frontEndPathForImports =
+      path.relative(componentPathAbsolute, frontEndPathAbsolute).replace(/\\/g, '/');  // Normalize to forward slashes
+
+  const tsReplacements = {
+    '{{DATE}}': currentYear,
+    '{{FRONT_END_PATH_PREFIX}}': frontEndPathForImports,
+    '{{COMPONENT_PATH_PREFIX}}': componentDestPath.replace(/\\/g, '/'),  // Use forward slashes for paths in code
+    '{{COMPONENT_NAME_PASCAL_CASE}}': pascalCaseName,
+    '{{COMPONENT_NAME_CAMEL_CASE}}': camelCaseName,  // Used for style var and import path
+    '{{COMPONENT_NAME_KEBAP_CASE}}': kebabCaseName,
+  };
+
+  const cssReplacements = {
+    '{{DATE}}': currentYear,
+    '{{COMPONENT_NAME_KEBAP_CASE}}': kebabCaseName,
+  };
+
+  // --- Read Template Files ---
+  let tsTemplateContent;
+  let cssTemplateContent;
+
+  try {
+    tsTemplateContent = fs.readFileSync(path.resolve(__dirname, 'templates', 'WidgetTemplate.ts.txt'), 'utf8');
+    cssTemplateContent = fs.readFileSync(path.resolve(__dirname, 'templates', 'WidgetTemplate.css.txt'), 'utf8');
+  } catch (error) {
+    console.error('Error reading template files (WidgetTemplate.ts.txt or WidgetTemplate.css.txt):', error.message);
+    console.error('Make sure these files are in a "templates" subdirectory where the script is run.');
+    process.exit(1);
+  }
+
+  // --- Process Templates ---
+  let processedTsContent = tsTemplateContent;
+  for (const placeholder in tsReplacements) {
+    processedTsContent = processedTsContent.replace(
+        new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), tsReplacements[placeholder]);
+  }
+
+  let processedCssContent = cssTemplateContent;
+  for (const placeholder in cssReplacements) {
+    processedCssContent = processedCssContent.replace(
+        new RegExp(placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), cssReplacements[placeholder]);
+  }
+
+  // --- Write Output Files ---
+  const outputTsFilename = `${pascalCaseName}.ts`;
+  const outputCssFilename = `${camelCaseName}.css`;
+
+  const outputTsFilePath = path.join(componentDestPath, outputTsFilename);
+  const outputCssFilePath = path.join(componentDestPath, outputCssFilename);
+
+  try {
+    // Ensure the destination directory exists
+    fs.mkdirSync(componentDestPath, {recursive: true});
+
+    // Write the processed TypeScript file
+    fs.writeFileSync(outputTsFilePath, processedTsContent);
+    console.log(`Successfully created: ${outputTsFilePath}`);
+
+    // Write the processed CSS file
+    fs.writeFileSync(outputCssFilePath, processedCssContent);
+    console.log(`Successfully created: ${outputCssFilePath}\n`);
+
+    // --- Post-creation instructions ---
+    // Paths for build system (relative, forward slashes)
+    const grdTsPath = path.join(componentDestPath, `${pascalCaseName}.js`).replace(/\\/g, '/');
+    const grdCssPath = path.join(componentDestPath, `${camelCaseName}.css.js`).replace(/\\/g, '/');
+    console.log('1. Update \'grd_files_debug_sources\' in \'devtools_grd_files.gni\':');
+    console.log('   Add the following generated JavaScript files:');
+    console.log(`     "${grdTsPath}",`);
+    console.log(`     "${grdCssPath}",`);
+    console.log('   (Note: The .ts file becomes .js, and .css becomes .css.js in GRD entries)');
+
+    console.log('\n2. Update \'devtools_module("<module-name>")\' in the relevant \'BUILD.gn\' file:');
+    console.log('   Add the source TypeScript file to the \'sources\' list:');
+    console.log(`     "${outputTsFilename}",`);
+
+    console.log('\n3. Update \'generate_css("css_files")\' in the relevant \'BUILD.gn\' file:');
+    console.log('   Add the source CSS file to the \'sources\' list:');
+    console.log(`     "${outputCssFilename}",`);
+
+  } catch (error) {
+    console.error(`Error writing output files to ${componentDestPath}:`, error.message);
+    process.exit(1);
+  }
+}
+
+main();

scripts/scaffold/templates/WidgetTemplate.css.txt

@@ -0,0 +1,9 @@
+/*
+ * Copyright {{DATE}} 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.
+ */
+
+.{{COMPONENT_NAME_KEBAP_CASE}} {
+
+}

scripts/scaffold/templates/WidgetTemplate.ts.txt

@@ -0,0 +1,60 @@
+// Copyright {{DATE}} 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.
+
+import * as i18n from '{{FRONT_END_PATH_PREFIX}}/core/i18n/i18n.js';
+import * as UI from '{{FRONT_END_PATH_PREFIX}}/ui/legacy/legacy.js';
+import * as Lit from '{{FRONT_END_PATH_PREFIX}}/ui/lit/lit.js';
+
+import {{COMPONENT_NAME_CAMEL_CASE}}Styles from './{{COMPONENT_NAME_CAMEL_CASE}}.css.js';
+
+const {render, html} = Lit;
+
+const UIStrings = {
+  /**
+   *@description Example string description
+   */
+  exampleI18nString: 'Example string, please remove',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('{{COMPONENT_PATH_PREFIX}}/{{COMPONENT_NAME_PASCAL_CASE}}.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+}
+
+export interface ViewOutput {
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${{{COMPONENT_NAME_CAMEL_CASE}}Styles}</style>
+    <div class="{{COMPONENT_NAME_KEBAP_CASE}}">
+      ${i18nString(UIStrings.exampleI18nString)}
+    </div>
+  `, target, {host: target});
+  // clang-format on
+};
+export type View = typeof DEFAULT_VIEW;
+
+export class {{COMPONENT_NAME_PASCAL_CASE}} extends UI.Widget.Widget {
+  #view: View;
+  #viewOutput: ViewOutput = {};
+
+  constructor(element?: HTMLElement, view?: View) {
+    super(false, false, element);
+    this.#view = view ?? DEFAULT_VIEW;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+  }
+
+  override willHide(): void {
+    super.willHide();
+  }
+
+  override performUpdate(): Promise<void>|void {
+    this.#view({}, this.#viewOutput, this.contentElement);
+  }
+}