Confirmed users
177
edits
DevTools/Hacking: Difference between revisions
Chrome Themes
(Chrome Content) |
(Chrome Themes) |
||
| Line 141: | Line 141: | ||
Much of the DevTools front-end / UI is currently loaded using <tt>chrome://</tt> (meaning "browser chrome" as in the UI, no relation to the Chrome browser) URLs which allow those files to have privileged access to platform internals. (We'd like to move away from this on the DevTools and be more like regular web sites, but most tools are using <tt>chrome://</tt> URLs for now.) | Much of the DevTools front-end / UI is currently loaded using <tt>chrome://</tt> (meaning "browser chrome" as in the UI, no relation to the Chrome browser) URLs which allow those files to have privileged access to platform internals. (We'd like to move away from this on the DevTools and be more like regular web sites, but most tools are using <tt>chrome://</tt> URLs for now.) | ||
Chrome content is typically used to load XUL, HTML, and JS files in the UI. | |||
=== Packaging === | === Packaging === | ||
| Line 146: | Line 148: | ||
If you add a new file that should be loaded via <tt>chrome://</tt> (such as a new script file for a tool UI), you need to update a manifest file at <tt>/devtools/client/jar.mn</tt> so that it's packaged correctly. | If you add a new file that should be loaded via <tt>chrome://</tt> (such as a new script file for a tool UI), you need to update a manifest file at <tt>/devtools/client/jar.mn</tt> so that it's packaged correctly. | ||
Please ensure that any new files are added so their entire source tree path is part of the URL. To do so, the jar.mn entry should look like: | Please ensure that any new files are added so their entire source tree path is part of the URL. To do so, the <tt>jar.mn</tt> entry should look like: | ||
content/<X> (<X>) | content/<X> (<X>) | ||
| Line 165: | Line 167: | ||
* File: <tt>/devtools/client/webaudioeditor/models.js</tt> | * File: <tt>/devtools/client/webaudioeditor/models.js</tt> | ||
* Usage: <tt>chrome://devtools/content/webaudioeditor/models.js</tt> | * Usage: <tt>chrome://devtools/content/webaudioeditor/models.js</tt> | ||
For files within a single tool, consider relative URLs. They're shorter! | |||
== Chrome Themes == | |||
Similar to the chrome content section above, we also use chrome themes (or <tt>skin</tt> URLs) in the DevTools UI. These are typically used to load CSS and images. | |||
=== Packaging === | |||
If you add a new file that should be loaded via <tt>chrome://</tt> (such as a new CSS file for a tool UI), you need to update a manifest file at <tt>/devtools/client/jar.mn</tt> so that it's packaged correctly. | |||
Please ensure that any new files are added so their entire source tree path is part of the URL. To do so, the <tt>jar.mn</tt> entry should look like: | |||
skin/<X> (<X>) | |||
where <tt><X></tt> is the path to your file after removing the <tt>/devtools/client</tt> prefix. | |||
Example: | |||
* File: <tt>/devtools/client/themes/images/add.svg</tt> | |||
* Entry: <tt>skin/themes/images/add.svg (themes/images/add.svg)</tt> | |||
=== Usage === | |||
Chrome theme URLs almost match their source tree path, with one difference: the segment <tt>client</tt> is replaced by <tt>skin</tt>. This is a requirement of the <tt>chrome://</tt> protocol handler. | |||
Example: | |||
* File: <tt>/devtools/client/themes/images/add.svg</tt> | |||
* Usage: <tt>chrome://devtools/skin/themes/images/add.svg</tt> | |||
For files within a single tool, consider relative URLs. They're shorter! | For files within a single tool, consider relative URLs. They're shorter! | ||