Library design bugs

[t2YU2m8l83]

The text for the dropdowns (Organize, Views, Import and Backup) in the top left corner are black instead of light gray. The tree- and detail-view create random border-top artifacts if you hover over their entries.

Reproduction:

Open the Libary (for example through "Show all Bookmarks")
Open some folders inside the treeview until you can scroll inside it.
move the mouse up and down the tree view.
watch random "border-top: 1px solid;" apper and disapper as you move the mouse
use the scrollweel to clear all artifacts.

System specifications: Windows 7 64bit Pro N Firefox Portable 59.0.2

-edit: overdodactyl

[overdodactyl]

The text of this issue was somehow replaced with that of your other (regarding imports) - I edited it using the text from my email. If you meant to edit it after the initial submission, the changes aren't included so you may have to edit again.

@loopy750, would you mind glancing at this if you get the chance? I'm not seeing this on macOS.

[t2YU2m8l83]

I noticed that the text color is controlled through windows under: "SystemControl\customisation\window color" -> select "window" inside the dropdown -> font color The other border problem might also be a result from the windows 7s design settings. I added another screenshoot that shows the pretty ugly hover in this menu. Is this intended or also a bug?

[overdodactyl]

I added another screenshot that shows the pretty ugly hover in this menu. Is this intended or also a bug?

It's not intended, no. Hopefully we can get that fixed as well.

Here's a screenshot from a fresh profile in macOS with a few added bookmarks:

Similar to the bookmarks sidebar, there shouldn't be (and isn't in my case) a hover color.

[loopy750]

In library.css I use the following

        #placesMenu > menu {
            color: var(--primary-light-color) !important;
        }

I haven't yet checked out the other bug, but if you look into my library.css you might find some other changes. It's been a while, and I've made so many changes that I can't remember what's different 😃

[overdodactyl]

Thanks @loopy750! I added that and another snippet you had that may fix the borders.

@t2YU2m8l83, can you give it a try when you have a chance and let me know?

[t2YU2m8l83]

@overdodactyl The text is now light gray (excluding the tiny dropdown arrow next to it that's still black). Hover effect and artifacts are still the same. I also noticed that on Windows 10 Pro 64bit the hover effect is white and no border artifacts occur. If you tell me how to open the developer tools for the libary I could try to fix it by myself. I tried Ctrl+alt+shit+i but it doesn't work inside the libary.

[loopy750]

I don't entirely understand what all the problems are, but I'll give it a go.

In my library.css I have the following code for the hover background colour:

        #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
            background: var(--dark-accent) !important;
            -moz-border-top-colors: var(--dark-accent) !important;
            -moz-border-right-colors: var(--dark-accent) !important;
            -moz-border-left-colors: var(--dark-accent) !important;
            -moz-border-bottom-colors: var(--dark-accent) !important;
        }

In overdodactyl's library.css this line removes the top border which doesn't look right in Windows, so it's either not needed or is something specific to macOS:

    border-top: none!important;

If you tell me how to open the developer tools for the libary I could try to fix it by myself. I tried Ctrl+alt+shit+i but it doesn't work inside the libary.

To work on the library in Developer Tools, click the fourth icon left of X and select "chrome://browser/content/places/places.xul".

[loopy750]

Also, I'm just checking Windows 7 again on a virtual machine. Those artifacts appear on Firefox using Aero even without userChrome tweaks, but aren't as noticeable because of the light-coloured background. So it's more of a Windows 7/Firefox issue.

[t2YU2m8l83]

Firefox has indeed a special windows 7 style section that causes this. Simply "removing" it works perfect:

@media screen and (-moz-os-version:windows-win7) {
    treechildren{
        --treechildren-outline: none !important;
        --treechildren-2ndBottomBorderColor: none !important;
        --treechildren-selectedBorder: none !important;
        --treechildren-selectedBottomBorder: none !important;
        --treechildren-selectedImage: none !important;
        --treechildren-currentFocusBorder: none !important;
        --treechildren-currentFocusBottomBorder: none !important;
        --treechildren-selectedFocusBorder: none !important;
        --treechildren-selectedFocusBottomBorder: none !important;
        --treechildren-selectedFocusImage: none !important;
        --treechildren-selectedFocusBackground: none !important;
        --treechildren-selectedFocusCurrentBorder: none !important;
        --treechildren-selectedFocusCurrentBottomBorder: none !important;
        --treechildren-selectedFocusCurrentImage: none !important;
        --treechildren-hoverBorder: none !important;
        --treechildren-hoverBottomBorder: none !important;
        --treechildren-hoverImage: none !important;
        --treechildren-hoverCurrentBorder: none !important;
        --treechildren-hoverCurrentBottomBorder: none !important;
        --treechildren-hoverCurrentImage: none !important;
        --treechildren-hoverSelectedBorder: none !important;
        --treechildren-hoverSelectedBottomBorder: none !important;
        --treechildren-hoverSelectedImage: none !important;
    }
}

Now everything looks like @overdodactyl 's photo though the little dropdown arror still highlights if you hover over it, but that's unimportant.

[loopy750]

Nice, that appears to do the trick, although I think you'll only need

@media screen and (-moz-os-version: windows-win7) {
    treechildren{
        --treechildren-outline: none !important;
}

Unless you know of a scenario where the others are also needed.

[overdodactyl]

Thank you both for looking into this.

this line removes the top border which doesn't look right in Windows

I think this came from trying to remove all hover covers. I don't know what the default is on Windows and Linux, but there's no hover color on macOS. This also keeps consistency with the bookmarks sidebar.

I'll add

@media screen and (-moz-os-version: windows-win7) {
    treechildren{
        --treechildren-outline: none !important;
        }
}

unless I hear the rest of those lines are necessary as well, in which case I'll include it all.

The arrow issue appears to be another Windows specific thing, as I can't reproduce on my side.

[t2YU2m8l83]

I would recommend to implement all of these settings:

@media screen and (-moz-os-version:windows-win7) {
    treechildren{
        --treechildren-outline: none !important;/*border artefacts*/
        --treechildren-selectedBorder: none !important;/*windows border left for selected item when library not focused*/
        --treechildren-selectedBottomBorder: none !important;/*windows border bottom for selected item  when library not focused*/
        --treechildren-selectedFocusCurrentBorder: none !important;/*windows border left for selected item*/
        --treechildren-selectedFocusCurrentBottomBorder: none !important;/*windows border bottom for selected item*/
        --treechildren-hoverBorder: none !important;/*windows border left for hover*/
        --treechildren-hoverBottomBorder: none !important;/*windows border bottom for hover*/
        --treechildren-hoverSelectedBorder: none !important;/*windows border left for hover over selected*/
        --treechildren-hoverSelectedBottomBorder: none !important;/*windows border bottom for hover over selected*/
    }
}

This would result in this pretty decent looking setup:

[overdodactyl]

Thanks! Is that screenshot after the fixes? It seems to still have a hover color/some artifact over the "Roms" folder

[t2YU2m8l83]

I took the screenshot with the changes listed above. Yes, there is still a hover effect but in my opinion it fits the color scheme and i left it intact. The fix removes all the ugly borders from my second bug image; No border artifacts, no borders for selected items, no borders for the hover effect.

[loopy750]

BTW if you ever want to run a free and legal version of Windows in macOS, in a virtual machine, without using Boot Camp, you can download something like VirtualBox and then Windows from this page https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

[overdodactyl]

Thanks! Changes should now all be incorporated.

Appreciate the suggestion for testing on Windows too, I'll have to check that out!

[t2YU2m8l83]

Seems like Firefox 60 changed how those styles apply. Infact the fix for 59 results in ugly black borders. Either remove all lines except "--treechildren-outline: none !important;" or add

#placesViewsDeck treechildren {
    color:  var(--in-content-text-color) !important;
}

Both changes will look more or less the same.

[overdodactyl]

Thanks! I opted to delete all but that one line