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

68.0b1 userChrome.css breaks tabs cumtomizations when accessing about:addons #1131

Closed
troysjanda opened this issue Sep 9, 2019 · 29 comments

Comments

@troysjanda
Copy link

commented Sep 9, 2019

I installed the new build of Waterfox 68.0b1 (the newest with about:preferences fix) Now it seems if you are using a userChrome.css and access about:addons that will break userChrome.css and return all modification to their default state.

Steps to reproduce;

  • install and use userChrome.css
  • open Waterfox
  • either within the url bar or via the hamburger menu select addons.

if you are using a userChrome.css you will notice changes that have been made no longer work.

Waterfox 68.0b1
WIndows 10 18363.329 <--------OnWindows 10 18363.329

@laniakea64

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

I'm not seeing this problem in Waterfox 68.0b1 on Linux. What is the content of your userChrome.css?

@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

Content of userChrome.css

@namespace html url(http://www.w3.org/1999/xhtml);
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

:root[sizemode=normal] #titlebar{ -moz-appearance: none !important; }

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-line[selected="true"] {
background-color: var(--identity-tab-color) !important;
}

/Change highlight color of active tab/
.tab-background[selected="true"] {
background-attachment: none!important;
background-color: blue !important;
background-image: none !important;
}

/* Always hide the tracking protection icon */
#tracking-protection-icon-box {
display: none;
}

/Change text of active tab/
#TabsToolbar .tabbrowser-tab[selected] {
color: white !important;
}

.tab-background {
border-radius: 8px 8px 0px 0px !important;
border-image: none !important;
}
.tab-line {
display: none;
}

.tab-background:not([selected]) {
background-color: #bed7ee !important;
}

/* Dim unloaded tabs */
.tabbrowser-tab[pending] { opacity: 0.5 !important;}

/* Space to the left of tab */
.titlebar-spacer[type="pre-tabs"] {border-inline-end: 5px solid white !important;width: 5px !important;}

#pageActionButton {
display: none !important;
}

.tab-label-container[textoverflow]:not([pinned]) {
mask-image: unset !important;
}

.searchbar-textbox, #urlbar {
border-radius: 20px !important;
}

#appMenu-libraryView > .panel-subview-body toolbarseparator,
#appMenu-libraryView > .panel-subview-body .subview-subheader,
#appMenu-libraryView > .panel-subview-body #appMenu-library-recentHighlights {
display: none;
}

#TabsToolbar {
padding-top: 10px !important;
}

/Hide Close Button until hovered/
.close-icon{
transform:scale(1,1)!important;
transition:opacity 250ms var(--animation-easing-function),
margin-left 250ms var(--animation-easing-function),
transform var(--animation-easing-function),
visibility 0ms 25ms!important;
}

.tabbrowser-tab:not(:hover) .close-icon{
opacity:0!important;
margin-left:calc((-20px * .9) + 2px)!important;
transform:scale(.9,.9)!important;
}

html|*.urlbar-input::-moz-selection {
background-color: blue !important;
color: white !important;
}

#webrtcIndicator { display: none !important; }

.tab-line{
display: none !important;
}

/* Remove Useless Shit From Context Menu /
#context-pocket { display:none!important;}
#context-sep-sendpagetodevice { display:none!important;}
#context-sendpagetodevice { display:none!important;}
#context-savelinktopocket { display:none!important;}
#context-sendlinktodevice { display:none!important;}
#context-sep-sendlinktodevice { display:none!important;}
#context-open-link-foreground { display:none!important;}
/
End RUSFCM */

#appMenu-fxa-container, #appMenu-fxa-container + toolbarseparator {
display: none !important;
}

/*

  • Remove circle, background and padding from back button
  • Contributor(s): Skrity
    */

:root:not([uidensity="normal"]) #back-button > .toolbarbutton-icon {
background-color: unset !important;
border: unset !important;
padding: var(--toolbarbutton-inner-padding) !important;
border-radius: var(--toolbarbutton-border-radius) !important;
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
}

/* Hover and Active states to mimic other buttons */
:root:not([uidensity="normal"]) #back-button:hover:not([disabled]) > .toolbarbutton-icon {
background-color: var(--toolbarbutton-hover-background) !important;
}

:root:not([uidensity="normal"]) #back-button:active:not([disabled]) > .toolbarbutton-icon {
background-color: var(--toolbarbutton-active-background) !important;
}

/* Remove pre-padding */
:root:not([uidensity="normal"]) #back-button {
padding-inline-start: 3px !important;
}

:root {
--toolbarbutton-border-radius: 0px !important;
}

/* Remove separator between menu and overflow */
#PanelUI-button {
border-inline-start: 0px solid !important;;
}

.tabbrowser-tab:before,
.tabbrowser-tab:after{
display: none !important;
}

#BMB_unsortedBookmarks {display: none !important;}

/* persistant down arrow */

#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker
{
opacity: 1 !important;
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
#main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
#main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
background-color: Highlight !important;
color: HighlightText !important;
}
}

/* Focus color url bar */
#searchbar:focus-within {
border-color: green !important;
border-width: 3px !important;
}

/* make sure button icon colors set correctly /
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style
='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* After Firefox 65, next three lines needed the seemingly redundant extra --tab-min-height variables, unclear why they don't just cancel out but sometimes there's a gap without them so whatever /
#titlebar,#titlebar-buttonbox{height:var(--tab-min-height + --tab-min-height) !important;}
#titlebar{margin-bottom:calc(var(--tab-min-height + --tab-min-height)
-1) !important;}
#main-window[sizemode="maximized"] #titlebar{margin-bottom:calc(6px + var(--tab-min-height)-1 + --tab-min-height) !important;}
#main-window[sizemode="maximized"] #TabsToolbar{margin-left:var(--tab-min-height);}
#titlebar:active{margin-bottom:0 !important;}
#titlebar:active #titlebar-content{margin-bottom:var(--tab-min-height) !important;}
#tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){display: none;}
/
End MROT */

#PlacesToolbarItems > .bookmark-item{ padding: 0 8px !important; }
#PlacesToolbarItems > .bookmark-item > image{ height: 16px !important; width: 16px !important; }

Was working in the alpha

@grahamperrin

This comment has been minimized.

Copy link

commented Sep 10, 2019

Cross reference UserChrome.css stops working if user open about:addons : waterfox

Side note, re Markdown to format code:

https://guides.github.com/features/mastering-markdown/#examples ▶ Code

… hint, three characters ``` in the line above and the below the code that you want to 'fence'.

@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

Cross reference UserChrome.css stops working if user open about:addons : waterfox

Side note, re Markdown to format code:

https://guides.github.com/features/mastering-markdown/#examples ▶ Code

This is what is in my userchrome.css file as asked, i copy/pasted. I am not a coder, web developer, programmer just reporting a bug.

@troysjanda troysjanda changed the title 68.0b1 UserChrome.css breaks when access about:addons 68.0b1 userChrome.css breaks when access about:addons Sep 10, 2019
@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

Here is a video to see what I am talking about. Notice my tab are rounded and colored and once I access about:addons it returns to defaults

https://streamable.com/bti45

@laniakea64

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

Notice my tab are rounded and colored and once I access about:addons it returns to defaults

This looks like a side effect of the Australis-Photon theme introduced in 68.0a2, see #1090

Are you sure that the other (non-tab-related) parts of your userChrome.css are affected?

@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

Notice my tab are rounded and colored and once I access about:addons it returns to defaults

This looks like a side effect of the Australis-Photon theme introduced in 68.0a2, see #1090

Are you sure that the other (non-tab-related) parts of your userChrome.css are affected?
Checking the other items, they seem to continue to work after accessing the about:addons. So it must just affect the tabs.

@troysjanda troysjanda changed the title 68.0b1 userChrome.css breaks when access about:addons 68.0b1 userChrome.css breaks tabs cumtomizations when accessing about:addons Sep 10, 2019
@grahamperrin

This comment has been minimized.

Copy link

commented Sep 10, 2019

Thanks. You can close this issue 1131 and subscribe to #1090 for updates,

68.0a2 tabs now have black background with black text

in particular:

… the bug is not immediately apparent

@troysjanda troysjanda closed this Sep 10, 2019
@laniakea64

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

You can close this issue 1131 and subscribe to #1090 for updates,

@grahamperrin It's not that simple. #1112 , which fixes #1090, actually makes this issue worse. I tried the provided userChrome.css in my custom 68.0b1 build, which includes that patch, and the tab styling didn't work at all unless I enabled a persona (which with the current patch is the only way to disable the Australis-Photon theme style).

@troysjanda please re-open this issue, it is not a duplicate and I'm not aware of any fix available atm.

So I see two possible ways to go about handling this:

  1. See if the Australis-Photon theme can be applied in a way that doesn't override userChrome.css.

Or,

  1. Edit #1112 to also add a about:config pref to disable the Australis-Photon themes.

I'm not sure which option is better. I haven't investigated whether option (1) is possible or not. Option (2) is definitely possible, and it would also give Waterfox users the choice of straight Photon theme if wanted.

@troysjanda troysjanda reopened this Sep 10, 2019
@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

Reopened at the request of @laniakea64

This issue might be related to #1090, #1112 but seems that more investigation is needed.

@grahamperrin

This comment has been minimized.

Copy link

commented Sep 10, 2019

Meta, tracking: #538

… give Waterfox users the choice of straight Photon theme if wanted.

💯 yes please

FWIW a few months ago I wrote:

… TBH I never expected anything like a marriage of Australis to Photon – and that wasn't pessimism, just realism – too many future situations in which things might have gained a Frankenstein's monster appearance …

@laniakea64

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

… give Waterfox users the choice of straight Photon theme if wanted.

💯 yes please

#1112 (comment)

@grahamperrin

This comment has been minimized.

Copy link

commented Sep 11, 2019

You angel! Thanks.

Incidentally my Frankenstein's monster prediction wasn't to disparage the people who might work towards an Australis-like appearance for Waterfox Current. It's like … when I look at the breadth and depth of the dependency graph for photon-visual, it seems (to my non-developer eye) inevitable that in some areas, aiming to override or undo stuff is highly likely to have unintended consequences for a subset of users.

@GitCurious

This comment has been minimized.

Copy link

commented Sep 12, 2019

add a about:config pref to disable the Australis-Photon themes

Please consider this as Alpha 2 and Beta 1 are unusable due to my custom CSS being overridden leaving me stuck on Alpha 1

@laniakea64

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2019

add a about:config pref to disable the Australis-Photon themes

Please consider this

@GitCurious I already did add this to #1112 . Building and testing would be appreciated! 🙂

@GitCurious

This comment has been minimized.

Copy link

commented Sep 12, 2019

Is there a binary available or must I build it myself ?

[I am not capable of doing that !]

@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 12, 2019

Is there a binary available or must I build it myself ?

[I am not capable of doing that !]

here is the link to the binary that MrAlex94 posted on the Reddit Sub

https://storage-waterfox.netdna-ssl.com/Waterfox/beta/WINNT/Waterfox%2068.0b1%20Setup.exe

@grahamperrin

This comment has been minimized.

Copy link

commented Sep 12, 2019

… the binary that MrAlex94 posted on the Reddit Sub …

#1112 is open, not merged; and the 20190908151900 build of 68.0b1 for Windows does not include the required preference – no tabs.australiseBuiltinThemes at

about:config?filter=browser.tabs.australiseBuiltinThemes

@grahamperrin

This comment has been minimized.

Copy link

commented Sep 13, 2019

From yesterday's https://www.reddit.com/comments/d1z27a/-/f00p6rx/:

… 'PersonalToolbar' pushing the contents to the right and causing overlap with the last button/icon. …

Does that also fall under the umbrella of this (tabs-oriented) issue?

@GitCurious

This comment has been minimized.

Copy link

commented Sep 13, 2019

Yes, it happens at the same time as the tab glitches - I will try to add a screenshot of before and after:

...after closing the browser, upon reopening it`s reset to normal.

before_and_after_CSS_issue

Incidentally; If I delete the 'startup-cache' folder, the browser starts up with the glitches already visible....no need to open about:addons

@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 13, 2019

Has there been a new build made even if not official?

@grahamperrin

This comment has been minimized.

Copy link

commented Sep 15, 2019

No good for people who use custom CSS, but if rounded tabs are the essence of what's required by someone then this is vaguely comparable to the Default theme:

https://color.firefox.com/?theme=XQAAAAIcAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKliFvYTir2Q8DUsyzFgfxYJ1CQgbhncqdfGZE5sJyozB0AtzP9aT36A-HhxQwvjvnnR7DISw7d2XvZqFPZlfsBzqtgzq0jtmKMgOJFoQtWt1l9MCCdOZWxjMnHlM6afsN0BNiFdOMRrujzEPXeHfF-GFn_o0rraJaFaEwm6vvZh893ahXukK0lQCADGloVv4OWD2uwMKwDzoRRv_7GtFgA

– and visiting (68.0b1) about:addons should be enough to activate the roundness.

@troysjanda

This comment has been minimized.

Copy link
Author

commented Sep 16, 2019

Saw some new commits but not for this isses.

@grahamperrin

This comment has been minimized.

Copy link

commented Oct 1, 2019

@Croydon just FYI the misplacement in the window to the right:

image

  • each tab shifted to the left of where it should be
  • not worked around by any change to preferences for Vertical Tabs Reloaded.

I guess, it's a side effect of this Waterfox Current issue #1131. If you suspect not, I can raise an issue in your area.

@laniakea64

This comment has been minimized.

Copy link
Contributor

commented Oct 4, 2019

Fixed by 0e1ff89 ?

@troysjanda

This comment has been minimized.

Copy link
Author

commented Oct 4, 2019

Is there a new release, build?

@grahamperrin

This comment has been minimized.

Copy link

commented Oct 4, 2019

@troysjanda

This comment has been minimized.

Copy link
Author

commented Oct 4, 2019

@grahamperrin I know where to monitor, but there has not been a (un)official build in weeks and I know that there are a few others that build on their own.

@troysjanda

This comment has been minimized.

Copy link
Author

commented Oct 15, 2019

Seems to be fixed with new build 2019-10 Current. Closing this as fixed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.