Only elements, sources and console panels are themed

[micjamking]

Update 02/10/2016: It JUST dawned on me today after reviewing another issue: #109 (comment), the limitations and concerns I describe below only exist for current themes I've created (or anyone else has created using one of MY current templates). Theoretically, anyone could build a theme skinning additional panels by adding whatever additional CSS styles desired to a custom theme file, and make a pull request. DevTools Author itself has no opinion on how themes are applied to DevTools; however for consistency, I personally reserve the discretion to reject any pull requests for themes which do not meet similar UX/UI standards as the current themes available at this time.

Update 01/03/2016: After the initial response from users and feedback, I've decided to bite the bullet and add the Elements panel to the set of panels themed by DevTools Author. This means the Elements panel will inherit the same theme styling as the Sources and Console panels for an improved authoring workflow with workspaces integrated. 🤘

This post has been modified to reflect the following updates: #64 .

I've made a conscious design decision not to apply the selected theme in the current version of DevTools Author to all panels, but rather only the Elements, Sources and Console panels within DevTools. The reasons for this are maintainability, usability, and consistency.

Maintainability

First off, skinning Chrome's Developer Tools is not a simple task. It requires debugging DevTools with DevTools (sometimes 3-4 levels deep), fighting with CodeMirror's own CSS specificity/inheritance, and using deprecated selectors (::shadow and /deep/) to pierce the shadow DOM and style components from the outside (which works inconsistently).

All of this means that each time something changes or updates in DevTools (which is not infrequent), the project needs to be updated to maintain the current experience. The smaller the footprint DevTools Author has, the more time I have to focus on providing the best experience for the panels it does support.

Usability

This may sound subjective, but I do not feel the usability of the other panels is improved by theming, and the exact opposite result (poor legibility/usability) is much more likely to happen by enabling the themes in panels outside of the authoring workflow. This brings me to my next point, which is to maintain consistency with the purpose of the extension and DevTools as a whole.

Consistency

I created DevTools Author to solve a specific problem; increase legibility and improve the overall authoring experience within DevTools, the keyword being 'authoring'. Outside of the Elements, Sources and Console panels, very little 'authoring' actually takes place and the remaining panels, while interactive, are mostly read-only and used for performance-auditing purposes.

I may change my mind about this in the future if maintenance becomes any easier (which I doubt), but for the time being, I have no intention of supporting theming of panels outside of Elements, Sources, and Console.

[okor]

So, just one human here - but I spend most of my day in the Network and Timeline tabs (I'm a perf engineer). I read how you created this with the original intent of focusing on the authoring experience. I get it. But for me, I would like to see the other tabs inherit the same styles.

Not unlike this project: https://chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo?hl=en-US but with all the wonderful themes you have provided.

Just a vote. Totally understand if it's not a priority. Thanks!

[micjamking]

Hey @okor, thanks for reaching out!

I totally get it, I promise you. Who knows, if this issue get's enough 👍 AND I (or someone) has the time to contribute, I'd be open to reconsider.

DevTools Author started out as a pet project that worked fine for JUST ME, but now that its been released, I'm no longer the primary audience, and so I'm genuinely open to feedback and criticism.

That being said, Chrome v50 (Canary) is shipping with a light/dark theme switcher which effectively skins the entire DevTools window from end-to-end, every panel. My future intentions for DevTools Author is to continue overriding the main authoring panels (elements, console, sources) while allowing the built-in light/dark theme to cover the remaining non-editable panels. The intent and focus of the plugin would remain the same, while also taking advantage of the built-in styling to provide a more comprehensive "theme".

I'm currently in the process of fixing bugs/issues in Canary in preparation, but it's still not quite there yet for the sources panel. Once this is complete, you can checkout the Canary release channel and see if it accommodates your needs.

[okor]

@micjamking Oh, I hadn't seen the dark theme switcher in Canary yet, that's rad. In that case, since a lot of color/contrast edge cases are probably handled by the default "dark" theme, I would agree that it's probably not worth the effort to do a bunch of work on the Network and other panels at this time. I definitely like have this plugin so I can modify the font, especially for the console and the elements panel.

... I just checked out DevTools Author on Canary, with the built in dark theme + Author Monokai and that works quite well for me. Thanks!

[micjamking]

@okor awesome! Since you're using Canary, I'd definitely appreciate any feedback/bug reports you're noticing to help me get things cleaned up in preparation for default light/dark themes in Chrome stable. Feel free to leave an issue here and I'll try to follow up as soon as I can.

Mahalo!

[okor]

Yeah, it looks pretty rad overall. Only thing that stood out is the "sources" tab, where the sidebar ends up having a super low contrast - using the built in dark theme + Monokai from Author.

And here it is flipped, using Monokai again (my go to for all editors) but with the Light built in theme.

For me personally, that is a non-issue as I actually don't normally write code in Chrome. The value for me is mostly having custom font's / themes in the markup (elements) and console. Which make the experience quite a bit nicer. Staring at bright screens all day is a pain, much prefer "dark themes" to most things.

But again, non issue for me. Sounds like it will be for you primary use case. Might have to add a couple of small overrides but largely should be about the same as you've been doing. Thanks again!

[micjamking]

@okor thanks for the feedback; I've opened a separate issue for the with the sources panel while using the dark theme in Canary. Feel free to add any other issues you find here: #112