Load new theme colours in the component docs.
This CL updates the component docs server so it automatically injects the new
colour variables (which are part of the dark mode work) into the server. It
contains the following changes:
1. Pulling out the new colours into a new CSS file,
`ui/themeColors.css`, which contain all the new definitions.
2. Injecting that new file where we inject `inspectorStyles.css`
currently.
3. Updating the component docs server to intercept any requests to load
an HTML example file, read the HTML contents and inject a `<style>`
tag to load in the theme colours.
4. Additionally we now provide a small bit of JS that adds a handy
button to toggle light/dark mode without needing to dive into the dev
tools.
Fixed: 1152774
Change-Id: Ia2df0e00315dfeb532570ea5634fa54677337f76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560941
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index 0e7b77c..cfe96e1 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -147,6 +147,20 @@
// This means it's a component path like /breadcrumbs.
const componentHtml = await getExamplesForPath(filePath);
respondWithHtml(response, componentHtml);
+ return;
+ } else if (/component_docs\/(.+)\/(.+)\.html/.test(filePath)) {
+ /** This conditional checks if we are viewing an individual example's HTML
+ * file. e.g. localhost:8090/component_docs/data_grid/basic.html For each
+ * example we inject themeColors.css into the page so all CSS variables
+ * that components use are available.
+ */
+ const fileContents = await fs.promises.readFile(path.join(devtoolsFrontendFolder, filePath), {encoding: 'utf8'});
+ const themeColoursLink = '<link rel="stylesheet" href="/ui/themeColors.css" type="text/css" />';
+ const toggleDarkModeScript = '<script type="module" src="/component_docs/component_docs.js"></script>';
+ const newFileContents = fileContents.replace('<style>', themeColoursLink + '\n<style>')
+ .replace('<script', toggleDarkModeScript + '\n<script');
+ respondWithHtml(response, newFileContents);
+
} else {
// This means it's an asset like a JS file or an image.
const normalizedPath = normalizeImagePathIfRequired(filePath);