New icons

[narcolepticinsomniac]

We should probably switch em up.

[narcolepticinsomniac]

Those separated icon layers were a lot easier to work with. Both inactive icons are now very pale, desaturated shades of active icons with 50% opacity on backgrounds and 80% opacity on borders/"S". To avoid the pinkness of the light red, it has a little orange hue mixed in.

Since the light theme icons differentiate by backgrounds, they work very decently in light or dark themes, so they'd make a better default. The dark theme icons still don't work very well in light themes, of course, but I really prefer them in dark themes.

@tophf PTAL. I'm really happy with these, so hopefully you agree. I think they'd be worthy of swapping the default, and demoting the current icons to an option. Let me know what you think.

Theme Icons.zip

[narcolepticinsomniac]

@tophf I didn't wanna bug you about this, but I'm not sure if you missed a notification, forgot, or just haven't gotten around to it. Always possible you're ignoring it because you don't care, but I tried to make sure you were on board before wasting any more time screwing around with them. Hopefully you didn't change your mind, but if so, that'd also be good to know.

[tophf]

Yeah, I've missed my cue, sorry.

Theme Icons.zip

Yeah I like both variants. I'll start adding an option to switch the icon sets.

The "light theme" icons look better on default light browser theme, but supposedly Stylus users prefer dark browser themes so we'll keep the "dark theme" icon set as the default one, right?

[narcolepticinsomniac]

The "light theme" icons look better on default light browser theme, but supposedly Stylus users prefer dark browser themes so we'll keep the "dark theme" icon set as the default one, right?

It wouldn't take much to convince me. I hate the idea of having to switch them on every fresh install, and I like having them in the tabs as well. The fact that people actually use the default, or other light themes, is a foreign concept to me.

Theoretically, it might make sense to use the light theme as the default since they work decently in either, but I'm all for leaving the dark set as the default. I think the justification that most of our users use dark themes is likely accurate. Regardless, it bugged me that there was no good option for the light theme users, so now they'll have one. The inactive icon for the dark set is a huge improvement as well, IMO.

The tricky bit is implementing the switch in the first place. If we change our minds about the defaults down the road, it's as simple as renaming the icon files.

[tophf]

@narcolepticinsomniac, I've implemented the iconset option but Stylus also sets 32px, 19px, 38px icons which I don't see in the zip.

[narcolepticinsomniac]

Well... shit. For the icon option, I was totally focused on the 16px, but it would be better if they matched on the extension page and elsewhere, now that you mention it. Btw, is 19px/38px still a thing? I've used a bunch of forks and never seen it. I assumed they were used in older versions we don't support anyway.

A few problems with larger sizes though. The only reason I was able to make those was because d3n1c1d3 hooked up the separated layers for 16px. Also, larger icons have more details, so they'll be more difficult. On top of that, I just formatted my ssd and reinstalled the OS in my new laptop. Pictures wasn't something I backed up, so I couldn't even say the exact shades before opacity was added to inactive icons. Not positive I saved the stages anyway.

Not saying I won't attempt to come up with something decent, but we'll be better off if @d3n1c1d3 could help with larger versions of these. At the very least, separated layers of larger sizes would give me more of a prayer.

[tophf]

All retina displays use 32px instead of 16px. Vivaldi uses 19/38 px. It's a very cool browser worth maintaining the additional size (not that it's soooo hard).

[narcolepticinsomniac]

Yeah, I knew 32px was important, and assume they scale those up slightly for the extensions page. It's 48px there, but there is no 48px inactive, so they're scaling something. If Vivaldi uses the odd sizes, we should support them as well.

Thinking we'd only need alternate 16px was just me being oblivious.

Soooo hard is all relative. Those took me forever. Like I said, @d3n1c1d3 would probably do a much better job with larger sizes of those, but if I at least had separated layers for those sizes, I could probably pull it off decently. It's all the shading that gets distorted in the process that I'm hopeless with.

[d3n1c1d3]

@narcolepticinsomniac thank you for posting the png files. can you mention what are the things you have done to produce these icons? for example I see many shades in the gray (16w) files. but to reproduce these it also will take a while. with what programm do you work? maybe it will help me to get the source files. I mainly work with photoshop. maybe that is why I do not like gimp so much. but hopefully these files aren't gone with re-setting your computer. I also think I or somebody else will see it if the icons are just set up step by step and not in a whole. so we have to figure out a way to re-produce the icons the exact way the other once are done. for example now I know if you mean the frame is got 75% opacity. you exactly mean the outer frame and nothing else.

for the light / dark theme discussion: that is why I made the all in one icons. I mean we can just exchange them with these a bit smaller S icon set. but we will get covered up about this discussion the icon is not working for me on a the light default chrome (or what ever) theme. and later we can take our time to focus on producing icons especially for light or dark themes.

and I still have no problem with these small amount of pixels get lost for this all in one icon set.

but anyway I will come back soon and give you all separated layer files from all sizes I have created. I think this includes also the 19 x 19 pixel version?

to be clear: these are the wanted formats / dimensions... 16 x 16 19 x 19 32 x 32 38 x 38 48 x 48 96 x 96 128 x 128

all three versions : active (green) - styles are applies to the current tab / window inactive (gray [mostly]) - no styles are applied to the current tab / window passive (red) - all styles are disabled

if some of theses versions are not necessary please correct me.

please give the files in the future a more objective name for me it was for example a fixed name or the producing date of the icons. In this case it will be easier to know on which state these icons are created. for me this does not mean that the icon filenames have to be in exact wording for the app. it will just allow all in the team easier to recognize on witch file site it is based upon.

for special you don't have to use this complicated filename convention but then please leave the original files in a sub folder. now I just have to guess witch one is the right one. for example I also did some corrections on the outer form (vector based) on the icons. but I do not know if it was only only on the 16 x 16 based version.

so if this makes thinks easier we can also talk about this on the phone or via skype. but just have in mind that I live in the German / European time zone.

[tophf]

16 x 16 19 x 19 32 x 32 38 x 38

Only these are needed for icon sets because we change only the toolbar icons.

[d3n1c1d3]

@topfh thanks for the quick response.

for the tile images I used a 96 or 128 image of the icon. that is why I firstly focused onto optimizing the large version. (in my opinion) everything is related to each other. so after we have edited the small icons. we possibly have to exchange the icon in the tile versions as well...

so It might be my fault. to be more clear about this: I wanted to have the icon dimensions for mostly all cases.

all the dimensions I have written down (in my previous post) are all the dimension I was working on from the start. but maybe the one or the other can be pushed over the cliffs. and anyway this will not take so much time to to create separated image sets for each icon dimension. (frame, S, background)

so anyway first I will create this separated icon sets for all other sets beside 16 x 16 pixels.

[d3n1c1d3]

so here are the missing separated icons from 19 x 19 till 128 x 128 pixels

http://www.mediafire.com/file/j32172atj3typ9l/2017-06-28_separated_icons.zip

for example here is just the 128 pixel version

@narcolepticinsomniac do you need the black version of these as well?

[narcolepticinsomniac]

do you need the black version of these as well?

Well, white are used for colorization/manipulation. Black are used as-is for the light icons. Are the black separated layers any better quality than inverting the white? IDK.

@narcolepticinsomniac thank you for posting the png files. can you mention what are the things you have done to produce these icons? for example I see many shades in the gray (16w) files. but to reproduce these it also will take a while. with what program do you work? maybe it will help me to get the source files.

I use GIMP, only because it's free and I'm vaguely familiar with a minimal amount of its functionality. I see now why you go overboard with the source files. If I was even smart enough to save the different stages in the first place, they'd be gone in the format. I didn't think I had any important pictures.

The only ones that will be tricky to recreate are the ones that were a PITA to create the first time, which is the inactive icons. They are extremely pale/bright shades of the active icons with 50% opacity on backgrounds and 80% on the border/"S". Btw, light icons all use straight up black border/"S" (with opacity on inactive). I don't know any way to pinpoint the exact shade before opacity was added. Maybe there's a way to reverse opacity. Maybe it'll need to be an approximation. The most time consuming part was eyeballing inactive icons and then checking how they look in the browser.

[narcolepticinsomniac]

A lot more wasted time trying to come up with different sizes without much to show for it. I've got the pre-opacity shades pretty well worked out. I wanted to start with a 19px set of the defaults and check them out in Vivaldi, so that's what I did. More accurately, that's what I attempted to do. Seems like Vivaldi doesn't prefer 19px, and defaults to scaled 38px if specified and available. Even just to test, renaming 19 to 38 and vice-versa doesn't work, it seems to detect the actual sizes. I'm only guessing it prefers 38px really. 38px are the largest sets we have, so it may just prefer the largest. It's not like I have a super high res that would trigger a higher res icon, it just seems that it defaults to larger. @tophf Given that, can we lose 19px sets altogether?

@d3n1c1d3 Another issue, 38px separated layers are missing. They appear to be the most important for Vivaldi.

On a side-note, Vivaldi is a POS browser. It has the worst hardware acceleration of any browser on any OS I've ever seen, and that includes Linux where the majority of it doesn't work at all. I thought this when I tested a beta version way back on a weaker laptop, but testing their "stable" on a newer i7, the performance is horrendous. Like 4x+ the resources Chromium uses for the same videos, with an immediate 10+ degrees Celsius jump that would only get worse as you go. Hard to believe it's even based on Chromium with that performance. Not a huge fan of the UI changing colors per site either.

[tophf]

Vivaldi doesn't prefer 19px, and defaults to scaled 38px [...] Given that, can we lose 19px sets altogether?

Yes. Even if this is a bug in Vivaldi that gets fixed occasionally, the scaled 38 -> 19 px icon looks neat.

As for the issues you've encountered, I've used Vivaldi for a few months on a fast desktop and it seemed okay perf-wise. Its UI is written in javascript/CSS so it's fully customizable, especially via Vivaldi-hooks. The built-in History and Bookmarks are particularly cool. The auto-coloration can be disabled, which I did immediately, I also think it's lame.

[narcolepticinsomniac]

Glad we can lose the 19px.

"POS browser" may be a little extreme, but I was flabbergasted at the CPU it was using for streaming 1080p. I'm pretty fanatical about not over-stressing the CPU or creating excess heat unnecessarily, so I keep CoreTemp in the system tray. I didn't get the quad i7 specifically because they run hotter, and I don't need anything that powerful anyway.

Streaming hi-def in Chromium or FF, CPU averages ~10% and temp barely ever goes over 40 deg C. The same video in Vivaldi was bouncing between 30-50% and the temp was immediately over 50 deg C. I had the same experience when I tested the beta way back on a weaker laptop, but I was shocked that it's still that bad.

I checked chrome://gpu and it said everything was accelerated, like Chrome. Didn't check chrome://media-internals to see if that was actually so though. It's not like with a powerful computer you're gonna notice any performance issues, but it's likely taxing your hardware a ridiculous amount compared to other browsers for simple video decoding. Maybe it's just a coincidence that I've seen the same resource drain on two separate laptops, but I doubt it.

That alone is the deal-breaker. I didn't investigate much, but it looks like it has some cool bells and whistles.

[d3n1c1d3]

@narcolepticinsomniac wich base colors do you use without reducing the opacity on the inactive icon? I tried to re produce it but I did not get it. I almost re produced it on a black background (total background) but with disabled total background my version was something complete different. so I just delete the file.

could you please share your (gimp) source files? so I can take a look. or save these parts in separated file versions with and without any opacity changes.

here are the separated files for 16 x 16 and 38 x 38 pixels

16 x 16 separated files - white

38 x 38 separated files - white

[narcolepticinsomniac]

@d3n1c1d3 We figured out 19px aren't necessary anymore, and I already did the 32px.

https://github.com/openstyles/stylus/pull/105#issuecomment-312787460 https://github.com/openstyles/stylus/pull/105/commits/322d76038ee0b623d878d8822715ff00607457e4

Tophf and I both think they look good, but you're welcome to propose any optimizations. Like I said in both threads, 38px separated layers were missing from that zip, which is the only reason I haven't made them. If you could hook those up, I'd appreciate it.

could you please share your (gimp) source files?

I could tell you the right shades, but at this point it'll probably be easier for me to do because I've already done it. As with the others, you'd be more than welcome to suggest tweaks afterwards since you're much better with the finer details.

[narcolepticinsomniac]

@d3n1c1d3 Thanks for the 38px. I wish you would've made a new comment so I would've gotten a notification. I didn't see that for a while. 16px were already done btw.

I mostly just matched the colors, doubled the borders, and shortened the "S" 1px so it was centered vertically. I didn't mess with any shading. There was a lot more, but none looked bad at 38px or scaled. If anyone wants to clean up these, or any of them really, go right ahead. I'm sure some shading could be better and colors could be more exact. I saved the pre-opacity layers in separate folders.

38 Sets.zip

[d3n1c1d3]

@narcolepticinsomniac thank you for seperated pre opecity layer files.

why did you double the border? does this has something todo with the automatically resized icon version in vivaldi (38px version is resized to 19px version https://github.com/openstyles/stylus/issues/7#issuecomment-312421498). or also just with the fact that the border has also a shade?

I will edit the vector of the S so there will be no shade on the top of the s. thanks for that hint.

[d3n1c1d3]

optimized version of the 38 pixel icon sets. please check it and if it is fine I will create the other icon sets as well. instead of absolute black I used dark variants of red and green (light theme icons)

2017-07-12 - 38px.zip

[narcolepticinsomniac]

Yeah, 38px and 32px have to be made to scale to 19px and 16px respectively. The goal is that once scaled, they're all as identical as possible. Doubling their borders scales correctly. While your optimized images might be better looking in general, they don't scale well. Since they're used as the main icon, they should be higher contrast like the 16px.

I was hoping you'd accomplish two things in optimization, mainly better shading, and more exact colorization. The shading will be good enough color-wise, but the main colors of border/"S"/background are off by a hair compared to 16px. When scaled, they're not quite as vibrant as the 16px. Very close, but not perfect.

GIMP scales a 16px in the titlebar, which is convenient for comparisons:

Our normal 16px

The last 38px I did, scaled to 16px. Very close, but the hexes are off a hair. Scaling 38px to 16px will not be quite as clean as scaling to 19px, but it gives you a general idea what could be improved. It's possible that we may need to start with slightly lighter borders/"S" than the 16px to wind up with the same vibrancy once scaled.

Your optimized 38px scaled. They're cleaner up close, but you've lost too much contrast to scale well. Not sure, but for 38's, that extra row of lighter shading inside the double border might be necessary to scale well. Also, the "S" positioning looks a little off to the left. When I scaled it, I left the width alone and just took 1px off the height.

[narcolepticinsomniac]

For the light theme, it's all about how they scale as well. Using dark shades of the icon color instead of black looks great up close, but once scaled, the only effect it will have is slightly poorer contrast. Not worth it IMO.

[tophf]

The new icons look good