[1.0] Improve theme preview within Author Settings panel

[micjamking]

Several users have commented/mentioned in Chrome Store reviews they would like for an 'easier way to explore themes'. Currently, theme selection is very low-tech, using a simple drop-down menu and animated preview of the color palette, without context of code syntax.

Ideally, users should be able to see a sample of how a color palette would apply to the code syntax, before closing and reopening the Devtools window to see the changes apply.

The Author Settings pane uses the theme.json file to show the animated color preview.

app/scripts/themes.json

[
  {
    "name": "Theme Name",
    "colors": ["#F7F7F7", "#F0F0F0", "#807d7c" ]
  },
]

To create accurate previews, each theme object would need to contain a color map (not an array) of the colors assigned to each variable used for syntax highlighting within our common styles mixin. OR each color array would need to contain the colors in the exact order they are used within the color palette as well (and would need to make that clear distinction inside the README.md).

Having the data structured in this way would allow for the creation of theme previews which accurately reflect the applied theme. The preview would include a small code sample, similar to http://colorsublime.com

(While not ideal, a third and final alternative would be to create small screenshots of each theme and display it, similar to http://devthemez.com/, however this would increase the size of the plugin greatly.)

Technology

For an effective experience, the 'Author Settings' panel will require additional capabilities like sorting, filtering, and searching by name. Using a JS MV* framework will help speed up development tremendously for these features.

Potential Stack:

• Angular 2: https://angular.io
• Polymer: https://www.polymer-project.org

[mknrls]

Interesting! Really like theme previews idea. The colorsublime approch seem to the best way to go, although the devthemez (screenshots) approach it not as bad will increase the plugins (like you stated). Well i guess it also depend what format the screenshots are saved at and what resolution.

[micjamking]

@mknrls I think A LOT of people will appreciate it. Right now I'm leaning on the color sublime ideal but it will require re-writing app/scripts/themes.json, which I'm not looking forward too :unamused:

[thgaskell]

Angular 2: https://angular.io

sounds overkill :grimacing:

Right now I'm leaning on the color sublime ideal but it will require re-writing app/scripts/themes.json, which I'm not looking forward too

I feel like this task could be automated. Each theme could be loaded against the sample markup and exported in whatever format make sense? An array of colors is not very bad if you know exactly what each index is referring to, and if it's generated it's no cost to you as a developer! A small phantomjs script could probably do the trick.

[micjamking]

Angular 2: https://angular.io

sounds overkill :grimacing:

@thgaskell it's not if you know what's coming ahead :smirk:

• Dynamic filtering using search field with autosuggestion
• Sorting for light/dark themes
• Theme ratings

Up to this point, my goal has been to write everything from scratch for DA, but after releasing it into the wild I'm fine with utilizing s framework that will allow me to continue adding features and improving the UX with better developer efficiency.

I'm not sold on Angular 2 or React at the moment, but I know I could build out a prototype in an afternoon using Angular 1.x, so it seems logical to graduate since Angular 2 should be out of beta sometime this year.

re: Automation I don't think I follow. Not every theme is created equally, for example the NodeJS theme only includes 5 colors, so the script would need to know to duplicate values for themes which use fewer colors. I'm not clear on how this could be automated, but I'm interested :blush: Can you explain further?

[thgaskell]

Maybe not phantomjs (I thought it was based on chromium, but it's actually webkit). But there should be a chromium based driver.

You can load in some markup, along with each theme's css. Each time you could grab the computed colors of each element you care about, and generate the themes.json as an array of colors, or your own color mapping.

I could be over simplifying it, but the main thing is to let the browser generate the file based off of the actual css in any format you want.

You could literally count the color of all the pixels on the screen and order the colors by percentage, etc.

[micjamking]

@thgaskell I like this idea a lot; currently, the theme preview and actual theme CSS don't talk to each other, so developers are required to keep track of their colors in two different places which is not ideal.

This sounds like a good way forward, but I honestly have no idea how to go about approaching it programmatically.

You can load in some markup, along with each theme's css.

The markup & elements we need to extract the computed colors from is basically Chrome DevTools itself. We could probably stub it out by grabbing source code from DevTools, but to automate this seems tricky.

I'm 100% behind the idea of auto-generating assets when possible, just not sure where to begin. In the interim, I'm going to start wireframing the layout for the settings panel later this week to get feedback before prototyping out the page. There's still plenty of time to figure out the "how" for theme previews.

[thgaskell]

I'll create a branch and work out a proof of concept.

On Wed, Feb 24, 2016 at 9:59 AM Mike King notifications@github.com wrote:

@thgaskell https://github.com/thgaskell I like this idea a lot; currently, the theme preview and actual theme CSS don't talk to each other, so developers are required to keep track of their colors in two different places which is not ideal.

This sounds like a good way forward, but I honestly have no idea how to go about approaching programmatically.

You can load in some markup, along with each theme's css.

The markup & elements we need to extract the computed colors basically from is basically Chrome DevTools itself. We could probably stub it out by grabbing source code from DevTools itself, but to automate this seems tricky.

I'm 100% behind the idea of auto-generating assets when possible, just not sure where to begin. In the interim, I'm going to start wireframing the layout for the settings panel later this week to get feedback before prototyping out the page. There's still plenty of time to figure out the "how" for theme previews.

— Reply to this email directly or view it on GitHub https://github.com/micjamking/devtools-author/issues/114#issuecomment-188431319 .