Convert options dialog to pure HTML #236

RealRaven2000 · 2022-02-01T17:34:14Z

Convert the QuickFolders Preferences dialog to html. This is a big chunk of work, @jobisoft is helping with this.
Dedicated branch for this work:

https://github.com/RealRaven2000/QuickFolders/tree/ESR91-options-html

RealRaven2000 · 2022-02-01T17:38:28Z

Changes so far:

QuickFolders Options conversion project

<label  />
==> 
<label  for="idOfElement"> </label>

<button />  
==>
<button>

https://www.w3schools.com/howto/howto_js_tabs.asp

label make closing tabs and replace values

30/11/2021
Completed conversion for remaining parts of options.html -
buttons and checkbox labels, i18n, de-chrome (most) icon paths

Pattern:

 <checkbox /> <label value="__myText__"/>
 ==> 
 <label> <input type="checkbox" >__myText__</label>

Next Steps: reference conversion, replace native icons.

Can icons from Thunderbird still be accessed by a html page? or do we need to supply copied versions...

roll out all data-pref- changes to all elements.

support or convert !!!

Radiogroups wired up!

<fieldset orient="horizontal">  - changed to class=hbox.
<separator> to <span class="separator">

Support for collapsed attribute:

*[collapsed=true] {
  display: none !important;
}

Added a class for buttons with icons and tabs in order to add icons (behave like list icons):

button[isTab], button.iconButton {
  display: list-item;
  list-style-position: inside;
}

Added test config option to suppress xul options dialog (general debug mode must also be enabled):
extensions.quickfolders.debug.suppressXULoptions

support for sliding alert (accessibility for blind people)

TO DO:

wiring up events:

[ ] Version number - open version history

Bling / Layout

initBling( ) function.

Themes dropdown
all number inputs
color pickers

Quick Help - open homepage

Support tab:

YouTube channel
bug report (open a new mail to support)
localization link

License tab:

Save Configuration / Load Configuration
Advanced Search settings (opens new window)

Miscellaneous

reuse existing options window, is this possible?
wire up color pickers: at the moment there are no bound prefs - use a background notification for this?
convert palette dropdowns to <option> elements
white fill color for selected tab.
-moz-image-region = seems to be without alternative. (see paste button for license)

RealRaven2000 · 2022-02-14T23:42:39Z

14/02/2022 - Done today:

Bling / Layout

rewrote initBling( ) and many functions specific to the options screen in a mx-compatible way. I decided to recreated modules with similar / same name space that can exist and be called from a HTML window - see new files:

options-ui.js - QuickFolders.Options
options-preferences.js - QuickFolders.Preferences
options-util.js - QuickFolders.Util
options-interface.js - QuickFolders.Interface (this will likely have to be broken up into multiple files, as the original is 7068 lines long!)

all these have to be sanitized and any references to Services, Cc, Ci and Cu removed. Functionality will be gradually introduced as needed by the options dialog and implented in a more wx-compatible way.

fixed Themes dropdowns
fixed color pickers - these should now work both on Windows & Mac from the new options.html

Combined 2 listeners for notifyTools (from legacy code) and windows message listener (from html windows / API code)
into a single handler - this was done with @jobisoft's help on the Add-on developers call. Test version coming soon!

RealRaven2000 · 2022-02-15T22:10:42Z

A lot more work was done in today's commit to make a lot of the choices for changes in UI instantly visible:

added command handlers for checkboxes, most dropdowns and buttons (WIP)
palettes and toolbar background can now be selected correctly
added right-click handlers for hidden settings (about:config)
Added theme support through the tag
<meta name="color-scheme" content="dark light">
using a global listener in quickfolders-tablistener for "unique" commands that should only be executed once (by one of the main windows)
for testing I added a separate menu item to open the classic (xhtml) settings separately this is both for comparison and to set change settings that are not yet supported by the html version:

the global listener should also handle the backup / restore routines as these cannot be done with conventional script / web APIs.

RealRaven2000 · 2022-02-15T22:14:54Z

15/02/2022
Here is a test version, which may already be valuable to Mac users to be able to set colors:

QuickFolders-mx-5.9pre37.zip

To install, download the zip file and then drag it into Thunderbird Add-ons manager (don't unpack contents).
For the classic settings use the separate entry on the tools menu (see screenshot in previous comment)

RealRaven2000 · 2022-02-16T18:23:00Z

RealRaven2000 · 2022-02-17T13:33:09Z

17/02/2022 - 5.9pre39

fixed layout of [Buy License] button
implemented opening license dialog from buy / update license button
fixed icon in License Tab (green pro icon, when paid)
implemented [Defaults] button for tab radius
implemented [contact me...] button: this requires "compose" permission!
implemented [Advanced search settings...] button => convert quickmove.xhtml to html next!!
fixed [buy license] button must open license dialog (still xhtml)
fixed close button of "current folder bar" (fill-opacity)

Test Version:

QuickFolders-mx-5.9pre39.zip

To install, download the zip file and then drag it into Thunderbird Add-ons manager (don't unpack contents).
For the classic settings use the separate entry on the tools menu (see screenshot in previous comment)

To do next:

Backup / Restore Configuration
Copy / Paste Folder String
[Default Colors] button
color dropdowns for preview tabs
fix "transparent" checkbox

RealRaven2000 · 2022-02-17T16:55:38Z

17/02/2022 - 5.9pre42

fixed 2 broken links on support tab.
fixed preview of shadow
fixed transparent toolbar checkbox

QuickFolders-mx-5.9pre42.zip

To install, download the zip file and then drag it into Thunderbird Add-ons manager (don't unpack contents).
For the classic settings use the separate entry on the tools menu (see screenshot in previous comment)

To do next:

Backup / Restore Configuration + fix icons on buttons
Copy / Paste Folder String
Implement [Default Colors] button
color dropdowns for preview tabs
inject heading image from theme?
layout: make dialog less wide and safe vertical space
if dialog is put to back of window, make sure it is reused / brought to foreground if possible
version number should open history

RealRaven2000 · 2022-02-18T11:38:47Z

18/02/2022 - 5.9pre43

implemented version number opening history
improved flex layouts + unified font sizes

QuickFolders-mx-5.9pre43.zip

To install, download the zip file and then drag it into Thunderbird Add-ons manager (don't unpack contents).
To use the old settings dialogs you can use the separate entry on the tools menu:

To do:

Backup / Restore Configuration + fix icons on buttons
Copy / Paste Folder String
Implement [Default Colors] button
color dropdowns for preview tabs
inject heading image from theme?
if dialog is put to back of window, make sure it is reused / brought to foreground if possible

RealRaven2000 · 2022-02-19T19:06:17Z

19/02/2022 - 5.9pre46

implemented color dropdown selection panel

QuickFolders-mx-5.9pre46.zip

To install, download the zip file and then drag it into Thunderbird Add-ons manager (don't unpack contents).
For the classic settings use the separate entry on the tools menu (see screenshot in previous comment)

to do:

move color dropdown closer to the clicked preview tab.
maybe close colors panel automatically when the user clicks outside (not sure whether possible). Or add a close button.
Copy / Paste Folder String
[Default Colors] button
inject heading image from theme?
If dialog is put to back of window, make sure it is reused / brought to foreground if possible
Backup / Restore Configuration

Some of the remaining items are quite hard to implement (especially backup / restore with a possibility of rollback)

RealRaven2000 · 2022-02-21T18:04:46Z

20/02/2022 - 5.9pre49

moved color dropdown closer to the clicked preview tab.
[Default Colors] button
colors panel closes automatically when the user clicks outside (in bling my tabs area only)

QuickFolders-mx-5.9pre49.zip

to do:

Copy / Paste Folder String
inject heading image from theme?
If dialog is put to back of window, make sure it is reused / brought to foreground if possible
Backup / Restore Configuration

RealRaven2000 · 2022-03-15T19:47:41Z

15/03/2022

Merged in changes from ESR 91 head issues When Adding a category to a tab, another category may be replaced #232 / issue Quickjump fails when TB folders are in 'Unread Compact' mode #235 / issue quickMove - with duplicated folder name, repeat to last folder may end up in wrong path #241 / issue Using = key for folders from recent quickMove / quickJump operations (not all recent folders) #242
Fixed Copy / Paste Folder String
reusing dialog when it is open

QuickFolders-mx-5.9pre60.zip

left to do:

Backup / Restore Configuration

RealRaven2000 · 2022-04-02T10:40:13Z

Implemented in 5.9, released on 30/03/2022

RealRaven2000 added the mx conversion label Feb 1, 2022

RealRaven2000 self-assigned this Feb 1, 2022

RealRaven2000 mentioned this issue Mar 4, 2022

Windows 10, Thunderbird 91.4.1 (x64): 'native tabs' illegible when not using the Thunderbird 'light theme' #231

Open

RealRaven2000 closed this as completed Apr 2, 2022

RealRaven2000 mentioned this issue Oct 10, 2023

Convert Settings screen to HTML, and move to Tab RealRaven2000/SmartTemplates#259

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert options dialog to pure HTML #236

Convert options dialog to pure HTML #236

RealRaven2000 commented Feb 1, 2022

RealRaven2000 commented Feb 1, 2022 •

edited

Loading

RealRaven2000 commented Feb 14, 2022 •

edited

Loading

RealRaven2000 commented Feb 15, 2022 •

edited

Loading

RealRaven2000 commented Feb 15, 2022 •

edited

Loading

RealRaven2000 commented Feb 16, 2022 •

edited

Loading

RealRaven2000 commented Feb 17, 2022 •

edited

Loading

RealRaven2000 commented Feb 17, 2022 •

edited

Loading

RealRaven2000 commented Feb 18, 2022

RealRaven2000 commented Feb 19, 2022 •

edited

Loading

RealRaven2000 commented Feb 21, 2022

RealRaven2000 commented Mar 15, 2022

RealRaven2000 commented Apr 2, 2022

Convert options dialog to pure HTML #236

Convert options dialog to pure HTML #236

Comments

RealRaven2000 commented Feb 1, 2022

RealRaven2000 commented Feb 1, 2022 • edited Loading

QuickFolders Options conversion project

[ ] Version number - open version history

Bling / Layout

Quick Help - open homepage

Support tab:

License tab:

Miscellaneous

RealRaven2000 commented Feb 14, 2022 • edited Loading

RealRaven2000 commented Feb 15, 2022 • edited Loading

RealRaven2000 commented Feb 15, 2022 • edited Loading

RealRaven2000 commented Feb 16, 2022 • edited Loading

RealRaven2000 commented Feb 17, 2022 • edited Loading

RealRaven2000 commented Feb 17, 2022 • edited Loading

RealRaven2000 commented Feb 18, 2022

RealRaven2000 commented Feb 19, 2022 • edited Loading

RealRaven2000 commented Feb 21, 2022

RealRaven2000 commented Mar 15, 2022

RealRaven2000 commented Apr 2, 2022

RealRaven2000 commented Feb 1, 2022 •

edited

Loading

RealRaven2000 commented Feb 14, 2022 •

edited

Loading

RealRaven2000 commented Feb 15, 2022 •

edited

Loading

RealRaven2000 commented Feb 15, 2022 •

edited

Loading

RealRaven2000 commented Feb 16, 2022 •

edited

Loading

RealRaven2000 commented Feb 17, 2022 •

edited

Loading

RealRaven2000 commented Feb 17, 2022 •

edited

Loading

RealRaven2000 commented Feb 19, 2022 •

edited

Loading