Convert Settings screen to HTML, and move to Tab

[RealRaven2000]

In order to be future proof, but also to simplify moving it into a tab, we need to start converting the xhtml / xul based settings screen into plain HTML. This is necessary to make SmartTemplates more compatible with Thunderbird 115 and newer versions as XUL and related layout rules are gradually removed in Thunderbird Core.

Problems

• at the moment the settings screen is complicated and has 2 side-by side parts. It already had problems based on using flex, this needs to be redesigned
• the variables tab needs to be recoded in a way that it can also be used within Composer
• the account templates area uses cloning to generate the different identities; this needs to be redone in HTML
• some parts of the settings (such as the license tab) do not need to share half the screen with account settings. Only show components of the "right hand side" with the account settings where it makes sense.

[RealRaven2000]

So far, some users have made pretty dreadful experiences with the settings dialog in Thunderbid 115, so this issue must be escalated to become the next most important thing. It will be very hard to do without breaking everything, converting the Settings for QuickFolders was a nightmare and took several weeks.

I am pinning this issue to the top three now.

[RealRaven2000]

Working on the preview, it doesn't functionally work yet but you can preview the layout via the test menu:

smartTemplate-fx-4.5.1pre11.zip

here is a preview of the very first page. I have to completely rewrite the code that clones this deck for each of the identities so I can fill the dropdown.

[RealRaven2000]

Improved layout to be more functionally responsive and implemented population of accounts dropdown and the switch between its respective template pages. File Templates page is now separate, but needs to be completed later (bigger piece)

The next step will be implementation of Global & Advanced settings, which covers the majority of legacy preferences.

smartTemplate-fx-4.5.1pre17.zip

To get to the settings quickly via the status bar link you can configure extensions.smartTemplate4.settings.html = true

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Latest version, this one includes the variables tab with implementation. Also shows button on file templates panel (nothing functional here yet). Had to remove a bunch of "chrome://" references in css and html source codes. Made more responsive and tidied up looks for collapsed menu (narrow main window hides menu labels)

There are still problems with reading all settings on the account templates, so this portion needs to be stabilized next.

To do (Account Templates):

• load all identities
• show more info on identities (include the email address for disambiguation!)
• implement storing edited changes to legacy prefs

smartTemplate-fx-4.5.1pre24.zip

Screenshot:

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Next iteration: I added the missing pages and a bunch of layout improvements as well.

• Improved File Templates buttons (still need to implement all functionality)
• Global Settings Page
• Advanced Settings Page
• Variables Frame
• About Page with links
• Licenses Page (not functional)
• Support page (partly functional - only the support links work)
• Improved layout and responsiveness

To do next:

• complete implementation of Account Templates
• make sure settings are written back to Legacy Prefs
• integrate examples tab
• start to work on File Templates page

smartTemplate-fx-4.5.1pre26.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

I found an interesting behavior if icons in dark mode:

with the default setting of svg.context-properties.content.enabled = false

...the icons in the navigation element ul#categories are colored correctly however the icons on the main content (in #preferencesContainer) show up as black:

(they do show u p correctly with svg.context-properties.content.enabled = true)

I ran a test using the "youtube" icon in the categories menu on the left where it showed correctly, so it is not due the structure svg file. It seems that any rules with fill and stroke are ignored in the main area. I did copy a number of theming rules to style the vertical categories menu, but i am not sure which ones make the coloring work...

[RealRaven2000]

Here is another version with a lot of layout issues fixed, but still some problems with making svg icons theme aware.

• replaced main menu icons with svg files
• disable "use common" option when Common is selected in account dropdown. (nice to have: show an explanation that this is the default/ fallback when no account settings are configured)
• implemented examples tab
• license tab: I have started writing code - at least the key is now displayed, but the validation / paste functions are not implemented.
• license tab = link to premium functions page is now working

smartTemplate-fx-4.5.1pre30.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

This next iteration implements the license page:

• implemented Youtube links
• implemented license page
• fixed layout errors with flex separators
• svg for variables category tab
• added events for Default Template Behavior radiobuttons

smartTemplate-fx-4.5.1pre32.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Next iteration, which fixes a lot of problems with accounts page. Also its now compatible with Thunderbird 128. so it's ready for the next ESR! Thankfully we do not need to split / branch the code this time around, so the version will remain backwards compatible with 115. - So far I only tested in 127.0b4 though!

• removed remaining inline events and wired up via script
• refactored for easier comparison of html vs xhtml settings scripts
• started development on support page (WIP)
• removed bottom navigation from the online examples page (we are now using a querystring parameter to tell the page that we are not a web browser but reading it from a settings window - previous versions only used a media query based on width, which of course cannot work in this case)
• recolored svg icons for theming. I decided to do the "dark theme" switch within the svg files, as external variables and rules are being ignored. My guess is that this is because the svg files are loaded as background images via URLs. So we have to determine the colors of both bright and dark stroke and fill colors within the svg files. Not quite as themeable as I would have liked but it should work in the majority of themes... this item took over 2 days of trying stuff!
• responsive layout: improved sizing of template boxes
• implemented template (?) help links "showStationeryePage"
• improved 'use common' placeholder description. I added a string for the "common" page and hid the checkbox there to make it easier to understand
• implemented settings page selection via background paage
• integrated new settings screen into license check + variables menu item; also expanded behavior to open correct pages when clicking status icon. This behavior is all contingent on the config setting extensions.smartTemplate4.settings.html = true - my plan is to default this to trueonce we have reached 100% functionality.
• added explanation text for "use common"
• implemented disabling / hiding account settings depending on "Use Common"
• fixed account selector to support pop3; these items were simply missing in previous versions.
• greatly improved the layout of variables content, including behavior of the accordion headings:

Here is the new version:

smartTemplate-fx-4.6pre50.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

More final layout improvement . I decided to use monochrome icons for the tabs that switch between compose cases. Also Implemented the tabs that switch between file templates (to do: implement the actual file list)

smartTemplate-fx-4.6pre55.zip

Also looks pretty useful with very small screen area now:

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Latest version, with the following changes within the new settings tab:

File Templates

• reading template menus from file via experiment
• made thunderbird compose action svgs theme aware
• added a menu item to open legacy preferences
• added logic for editing category + description
• started working on drag+drop in listbox
• completed sorting file template items via dragging
• Added (test) button to update data in the back-end
• implemented file template toolbar buttons (Update, Remove, Up, Down, Edit)
• added Refresh UI button to copy file template menus to back end
• tweaked length of snippets list
• Added template file picker support (goes via experiment)
• Added experimental code drag+drop for files (incomplete)
• Implemented [Add] button to - to do: insert new item at current position, not at end of list!

Miscellaneus

• implemented selectDefaultTemplates()

Additionally I found and fixed another incompatibility issue #295 which affects multiple of my Add-ons (file picker)

• fix fallout from [bug 1882701] - nsIFilePicker.init() parameter

smartTemplate-fx-4.6pre60.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Latest version, including the following changes within the new settings tab:

• open settings with correct parameters (licenseKey, compose case etc)
• stay on correct compose Type when selecting different account
• make new vs old settings switch consistent across whole UI (to do: Full test)
• hid some advanced settings (font size, variables toolbutton, hide examples tab)
• fixed layout of legacy settings menu item
• prepare for events onCodeWord (copy to clipboard?)
• various improvements for responsiveness in small window sizes
• fixed scrolling behavior when clicking variable headings
• removed vertical scrollbars when unnecessary
• fixed selectDefaultTemplates()
• added listener for events from help iFrame (st-help.js) WIP

smartTemplate-fx-4.6pre65.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Close to final version below. This one includes the following changes:

• implemented creating support mail
• open correct page in existing settings tab
• moved template areas in account to top of quotes
• refresh UI after all file template modifications (moving / creating / updating entries) (test on snippets menu!)
• collate refresh to max once per 2 seconds to minimize wasting performance
• dedicated list header
• added labels to template file doc buttons

smartTemplate-fx-4.6pre71.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Next step to completion - added the code for saving / loading the selected account template:

smartTemplate-fx-4.6pre75.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)

[RealRaven2000]

Completed a few open items:

• store template / quote textareas
• added translations for file and account templates
• made new settings dialog version default
• added a test menu item for opening legacy settings

smartTemplate-fx-4.6pre76.zip

---

To try the version above download zip file and drag the file into Thunderbird Add-ons Manager (do not extract contents, it won't install like that)