piroor / treestyletab

Tree Style Tab, Show tabs like a tree.
http://piro.sakura.ne.jp/xul/treestyletab/
Other
3.46k stars 277 forks source link

random color change? #2352

Closed stapuft closed 4 years ago

stapuft commented 5 years ago

Short description

Firefox crashed, when it restarted, I reopened my closed tabs, TST loads, and then when the list of tabs appears, TST closes, and reopens, multiple times, after it finally stopped crashing and ran like normal, my colors were completely different.(colors are supposed to be blood red with no highlight, but are pink with a super large white highlight now) image my settings don't have any highlight on the words, theme is "mixed" with browser colors added,

.tab {
background-color: var(--colorE);
height: var(--tab-height);
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid var(--colorF);
}

.tab {
height: 19px;
}

.label {
font-size: 11px;
}

/* Show title of unread tabs with red and italic font */
.tab.unread .label {
  color: red !important;
  font-style: italic !important;
  font-weight: bold;
}
*/

/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: "🕶";
}
*/

*//* Change styling of pending (unloaded) tabs */
.tab.discarded {
  opacity: 0.75;
}

.tab.discarded .label-content {
  color: red;
}

.tab.active {
  height: 20px !important;
  background-color: #193B99;
}
.tab.active .label {
  font-weight: bold;
  font-size: 14px;
}
.tab.active .twisty,
.tab.active .label,
.tab.active .counter {
  color: #fff;
}

*/*/All of the options in this section need the raw count of tabs available. This is done using CSS counters:*/
#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}
#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
.tab:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
.tab:not(.collapsed) {
  counter-increment: vtabs tabs;
}
.tab:not(.discarded) {
  counter-increment: atabs tabs;
}
.tab {
  counter-increment: tabs;
}

.tab:hover::after {
  background: red;
  color: HighlightText;
  content: counter(vtabs);
  font-size: x-small;
  left: 20px;
  padding: 0.2em;
  pointer-events: none;
  position: absolute;
  bottom: 0.2em;

  z-index: 100;
}

*/*/Both of the options in this section use the following block of CSS to position some text in the New Tab button. The text that is displayed is specified in each option below.*/

.newtab-button::after {
  content: var(--tab-count-text);
  pointer-events: none;

  position: absolute;
  left: 0.5em;

  /* TST 2.4.0 - Fix for Issue #1664 */
  background: transparent !important;
  mask: none !important;
}
.newtab-button {
  --tab-count-text: counter(tabs) "tabs";
}
.newtab-button {
  --tab-count-text: counter(atabs) "/" counter(vtabs) "/" counter(tabs) ""; 
}
.newtab-button-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}
#tabbar {
  top: 20px !important;
  bottom: 0 !important;
}
.tab.pinned {
  margin-top: 20px;
}

*/

/* hide scrollbar */
#tabbar { scrollbar-width: none; }

/* cancel spaces for macOS overlay scrollbar */
:root.platform-mac #tabbar:dir(rtl).overflow .tab:not(.pinned) {
  padding-left: 0;
}
:root.platform-mac #tabbar:dir(ltr).overflow .tab:not(.pinned) {
  padding-right: 0;
}

/* put scrollbar rightside */
:root.left #tabbar { direction: ltr; }
irvinm commented 5 years ago

If you clear out your CSS, do your tabs return to the standard or is there any residual formatting after that? (Trying to see if there is something else causing some formatting)

stapuft commented 5 years ago

If you clear out your CSS, do your tabs return to the standard or is there any residual formatting after that? (Trying to see if there is something else causing some formatting)

no, this is what it looks like when I remove the css and change nothing else image

Hirato commented 5 years ago

I noticed that the extension updated to 3.1.6 today. And the first things I noticed were

  1. The header image was tiled in the side bar once again
  2. The text in the sidebar was super glowy, as in almost unreadable.

I believe this commit is responsible for these changes; 51ebdc0b49016df4a224bd402705b3312cbc21a4

Which is probably what makes you text, despite being red, look pink.

I'm guessing it was broken before, but I personally much preferred the solid colour it derived from the theme with the non-fuzzy text. As for the textshadow adding the glow, the old code worked much better, as it was giving white text a black shadow giving it better contrast. The White shadow for the white text just makes it fuzzy and hard to read, and in stapuft's case, makes his text look "pink".

piroor commented 5 years ago

@Hirato "The text in the sidebar was super glowy, as in almost unreadable." Sorry I wrongly applied inverted color for text-shadow. The problem should be fixed with the commit ae2be2c.

irvinm commented 4 years ago

@Hirato \ @stapuft ... can you guys give us an update using the latest version?

cipri-tom commented 4 years ago

Version 3.2.4 introduced dark colour scheme and now everything is dark when I select Plain or Mixed. Vertigo still has ok colours, but I don't like it because there are no tab separators. Same for "Sidebar". Ticking or unticking "Apply Browser theme" only influences the stuff behind the tabs (I guess this is normal).

irvinm commented 4 years ago

@cipri-tom I cleared out my TST CSS and looked at both plain and mixed and could still see tab separators. Can you clear out any CSS you might have to make sure it isn't changing any colors?

cipri-tom commented 4 years ago

@irvinm thanks for the quick reply ! I have nothing in my CSS in TST preferences. And userChrome.css is disabled in about:config.

Please note that I said that only Vertigo has no tab separators.

Now I have restarted Firefox and even Vertigo as dark colours, which previously had ok, light colours, but no separators.

Actually, I restarted again and Vertigo has light colours. Am I dreaming? X_X

EDIT: If it is not clear, I do have Dark mode enabled in my MacOS ! But until now TST's Plain and Mixed were independent of it.

piroor commented 4 years ago

@cipri-tom Do you mean a result as following?:

A screenshot may help my understanding what's happen on your environment.

Currently TST is designed to apply a dark color scheme only when you choose the theme "Plain Dark", or you choose a dark color scheme of the platform itself. Otherwise "Plain", "Vertigo" and "Mixed" should be shown with light color scheme.

irvinm commented 4 years ago

Here is what I see with no TST CSS. There are no tab separators with either vertigo mode. That might be by design.

Vertigo Light: Snag_d61ed1

Vertigo Dark: Snag_d65581

Plain Dark: Snag_e02597

stapuft commented 4 years ago

@Hirato \ @stapuft ... can you guys give us an update using the latest version?

it still happens randomly, I think it has something to do with memory, because I have noticed it happens more, when I have more active tabs, and the more it happens, the closer Firefox gets to crashing itself.

irvinm commented 4 years ago

@stapuft not sure of your operating system, but while you only have 4GB of ram with an older Celeron processor, how much virtual memory have you configured? I am only asking because, while you would not get good\great performance from giving the OS a lot of virtual memory, at least you would be able to do more and Firefox should not crash.

The other 2 things that jumped into my mind was:

  1. What setting you were using for for the Firefox "Performance" option? (# of content processes)
  2. Have you tried the new option where Firefox can automatically put tabs to sleep when memory is low? (I think they rolled it out then disabled it due to some tabs getting put to sleep even when memory wasn't low.) [See https://bugzilla.mozilla.org/show_bug.cgi?id=1587762]
stapuft commented 4 years ago

@irvinm I am running windows 10, and I have another 4 GB of virtual memory, which is a rather good portion of my harddrive space tbh, but I do wish I could give it more....but I also need some free space for general stability, and to be able to stream/cache things.

as for the other two things

I have no clue? where is that option at? I didn't know you could customize that, I just keep the about:memory page on my toolbar so I can free up memory occasionally that way. (I just found them, I have the enable hw acceleration checked, and I have the processes set to 4)

I didnt know they disabled it, but yes I had that enabled, before they rolled that out, I had also used an extension to do that, but seeing the feature, I removed it to save memory lol. I had it set to no more than 10 active tabs with the extension if I remember right...(this however I do not see in the options anymore [though I did stumble across "javascript.options.discardSystemSource" set to false in about:config, so I'm going to try to enable it to see if thats the tab discarding code] )

irvinm commented 4 years ago

4GB physical and 4GB virtual memory isn't too bad for Windows 10 ... assuming you aren't doing too much outside of using your browser.

Glad you found the content process options. The lower the number, the less memory will be used by Firefox. (Obviously, the performance will go down some) You could try lowering it to 2 or even 1 to see if that helps.

I personally use "Auto Tab Discard" as my addon to automatically "discard" inactive tabs. It has several options and you can whitelist sites you don't want to automatically discard.

stapuft commented 4 years ago

yeah i really don't, I use VLC to play my media, (streaming) and I have my antivirus doing its thing, but it is mostly just Firefox.

it is definately running smoother at 4, if I run into more problems though ill try lowering it to 2 or 1.

thats the extension I was using, since I can't find the option to turn it back on, and that about:config did nothing, I think I'm going to go back to it.

you guys rule @cipri-tom @Hirato are either of you still experiencing this issue? if not I'm going to close this. a suggestion is another thread, "disable tree restoration cache" has essentially stopped this from happening for me (the only time it happens now is right before Firefox crashes entirely. and the color change to pink thing doesnt happen anymore at all)

cipri-tom commented 4 years ago

Hey, @piroor , I missed your reply. Sorry :(.

@cipri-tom Do you mean a result as following?:

* The light (bright) color scheme is active as the default color of the platform macOS

No. The default color scheme of the platform is Dark.

* The dark color scheme is applied on "Plain", "Vertigo" (sometimes), and "Mixed".

A screenshot may help my understanding what's happen on your environment.

Currently TST is designed to apply a dark color scheme only when you choose the theme "Plain Dark", or you choose a dark color scheme of the platform itself. Otherwise "Plain", "Vertigo" and "Mixed" should be shown with light color scheme.

So this is the expected behaviour. It only started working recently, then. I'm sorry I missed that.

Is it possible to have a light color scheme despite the plaform's dark mode?

piroor commented 4 years ago

@cipri-tom OK, I've understood what is the expected.

Basically TST tries to show its UI with colors matching to Firefox's UI, so if you are OK that the navigation toolbar and other Firefox UI are shown with light color, a built-in theme "Light" (choosable at the about:addons) applies light colors to TST's sidebar (for "Plain" and "Mixed").

If you exactly want to show dark toolbar and light sidebar, then sorry there is no builtin way for now - the opposite of the "Plain Dark", because I though that no one want to use the combination...

piroor commented 4 years ago

@cipri-tom I've introduced a change 604b80d5ce10aa4b5771a3f17588870497653eb7. After the commit TST don't apply browser's color scheme if you turn off the checkbox "Apply Browser Theme" checkbox under the "Appearance" section of TST's options. I hope it may help you.

cipri-tom commented 4 years ago

@piroor Thank you for being so reactive.

Regarding your first comment, I have the "Light" color scheme enabled and "Plain" style. But something tells me this may be a bug of Firefox 🤔 (because if Light is selected, then this page shouldn't be dark, right?)

Screenshot 2019-11-15 at 10 51 45

The navigation toolbar and other Firefox UI is light, as you said, but not the background on this page. The TST settings at this time are:

Screenshot 2019-11-15 at 10 49 25

If I disable "Apply Browser theme", the colour behind the tabs becomes dark.

I have the feeling there is something cached, somewhere, which keeps the tabs dark. It's weird that I'm the only one experiencing this...

I'll now try your fix and come back to this


Edit

I've installed the temporary add-on. Its build date is more than 24h after the commit, so I suppose it includes that code. However, the tabs look exactly like above. I cannot get to the "preferences" page of the temporary addon to experiment with other themes.

Would you like to see any files on my computer or something?

irvinm commented 4 years ago

@piroor any thoughts?

@cipri-tom are you running Windows? If so, do you have your OS colors set to light or dark? (Windows settings -> Personalization -> Colors)

cipri-tom commented 4 years ago

@irvinm I am runninc MacOS Mojave and yes, I do have the OS color setting set to Dark.

piroor commented 4 years ago

I've introduced more changes to style definitions. Now the priority of the color scheme on certain styles (Plain, Vertigo and Mixed) is clearly defined as:

  1. Colors defined by a non-default theme including Lignt/Dark (highest priority)
  2. Dark colors configured as the default theme
  3. Photon colors or CSS system colors (lowest priority)
cipri-tom commented 4 years ago

@piroor I have installed the nightly from CI/CD (786a66d) and I am happy to report that the colors are light again ! 🎉 👍 🏅

I cannot see which theme is enabled because I don't know how to access the settings of the temporary add-on. But I think I was on Plain before loading it, so it works correctly.

Many many thanks for your resilience and continuous effort with this !

irvinm commented 4 years ago

@piroor I think we might be able to close this one.