Add ElementsBreadcrumbs component with examples
This CL adds the `ElementsBreadcrumbs` component and documentation to
the component server.
Important: this CL *does not add the component to the UI*. That will be
done in a follow up CL once this has shipped and we have done some other
infrastructure work that is currently blocking components going into
production.
This is also why the file is called `NewElementsBreadcrumbs`, to avoid a
nameclash with `ElementsBreadcrumbs.js`. In the CL that puts this
component into production I will change the filename as the clashing
won't be an issue.
Change-Id: I8039d314ba02c834c3f8ec26f9bdb547858aa2dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2236405
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@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 7dfb0b9..ccd1789 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -25,7 +25,7 @@
console.log(`Started components server at http://localhost:${serverPort}\n`);
function createComponentIndexFile(componentPath, componentExamples) {
- const componentName = componentPath.replace('/', '');
+ const componentName = componentPath.replace('/', '').replace('_', ' ');
// clang-format off
return `<!DOCTYPE html>
<html>
@@ -46,7 +46,7 @@
<body>
<h1>${componentName}</h1>
${componentExamples.map(example => {
- const fullPath = path.join('component_docs', componentName, example);
+ const fullPath = path.join('component_docs', componentPath, example);
return `<div class="example">
<h3><a href="${fullPath}">${example}</a></h3>
<iframe src="${fullPath}"></iframe>
@@ -101,6 +101,15 @@
response.end();
}
+async function checkFileExists(filePath) {
+ try {
+ const errorsAccessingFile = await fs.promises.access(filePath, fs.constants.R_OK);
+ return !errorsAccessingFile;
+ } catch (e) {
+ return false;
+ }
+}
+
async function requestHandler(request, response) {
const filePath = parseURL(request.url).pathname;
@@ -125,10 +134,10 @@
console.error(`Path ${fullPath} is outside the DevTools Frontend root dir.`);
process.exit(1);
}
- const errorsAccesingFile = await fs.promises.access(fullPath, fs.constants.R_OK);
- if (errorsAccesingFile) {
- console.error(`File ${fullPath} does not exist.`);
+ const fileExists = await checkFileExists(fullPath);
+
+ if (!fileExists) {
send404(response, '404, File not found');
return;
}