Various Improvements

[gildas-lormeau]

          **Just feedback, read only if you have time: Not the important**

1- by default the infobar icon, would be flashing for 3-5 seconds (switch between yellow and gray) and settles on Gray at the end to attract user attention.

Reason for the suggestion:
When a file is shared, or when the user open the file in far future they will notice the infobar icon. I have a concern that I would forget about it and it is hard to notice. Maybe it is just me.

However, I would advise against this IF you think the code which result in flashing the infobar icon might break in future browsers when the file is opened. The idea of Singlefile is to save an archival version of the file for digital preservation, in my humble STOOPID opinion, thus avoiding things that might cause issues.

unrelated suggestions:
2- The time/date variables are too limited, not fully customizable, if it is customizable then I am too stoopid to figure it out:

• I prefer how it is on Windows and AutoHotkey. they use a code/variable that looks like this: hh:mmttd/M/yyyy
  With that format the leading zero for month and day is removed and can be added by just adding another m/d. Additionally, the tt adds the PM/AM and I can control which character I can put between each variable like / . \ -_ ; : and to have the hours in 24H format I you can capitalize it HH

Windows/Autohotkey style is easier for not so technical users like me.

3- in the infobar I wanted to add Notes, saved date, and page title, I used the code below:

Page title: {page-title} \n Saved on: Wed Jul 10 2024 01:14:48 GMT+0200 (Central European Summer Time) \n \n Notes:

but it is hard to add notes, so I suggest the window for infobar contect would be multiple lines and accept new line by pressing enter to add notes in several lines.

4- Addition of a variable to add a link to SingleFile project in infobar and the version it was saved with.
The Reason for this suggestion: It will help promote SingleFile, and also, have a record of which version of SingleFile was used to save the webpage.

5- Lastly, if Template of the infobar content left empty, it will save in this format
Wed Jul 10 2024 01:14:48 GMT+0200 (Central European Summer Time)
I tried my best, but I couldn't replicate it, I wanted to add,
GMT+0200 (Central European Summer Time)
And
Wed
Jul
but I couldn't find any variable, I would appreciate it if you would tell me how to add the date in this format: 01:14:48AM 10/07/2024 GMT+0200 (Central European Summer Time) and in this format yyyy.mm.dd.hh.mmtt

Thank you for your hard work.

Originally posted by @StoopidoMan in #1469 (comment)

[gildas-lormeau]

1 and 3 will be implemented in the version 1.22.52.

[StoopidoMan]

@gildas-lormeau Please, When the update is released post a comment, so I could test it

[gildas-lormeau]

@StoopidoMan I've just uploaded on the stores the version 1.22.53. It fixes some issues with the icon flashing (compared to the version 1.22.52). I also added a template function %datetime-custom which should meet your requirements hopefully. It's not the same API than the one you suggested, but it is based on a quite powerful standard API (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat). This new version should be available for download in the coming 24 hours in Chrome and Safari, and maybe this week in Firefox (it depends on the manual review by Mozilla).

[gildas-lormeau]

For the record. Here is an example in the zip file of saved page with the infobar and its flashing icon.

Example Domain (23_07_2024 15_46_48).html.zip

[gildas-lormeau]

Only 4 is not implemented (yet). Making the version available as a variable requires some work because this code resides in the project single-file-core which is not aware of the existence of the extension (and its version). I will add the variable with the URL of the project soon.

[StoopidoMan]

sorry for the late response, I am in pain, physically.

1- The info bar:
Sadly for me it doesn't capture my attention, and if I was not aware of SingleFile I would probably not notice the infobar.
The idea is that when the file is sent to someone who is not aware of SingleFile the infobar flashing would capture their attention.

I am not sure what to suggest because this kind of things requires a brainstorming session in a meeting. I will try to share some points:

• there is for sure a standard or rule of thumb that UI designer follows,.
• I personally noticed UI designer use a more faster paced flashing.
• I also notice several effects used by UI designers to attract user attention to UI elements (usually buttons), like :
  • I remember seeing this being utilized in some software; Where the "button" start as a 50% transparent big button in the middle of the window and then it resize & move to it's position. but that means complicated HTML code, maybe, I am not a coder.
  • wiggling or bouncing or pulsating in size (getting bigger and then smaller) for 5 seconds or so.
  • link as you read in this page it could be annoying and distracting, specially if it was aggressive and fast.
  • link This is my favorite solution!! If it had that water-ripple effect for 10 seconds, it would be great. Also, I think you should try to keep the same ripple effect speed because it is not distracting as it is slow and smooth and if it last for 5 or so seconds, I think it will attract the user attention and not annoy them.
  • The duration is important because too long might be distracting, and too short will not attract the user attention. And it is hard to figure out without experimenting, so I suggest trying different settings. Also when you open the page look forward to the middle of the screen and see if your peripheral vision can detect the infobar because peripheral vision detect motion. lastly, I think you could keep it for 10 seconds because it is slow ripple effect so it is not annoying. the only way to know is to experiment.
  • link
  • changing the infobar icon from grey to yellow could be another solution without flashing.
  • Another solution is to flash for 5 seconds instead of just two flashes and then every 10 seconds it would flash twice
  • Or flashing twice every 5 seconds.
  • I am no UI expert, I just know that the current way, doesn't work.

3- in the infobar I wanted to add Notes, saved date, and page title, I used the code below:

• the infobar content popup window still doesn't allow to add a new line by pressing enter key, when I press enter it takes me to the next step:

I suggested adding a multi line field because a single short field limits me from adding comments/notes comfortably so a bigger field or expandable field would be great specially if adding new line by pressing enter is supported.

• %datetime-custom :
  • I am sorry, but I couldn't understand it, I just didn't grasp how it works, I checked SingleFile help section about %datetime-custom and checked the Mozilla article but as someone with no programming knowledge this is too complicated, maybe it is just me, but I think most users will have trouble utilizing this feature.
  • I tried to test it by using this code:
    %datetime-custom<en-GB|numeric|numeric|numeric|long|long|long|long|true|GMT|3|Long|Short|lookup> But I got an empty field when I saved a page.
    your example code kinda worked:
    %datetime-custom<en-US|numeric| |numeric| |numeric>.
    I got this result:
    2024 (day: 27), 19
    I also think you can't change the order (Day month year.)
  • So I will suggest something else: If it is possible to get the OS (Windows in my case) date/time format including the GMT time zone then that might be a better solution because in windows I already sat how I like the long and short date format to be and I think most user do that as well. But it will sacrifice customizability maybe some users don't want to add the same format as in their OS.

I am sorry.

[gildas-lormeau]

@StoopidoMan Just a quick answer about the infobar, I'll come back to the other points later. I've added an option Infobar > keep infobar open. The feature will be available in the next version. I think this will best answer the problem.

Here's an example in the ZIP file: Example Domain (30_07_2024 00_18_13).html.zip

By the way, I haven't had time to test this yet, but the "delay" values passed as %datetime-custom parameters must be in lowercase (e.g. short, long). Generally speaking, all values are case sensitive. You can also use the function multiple times to change the order.

[StoopidoMan]

@gildas-lormeau

Infobar > keep infobar open

I agree that is a very good idea, however I like to suggest some improvement:

1- With the original model, if you click somewhere random the infobar collapse to an infobar-icon, check the video below:

Firefox.Cuwpmakzsq.mp4

but this didn't happen with the html file sample you provided. I think the old way will satisfy the need of more users and it is more user friendly. Additionally, if possible to collapse the infobar to inforbar-icon on scroll would also be a good feature, so if the user click somewhere on the page or scroll the infobar would collapse to the infobar-icon.

2- I think adding a "minimize" or "collapse infobar" button similar to how the minimize button works in Windows OS will help the user experience.
The reason for my suggestion: if I sent the html file to a not so tech-savvy user they will immediately see the minimize button and click it as it is intuitive to most. in my opinion.

3- Changing the color of open source URL icon to a standard blue links color, and would change to a standard purple link when already visited, would be more noticeable as a button than just being gray:

did a quick google search and found these two links for your convenience:
https://en.wikipedia.org/wiki/Help:Link_color
https://stackoverflow.com/questions/4774022/whats-default-html-css-link-color

An answer from stackoverflow.com
:link { color: #0000EE; } :visited { color: #551A8B; } :link:active, :visited:active { color: #FF0000; }

4- Moving the close, minimize, and open source URL buttons to the top part of the infobar: The reason for this suggestion is because I have a disability and for me when UI elements are not separated with UI dividers it somehow gets mixed up... It is hard to explain.
check this link: https://app.uxcel.com/courses/ui-components-best-practices/basics-676

Here is a rough example of what I mean (I am no graphic designer)

5- You could aslo add a 5 second timer and after that the infobar would collapse to infobar-icon, when opening the html file .

6- adding "Saved with SingleFile Vx.x" as a title of the infobar and when clicked on "Saved with SingleFile Vx.x" it would take you to a simple page with links to all major browsers extension market place and Github.
The reason for this suggestion: A) The version of Singlefile matters because not all version save the webpage in the same matter. B) it helps promote the project when the file is shared C) the person who recieves the .html file will know that the infobar is not part of the webpage and I believe if this is added then keep infobar open should be the default option. Also you can temporarily just add "Saved with SingleFile"

7- about %datetime-custom it really is beyond my comprehension, I really REALY want to add custom date in file name and custom date with GMT value in infobar content like 2024.07.30@10:55:53 PM GMT+0200 (Central European Summer Time)

Thank you for your hard work. and sorry if I was stoopid