Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to Theme Devtools #1279

Open
Mixter213 opened this issue Jul 12, 2021 · 7 comments
Open

Ability to Theme Devtools #1279

Mixter213 opened this issue Jul 12, 2021 · 7 comments

Comments

@Mixter213
Copy link

Other Extensions like below themes devtools
https://microsoftedge.microsoft.com/addons/detail/atom-one-dark-devtools-th/bchcjmlpcenaieccjjfhkfaemokpchlk?hl=en-US
and
https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo?hl=en-US

Devtools is something you look at for majority of your time. I think this would be a perfect thing for stylus to theme.

You use to go through and enable the custom flag "Developer Tools experiments" but now its integrated into the devtools directly as a setting in experiments in the left panel, "Allow custom UI themes".

@disco0
Copy link

disco0 commented Jul 13, 2021

As someone who rolls their own stylus devtools theme via extension this would b great (I don't know why I hadn't thought of this earlier)

@tophf
Copy link
Member

tophf commented Jul 13, 2021

There are several serious problems:

  • It's Chrome-only.
  • It's Stylus-only, unless we somehow coordinate with other userstyle managers.
  • Method of telling Stylus that this style is for devtools - is it a new checkbox? But we have enough of those already in the editor. And what's so damn important about devtools that it should have its own checkbox? Also what to do with sections, which aren't supported for devtools style? Or should we add a new item in the applies-to selector e.g. "devtools theme" so that a section can be marked and then all such sections would be joined into one style? But yet again it'd be an extra nonstandard thing in a standard place.
  • It's unclear how to share such styles via online repositories i.e. they all need to support this explicitly.

I definitely won't work on this and I think this should be implemented by a dedicated extension. I don't mind though if someone else convincingly solves all the problems.

@Mixter213
Copy link
Author

  • Yes crhomium based only, includes chrome, firefox, edge, and whatever uses chromium

  • stylus only. that is indeed the intention with my request, to be made and used with stylus

  • narcolepticinsomniac gave me an extension that references 2 css files, I was thinking you could reference them, and select it via stylus editor "applies to" section, add a devtools as an option.

  • its not extremely important, but then again styling anything isn't important its there to better experience for whatever webpage youre on.

  • as for sharing the styles via online repositories, it would just be named as Devtools - name or even name - devtools or however they choose to name it.

@tophf
Copy link
Member

tophf commented Jul 16, 2021

When I said "convincingly solves all the problems" I meant in a technical sense. Also, Firefox is not Chromium-based.

@tophf
Copy link
Member

tophf commented Jul 16, 2021

As an example of such technical problem-solving let's look at url-prefix("devtools://").

  1. It's still Chromium-only but hopefully Firefox will add theming to their devtools someday.
  2. It seems simple enough to be adopted by other userstyle managers if they want.
  3. Use a standard "applies-to" with a dummy URL for devtools: url-prefix("devtools://")
  4. Publishing would work right away. Sites like userstyles.world can optionally detect such sections and show an icon/tag.

This allows userstyles to provide a devtools theme in addition to the page theme, which may be good/desirable, but some users wouldn't want it so a checkbox would be necessary, in which case we're probably blocked on #827. Another unsolved problem is discoverability of the feature.

@Gusted
Copy link
Member

Gusted commented Jul 16, 2021

4\. Sites like userstyles.world can optionally detect such sections and show an icon/tag.

Seeing devtools is something different from normal websites it would be optimal to have a "custom" prefix like devtools:// or having some other hardcoded value so we don't have to go all crazy detecting this kind of styles apart from normal userstyles.

Also a good look would be given to the category so it would be discover-able in the inline-search, if that is even possible as you can't open the stylus popup in the devtools.

FYI ^ @vednoc

@vednoc
Copy link
Member

vednoc commented Jul 16, 2021

FYI ^ @vednoc

Oh yeah, which reminds me that we need to normalize the data for categories. That is a requirement in order to implement style categories. As for icons, they can be set easily based on which category they're a part of.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants