Unusable Transparent Popup for Tab-Specific-Properties After Update to Supernova 115.4.3

[bsumisu]

After updating to Supernova 115.4.3 on Macbook pro OS 12.6.8, the tab-specific-properties turned transparent. I tried different themes, disabling all themes, and checked for other potential fixes using config editor, but came up with nothing. This makes premium quickfolders unusable.

[RealRaven2000]

Should be easy to fix, but it's hard for me to test without a Mac platform. is there any way we can do a remote session, possibly using Zoom?

[bsumisu]

I'm willing but this is my work computer and I don't think they'd be too pleased if I did that. Any other options??

On Fri, Nov 17, 2023 at 12:41 PM Axel G @.***> wrote:

Should be easy to fix, but it's hard for me to test without a Mac platform. is there any way we can do a remote session, possibly using Zoom?

— Reply to this email directly, view it on GitHub https://github.com/RealRaven2000/QuickFolders/issues/433#issuecomment-1816834243, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHVOZZYEUNIRTMN4GSQDN3DYE6OT7AVCNFSM6AAAAAA7QC5PFKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJWHAZTIMRUGM . You are receiving this because you authored the thread.Message ID: @.***>

[RealRaven2000]

Alternatively you could do some research with the built in Inspector pf Thunderbird (Ctrl+Shift+I) you can find this under developer tools. Then in inspector select the correct document:

select the <dialog> elelment, check for background-color rules:

in computed style check the background-color setting:

[bsumisu]

Ok, I'll give this a try. Thanks!

[bsumisu]

...Or I'd like to give it a try. Unfortunately, the last Supernova update seems to have also broken my devtools toolbox. When I go to open it nothing happens. I've tried every avenue I can find.

[RealRaven2000]

I think those -moz prefixed css variables are somewhat outdated so I will look for a more modern theme-aware --variable which I hope will be available (the panel is displayed in its own window and not injected into the main window, I need to check whether the appropriate theme aware style sheets are loaded). I will upload a test version later today.

[RealRaven2000]

Did some more digging, so very interestingly, we have browser styles that determine this color, in the QuickFolders Advanced Properties tab, the rule for the element <dialog id="qf-tabproperties" ... > comes from global css:

:root {
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
}

whereas the background for the QuickFolders settings window (found in extensionPopup.xhtml) shows the same rule, but as "inline" - I think this is caused by the way global style sheets are injected in this kind of window. So there are 2 questions

1 - does the same rule apply in Mac? Is there an alternative variable used there? 2 - if 1 applies is it possible that the variable -moz-Dialog is not defined for some strange reason in this platform? 3 - if 1 does not apply (rule is not visible in the window) can it be injected manually using the same value? IN that case I could add a specific style sheet for Mac to force setting the background color on :root.

As an alternative I found the following rule on one of the (now quite rare) left over dialogs, the folder properties window:

:root:not([lwt-tree]):-moz-lwtheme:-moz-window-inactive {
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}

So these seem to be the nice theme aware variables for these elements in the file themeableDialog.css

:root:not([lwt-tree]):-moz-lwtheme:-moz-window-inactive {
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}

(this rule even wins when I set the html element to :active . So maybe setting that color as a fallback in :root might work, provided the --lwt prefixed variables (lightweight theme vars) exist in the properties panel...

[RealRaven2000]

1 - does the same rule apply in Mac? Is there an alternative variable used there? 2 - if 1 applies is it possible that the variable -moz-Dialog is not defined for some strange reason in this platform? 3 - if 1 does not apply (rule is not visible in the window) can it be injected manually using the same value?

One more possibility I forgot to mention here is that there is an overriding rule that sets background color to transparent or unsets the rule in :root.

[RealRaven2000]

So I added this rule to the specific style sheet for the popup:

as you can see, the variable is not defined in this context. so maybe I am missing a fundamental "themeable" flag or something...

the way I open the panel:

     let win = window.openDialog(
      "chrome://quickfolders/content/quickfolders-advanced-tab-props.xhtml",
      "quickfolders-advanced",
            `chrome,close=no,alwaysRaised,titlebar=no,left=${x},top=${y},popup=yes`,
      folder, entry); 

the dialog is still written in XUL (not converted to modern HTML yet) - so I need to treat it similarly to the dialog register.xhtml. Looking at both xhtml documents I ess that the register one apart from loading global/skin/ folder it explitely loads 2 more style sheets:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<?xml-stylesheet href="chrome://messenger/skin/input-fields.css" type="text/css" ?>

so I am going to add those 2 to the advanced tab props document...

[RealRaven2000]

OK, making some progress here, I can kind of simulate your problem here in windows, after adding the 2 missing style sheets, I get a similar result (transparent background):

what I see here is that these variables are (still) unknown and the rule actually causes the transparency (the panel displays normally when I disable the rule):

So I am still theorizing that the variables are missing in Mac, maybe there is another, OS-specific style sheet that is necessary to be added on Mac. Or again it is the way I invoke the dialog, so I am going to look into this as well. it may just be a simple window attribute that is missing...

[RealRaven2000]

Can you try this version, I added a few things and the above rule in quickfolders-tab-advanced.css :

QuickFolders-mx-6.3.1pre10.zip

:root {
  background-color: var(--lwt-accent-color-inactive, -moz-Dialog); /* lwt stuff unknown here? */
}

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[RealRaven2000]

New version to test, this one has some added style sheets from Thunderbird itself and some conversion steps towards html (replaced groupbox elements with fieldset and added legend for same):

QuickFolders-mx-6.3.1pre23.zip

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[bsumisu]

Thanks for working on this! Sorry it took so long to respond, I've been offline. With this zip, the transparency issue is fixed (yay), but the fields for background and text color are...dead, no response. I restarted Thunderbird just to be sure.

[RealRaven2000]

Ok, so I tested here in my production profile (windows) - I could click the color picker to change the text color to green:

I then also pasted a new gradient and forced update using the [Apply] button:

When you say "dead" do you mean the background / Text color buttons don't open the websites for creating the CSS?

[bsumisu]

For the background, I've always clicked to select it and then pasted my color choice in easily. Now, there's no way to select or paste anything there. The field is entirely unresponsive. For text color, I could click the color picker, but it wouldn't let me go beyond that.

In other words, when I put my cursor over the open field to the right of "background," it's as if I'm trying to paste the new color into blank background. I can click the black box to the left of "preview" and it takes me to the color picker, and oddly, sometimes it takes me there, other times it does nothing. But even when it does, it doesn't accept the new color. I hope this makes sense?

[bsumisu]

If I click "text color" it takes me here: https://developer.mozilla.org/en-US/docs/Web/CSS/color IF I do that, and then click the black box, it gives me this popup, and I can select a color, which I did (red). But "preview" isn't clickable. So I just clicked "apply" and then "ok." The folder remains at default.

[bsumisu]

I've also tried checking and unchecking "custom palette." And restarting again.

[RealRaven2000]

ok, weird, you cannot edit any of the text boxes anymore? Not even the "To:" field? I haven't changed those at all...

[bsumisu]

I just checked...no, can't edit "to" either. I tried disabling any themes, but still had the problem. So far, I haven't found any similar problems with other addons, and the "search" field is fine.

[RealRaven2000]

wondering whether adding fieldsets somehow disables the input boxes on Mac. Have you got a valid / active QF Pro license? (there are restrictions on the advanced properties otherwise, just wanna rule that one out)

[bsumisu]

Yes, my license is still valid. It expires on 12/1...actually, it's 11/30.

[bsumisu]

I see I can update from 115.4.3 to 115.5.0 now. I'm going to do that right now and then I'll check again to see if that makes any difference.....UPDATE: No difference. Was worth a try anyway.

[RealRaven2000]

New test version here;

QuickFolders-mx-6.4pre33.zip

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[RealRaven2000]

So we still have the problem that the <html:fieldset> group containers (which make the group headings, a.k.a. legends visible again) somehow blocks any keystroke / focus events on <input type=text> - in short, lead to disabled textboxes on Mac only. Ultimately this can be resolved by rewriting the whole dialog / panel in html (rather than using xhtml).

Another problem we see is that (on Mac only) all other windows - such as the color picker - will be rendered behind the panel on Mac, and not in front like here in Windows:

C:\Users\axelg\Desktop\2023-11-27 10_43_07-Inbox - axel@songcraftstudios.com - Mozilla Thunderbird.png

So my best action here is a complete rewrite as HTML I think any other action will ultimately just be a waste of time.

[bsumisu]

Turns out it's worse than that. I can no longer even do the basic color changes. If I select a color for a folder, it doesn't change. I tried changing palettes, but the new palette isn't applied. This screenshot should have been the pastel palette, which it isn't. I tried to apply a color to the test folder, but nothing happens. Quickfolders no longer works at all (and I am sad).
Update: The "test" folder had no previous color applied. When I checked for a folder that already had a color, the pastel palette came up. When I saw that, I went back to the uncolored one and tried again...still not pastel. I thought maybe that would be a clue of some sort.

[bsumisu]

I went back to the pre23 version to see if that made any difference with basic colors...it did not.

[RealRaven2000]

I am currently rewriting the whole advanced tab (window) in html. which means I have to rewrite all the logic in javascript in a API compatible way, so it's going to take quite a while. It took weeks to rewrite the options window, hopefully I can reuse a lot of the code from there (especially for the preview. nbot sure what's going on with the main window, I will test that as well with a friend who owns a Mac.

[RealRaven2000]

Turns out it's worse than that. I can no longer even do the basic color changes. If I select a color for a folder, it doesn't change. I tried changing palettes, but the new palette isn't applied. This screenshot should have been the pastel palette, which it isn't. I tried to apply a color to the test folder, but nothing happens. Quickfolders no longer works at all (and I am sad). Update: The "test" folder had no previous color applied. When I checked for a folder that already had a color, the pastel palette came up.

If you think this is a new issue for QuickFolders (and not related to the changes for this one) can you please raise a new issue for this? Before you do this, make sure you know answers to these

• are you sure you haven't selected a custom palette for that particular tab? This might lead to the color issue on the popup (no gradients). that might also lead to that problem.
• do you get error messages when you click on the new color value ?

If I go to advanced tab properties and select the custom palette with 2 colors:

then I will see this in the background popup:

if you use 2 color mode in advanced tab you must also set a background image n the Custom CSS in order to override the specificity of the background-color, like this:

the tab color popup was really designed to only work with gradients as far as I remember, but I may be wrong here. Maybe 2 color mode is actually just globally broken.

[RealRaven2000]

ok, by design:

this means - to color an individual tab through the QuickFolders popup, you need to select one of the three palette entries above! To use two specific "2 colors" without any gradient backgrounds use the Custom CSS technique I described in the comment above and make sure to use the "default color" setting and not any palette entry from the color selector:

[bsumisu]

Apologies! I think I've confused things. I thought maybe the two were related but it sounds like they're not. Oddly, I changed the palette option back and forth several times, restarted, went back to pre23 version, then again to pre33 and now the basic way of coloring a folder works, with all 3 palettes. Not sure what changed, but I will hold on this and post a new issue if it resurfaces.

[RealRaven2000]

Currently rewriting the panel in html, if you want to see what if will look like you can test with the version below:

QuickFolders-mx-6.4pre50.zip

to invoke the new version you hold down Shift while clicking on the "tab-specific properties" menu item. you need to do it in a fresh session because using the old one may cause the new one to vanish behind the main window. some weird behavior of topmost windows...

looks like this in windows. caution, it doesn't "work" yet, I have to rewrite the entire JavaScript code behind the window in an API compliant way. Starting point are 401 lines of code in qf-advancedTab.js, but they call a lot of other functions in QuickFolders which are not API compliant (yet).

At least you will be able to see what it looks like on Mac. Not sure if I can get rid of the titlebar of the window, as this isn't allowed for the API function browser.windows.create(). Their very restricted web extension functions are for web pages which aren't allowed "fancy stuff" like making stuff look as if it was part of the app itself.

https://webextension-api.thunderbird.net/en/stable/windows.html#create-createdata

[bsumisu]

I pasted a gradient color to check out the text box. Can't apply it or preview of course, but it's progress! Here's a screenshot so you can see it on my Mac.

[RealRaven2000]

I found an additional issue with setting from / to headers using this dialog, see issue #437. I also did some more work on the layout of the window (in both versions), see:

QuickFolders-mx-6.4pre66.zip

[bsumisu]

Layout looks good!

[RealRaven2000]

While I will be rewriting for the html version I have made another attempt with the xhtml version, replaced once again the fieldset elements with groupbox elements. I also removed the alwaysRaised attribute on Mac because it will make the color picker covered by the dialog (doesn't happen on windows). Disadvantage here is that if you click any other part of the window the panel will not be automatically closed but just vanish in the background, which is not ideal at all. In that case not sure what happens if the user clicks the advanced tab properties again - my theory is that a second panel will be created on Mac.

QuickFolders-mx-6.4pre84.zip

To test this version, try out the menu item without holding Shift.

• did the transparency problem return?
• can the text boxes be edited?

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[RealRaven2000]

Thanks to @kappe619 I have new version for Mac, which uses the xhtml method, but without being a topmost window. Here is the versions. Careful, if you click the main Tb windows then it will stay open behind it!!

QuickFolders-mx-6.4pre85.zip

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[bsumisu]

I installed pre85 and tried placing gradient colors on the TEST and WaitRoom folders. Worked perfectly!

[bsumisu]

I saw your last two comments at the same time and started with pre85. Should I test pre84 too? If that would be helpful, I'm happy to.

[MichaelJFischer]

I also have this same transparent background problem on the Mac (Sonoma 14.1.1), even with the latest Thunderbird 15.5.1. Yesterday when it first happened, it affected all of my desktops, even after TB was killed! I had to log out and back in to get the popup off of my wallpaper. But perhaps that wasn't enough since the machine did a panic reboot during the night. Now when it happens, if I exit TB right away, the popup disappears along with TB.

[RealRaven2000]

I saw your last two comments at the same time and started with pre85. Should I test pre84 too? If that would be helpful, I'm happy to.

no it's fine, no need to go backwards. I am probably going to drive the html version of the tab forward as well, so that it may be available for testing when clicking Shift.

Nice to Have: when the main Thunderbird window is clicked the panel should automatically close (and not vanish behind the main window). This can probably be achieved by attaching a blur event handler to the panel window - but it needs to not close if a color picker is clicked.

Tech note: I was using the alwaysRaised attribute and the popup=yes as part of the windowFeatures string in order to achieve a working floating window on Mac but it wasn't possible. Now I only add these items for Windows / Linux. They are still not ideal because they cause weird "topmost" behavior in the main window that can also lead to other windows being pushed to the back. window.openDialog() uses these features from the window.open() API. The color pickers are not covered b the panel in Mac anymore (they already worked as expected in Windows).

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

[bsumisu]

I did notice that odd window behavior on earlier versions because Advanced Properties couldn't be closed without restarting Thunderbird. Now it behaves like everything else—if I click it, it moves to the top. Gradient generator is a tab, and text color is a popup. So from my perspective, everything is back to normal.

I am very appreciative of how quickly you jumped on this to get it fixed. This addon alone is a big reason I stick with Thunderbird. Thanks!

[RealRaven2000]

I tried to use the blur event to detect when the dialog loses focus, but unfortunately it does not give me the info of the newly focused (clicked) element, in the relatedTarget attribute. This is always null, possibly for security reasons. so there is no way for the window not to go into the background as long as it is non-modal, because I cannot force it back to the top generally for this event.

It would yet again defeat the color pickers. However, in Windows I find out that merely setting "popup=yes" is actually sufficient to create a window that stays on top of Thunderbird without blocking entry in 3pane. And it allows other windows to come to the front (alwaysRaised had the nasty side effect that it promoted the Thunderbird window itself suddenly being topmost to anything else on the Windows desktop). So the only big difference here is that Mac window order is borked by "popup=yes" for some reason; but this needs to be tested once again on Mac, maybe I can do one more test session with @Kappe619?

The code at the moment looks like this, governed by a switch isMacPlatform that determines running on Apple:

    let winProps = `chrome,left=${x},top=${y},width=490`;
    if (!isMacPlatform) { // avoid color popups being hidden on Mac
      winProps +=",popup=yes";
    }
    // the window may correct its x position if cropped by screen's right edge
    let win = window.openDialog(
        "chrome://quickfolders/content/quickfolders-advanced-tab-props.xhtml",
        "quickfolders-advanced",
        winProps, 
        folder, entry); //

The missing popup flag makes the window show the title bar (with close / resize system buttons) and being modal (blocking access to the main window)

QuickFolders-mx-6.4pre90.zip

---

for convenient debugging & testing behavior of windowFeatures in Mac, I added these lines:

let forcePopup = false; // for debugging on Mac
let forceRaised = false; // for testing alwaysRaised
debugger;

[RealRaven2000]

After testing on Ubuntu, it turns out that the popup feature will also make child windows (like the color picker) linux behave the same way as Mac, here is a version that forces a normal dialog instead on Linux also:

QuickFolders-mx-6.4pre94.zip

[RealRaven2000]

I also decided to change the way the documentation sites for text color / background (colorzilla gradient editor) are loaded - these will now open in the default browser rather than a tab, because it is awkward to use with the properties window floating on top:

QuickFolders-mx-6.4pre95.zip

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[RealRaven2000]

I decided to make the popup feature optional with a debug switch, in case Mozilla decides to fix popup windows in the future or the user just prefers having the more aesthetic look of the popup mode. It can be enabled on the QF advanced settings page, by right-clicking debug. Then toggle the switch:

extensions.quickfolders.debug.advancedTabProperties.forcePopup = true

Note: child windows of advanced tab such as the categories or color popups will be covered by the advanced popup window due to the erratic implementation in Mac / Linux. Unfortunately, the color picker panel is automatically placed in the same location as the panel (the parent window) so it's almost certain to become hidden.

QuickFolders-mx-6.4pre96.zip

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[RealRaven2000]

Just realized I broke the open browser function somehow, so I fixed it. Since I cannot copy new version to the linux VM I have to publish the versions here to test. Hopefully the last one for today. browser links now work in Windows so they should on Mac / Linux too:

QuickFolders-mx-6.4pre97.zip

---

to install the test version, download the zip file and then drag the file into Thunderbird Add-ons Manager (do not extract contents).

[bsumisu]

Installed pre97 and all looks good on my Mac!

[RealRaven2000]

@bsumisu thanks for testing!

To set the test flag I mentioned 3 comments above, I have now also repaired the problem described in #441 - this opens up a whole bunch of advanced settings to my Linux and Mac users - so far I didn't know they weren't accessible on these platforms!

6.4pre114 will give access via these new sprocket buttons:

Debug settings (including debug.advancedTabProperties.forcePopup) can now be set much easier on advanced tab:

[RealRaven2000]

Added a minor fix for icon colors in dark mode. Important: on many platforms you need to enable a switch to have proper coloring of the new svg icons in dark mode. Open about:config (via General Settings / Config Editor...) and set:

svg.context-properties.content.enabled = true

this will fix a bunch of problems with svg icon colors in themed dialogs, especially on Mac and Linux.

QuickFolders-mx-6.4pre115.zip

[RealRaven2000]

Fixed in 6.4 released on 04/12/2023