Use CSS variables for image references
This CL is the result of applying the following regex:
```
url\(Images/(.+)\.\w+\)
```
and replacing it with
```
var(--image-file-$1)
```
R=jacktfranklin@chromium.org
Bug: 1183361
Change-Id: I3255dd23c817b050deaa55835eb8c715d00387aa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2732375
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index e0374db..77a4ec2 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -201,7 +201,7 @@
/**
* In Devtools-Frontend we load images without a leading slash, e.g.
- * url(Images/checker.png). This works within devtools, but breaks this component
+ * var(--image-file-checker). This works within devtools, but breaks this component
* server as the path ends up as /component_docs/my_component/Images/checker.png.
* So we check if the path ends in Images/*.* and if so, remove anything before
* it. Then it will be resolved correctly.