White top border in inactive private window (Windows) about materialfox HOT 17 CLOSED

Just tested on Windows and can reproduce. Will look into it.

from materialfox.

SVGs were created in Photoshop CC 2017/2018 out of shape layers, making sure to merge shape components before export. Export was done by grouping all the shape layers I wanted to export, selecting the group, right clicking and selecting Export As...

From here, a dialog box pops up where you need to select SVG as the format and make sure the canvas size dimensions match the target dimensions. For icons this is usually 16x16 and for the tabs it is 32x16. Before exporting you should make sure the document size matches your target size. The resulting exported SVG will have a lot of extra metadata which is not required and should be cleaned out. I do this with a text editor. Also note that usually you will want a shape's fill to be context-fill, fill-opacity should be context-fill-opacity and the equivalents for stroke and stroke-opacity if required. This tells Firefox to pass colours in to the SVG from parent elements via the fill, fill-opacity, stroke, and stroke-opacity CSS properties. This is useful because these SVGs are not embedded SVGs - their DOM does not sit in the HTML/XUL used by the Firefox UI so they can't be styled externally via CSS like most web page SVGs can. They can still contain internal <style> tags though.

One last thing; look out for Photoshop appending a transform attribute to the SVG paths. If you see it, remove it because it will make the SVG look blurry. Still not sure why Photoshop does this but it may occur if you resize the Photoshop document at some point. Generally this would be because you have created an SVG for retina displays and as a last step you have scaled it by 0.5 (because the browser will scale it by 2 on retina displays).

If in doubt, open up some of the existing SVGs in a text editor to see how they are formed. All you are really doing by exporting from Photoshop is generating the non-human-readable path data which you can't create by hand.

You might be tempted to right click on a shape layer in Photoshop and Copy CSS. This generally doesn't work because it assumes the viewbox has the dimensions of the shape, not the document, so the copied path is incorrectly offset.

from materialfox.

Finally got around to testing Windows 10 thoroughly and there are quite a few issues here and there. Putting together a fix but it will take a little while longer.

from materialfox.

@muckSponge is the issue fixed for windows?

from materialfox.

Can you give windows-improvements a try and let me know how it goes? I still need to make sure these changes are compatible with macOS so it's in a different branch until then.

from materialfox.

Better now but top border color is different also private window toolbox color is now light in chrome its dark https://yadi.sk/i/YuEvJ20IBkzGbg and this class need to change.

From

:root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive {
    border-top-color: rgba(0,0,0,.2);
}

To

:root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive {
    border-top-color: rgba(0,0,0,.5);
}

from materialfox.

also private window toolbox color is now light in chrome its dark

I'll need to double check but when I was testing Chrome on Windows 10 the tab area (which I think you're referring to as part of the window toolbox?) was the same colour as the window. Was probably testing 69, haven't tried 70 on Windows. Sure would be easier for me if I didn't have to use the window colour. Will look into it further tomorrow.

from materialfox.

Just tested 70 and it uses the window colour in private browsing.

Testing with this ugly mango colour has revealed that the background tab text colour is incorrect in private browsing. It's defaulting to the light text instead of dark text for some reason, so I'll need to do more work on this.

from materialfox.

Inactive window should also be a slightly washed out version of the active window colour. I think I'm forcing it to be 50% grey which is wrong.

from materialfox.

This is weird because am using chrome 69 and private window color is this.

from materialfox.

From

:root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive {
    border-top-color: rgba(0,0,0,.2);
}

To

:root[sizemode="normal"][tabsintitlebar]:-moz-window-inactive {
    border-top-color: rgba(0,0,0,.5);
}

This doesn't give desirable results for some window colours. In 866140a I ended up copying Chrome's behaviour, which is to use border-top-color: hsl(0, 0%, 67%).

I also had to remove the code which set the root text colour for light coloured windows because for some reason this causes Firefox to think every toolbar is in [brighttext] mode so text will either be white or black. There's actually no way to copy Chrome here because Chrome uses a more sophisticated colour calculation to determine text colour for a variety of window colours; for example, dark grey windows have a light grey text colour and very brightly coloured windows have a white text colour. There's simply no way to do this in Firefox.

I also removed some of the tab close button code because again, it was very dependent on the window colour so I didn't have enough control over it to do anything meaningful. It looks pleasant in most situations anyway so I'm happy to leave it like this.

I kept private browsing mode's window colour as-is for now. Would love to hear other people's feedback on whether their Chrome has a dark window colour or default window colour. So far in 69 and 70 I have been unable to reproduce the dark behaviour for whatever reason. This is on Windows 10, which I assume you are also using, @umarmughal.

Anyways, let me know how the new commit goes for you and I'll close this issue if no one has any objections to the coloured private browsing window and the light grey top inactive window top border.

from materialfox.

Did you update the repository? to me it looks like the first one .. i don't see any change.

from materialfox.

I updated the windows-improvements branch with quite a few changes. You should see behaviour consistent with Chrome for the most part, including the top border. If you see something you don't expect could you provide a screenshot?

from materialfox.

Yeah it looks better now another issue is Pocket icon breaks when click on it (screenshot attached)

from materialfox.

Fixed the pocket icon. MaterialFox should be behaving pretty well in Windows 10 now on the windows-improvements branch. It's also pretty stable on macOS. Got a few things to improve regarding light theme support before I merge back into master but I'll open another issue for that. I'll close this issue now but if you have any objections just comment and I can reopen, or open another issue.

from materialfox.

How you created SVGs for this, if you created in Illustrator what was export settings? can you please tell me i want to change tab style, please advise.

from materialfox.

You can also create your SVG in Illustrator then copy-paste the paths into Photoshop as shape layers. I did try exporting directly from Illustrator but I found that the viewbox was incorrect. I'm an Illustrator novice though, so I naturally prefer Photoshop for iconography and simple geometric shapes.

from materialfox.