Fix loading images in components server
In Devtools-Frontend we load images without a leading slash, e.g.
url(Images/checker.png). This works within devtools, but breaks this
component server as the path ends up as
/component_docs/my_component/Image/checker.png. So we check if the path
ends in Images/*.* and if so, remove anything before it. Then it will be
resolved correctly.
Fixed: 1128914
Change-Id: I476165d16b19713b3c095d5969fac95a5d26a678
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2414190
Reviewed-by: Kateryna Prokopenko <kprokopenko@google.com>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index 72870ce..63e1f7a 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -110,9 +110,27 @@
}
}
+/**
+ * In Devtools-Frontend we load images without a leading slash, e.g.
+ * url(Images/checker.png). This works within devtools, but breaks this component
+ * server as the path ends up as /component_docs/my_component/Image/checker.png.
+ * So we check if the path ends in Images/*.* and if so, remove anything before
+ * it. Then it will be resolved correctly.
+ */
+function normalizeImagePathIfRequired(filePath) {
+ const imagePathRegex = /\/Images\/(\S+)\.(\w{3})/;
+ const match = imagePathRegex.exec(filePath);
+ if (!match) {
+ return filePath;
+ }
+
+ const [, imageName, imageExt] = match;
+ const normalizedPath = path.join('Images', `${imageName}.${imageExt}`);
+ return normalizedPath;
+}
+
async function requestHandler(request, response) {
const filePath = parseURL(request.url).pathname;
-
if (filePath === '/favicon.ico') {
send404(response, '404, no favicon');
return;
@@ -127,8 +145,9 @@
const componentHtml = await getExamplesForPath(filePath);
respondWithHtml(response, componentHtml);
} else {
- // This means it's an asset like a JS file.
- const fullPath = path.join(devtoolsFrontendFolder, filePath);
+ // This means it's an asset like a JS file or an image.
+ const normalizedPath = normalizeImagePathIfRequired(filePath);
+ const fullPath = path.join(devtoolsFrontendFolder, normalizedPath);
if (!fullPath.startsWith(devtoolsFrontendFolder)) {
console.error(`Path ${fullPath} is outside the DevTools Frontend root dir.`);