Feature #10631

Improve Download and verify (DAVE) - html/css only

Added by tchou 2015-11-24 02:14:54 . Updated 2016-01-24 15:51:49 .

Status:
Resolved
Priority:
Elevated
Assignee:
Category:
Target version:
Start date:
2015-11-24
Due date:
% Done:

0%

Feature Branch:
web/10631-DAVE-CSS
Type of work:
Website
Blueprint:

Starter:
Affected tool:
ISO Verification Extension
Deliverable for:

Description

- Keep displaying more info about verification after success [24] [25]
— [Ready for Q/A : sajolida]- “Checksum verified!”
— [Ready for Q/A : sajolida] - Display in black

- Format steps as 1, 2, 3 [Ready for Q/A : sajolida]

- Change behavior of Next button [Waiting info : sajolida]

- Display download path after verfication
— Take more vertical space when page is loading [Ready for Q/A : sajolida]
— Add wheel while loading [became a message with animation / Ready for Q/A : sajolida]

- Maybe use data-phase="init" to hide/show some “hold on” feedback, see Feature #10678#note-6


Files


Subtasks


Related issues

Related to Tails - Feature #9385: CSS for "download and verify" page Resolved 2015-05-12
Related to Tails - Feature #10676: #bittorrent-minor should also be visible below "Use Firefox extension" Resolved 2015-11-27
Related to Tails - Bug #10680: #verify-text-label should be visible once #download is visible Resolved 2015-11-27

History

#1 Updated by sajolida 2015-11-24 02:44:55

#2 Updated by sajolida 2015-12-07 10:36:07

When reloading the page after installing DAVE I get a weird state, see screenshot in attachment.

#3 Updated by sajolida 2015-12-11 04:36:22

  • Description updated

Add suggesting from Giorgio, see Feature #10678#note-6.

#4 Updated by tchou 2015-12-12 07:25:48

  • Description updated

#5 Updated by tchou 2015-12-12 11:35:45

  • Assignee changed from tchou to ma1
  • QA Check set to Info Needed

> Keep displaying more info about verification after success [24] [25]
> “Checksum verified!”
I think that he thophy above is enough.

> Display in black
OK. Done with f9a4e6eec7844669e70a8e8f78baf938239725db

> Format steps as 1, 2, 3
OK. Done in 0269f3ded819afe0039a72147bc9c85092fc71ae

> Change behavior of Next button
As far as I understand, we need to make html link to have HTML classic anchors (according to https://ikiwiki.info/ikiwiki/wikilink/discussion/). sajolida are you OK with that ?

> Display download path after verfication
We have it while it’s downloading but not after.
I think that it’s in download-page.js

for(let el of $$('.download-path')) el.textContent = "???";


but I don’t want to touch this file.
maone, can you have a look ? I will do the css after if it’s needed.

> Take more vertical space when page is loading
> Add wheel while loading

The #download-and-verify is display:none by default and is displayed only when everything is loaded I think. The probleme is that depending of the connection it can be 10 seconds or never append.

I succed to reproduce in local this delay thanks to chromium trottling feature, but did not find any workaround to display something only while loading. Maone is there a way to make it work earlier or add a class to #download-and-verify or a div while it’s loading ? (the “init” phase is done by the extension). Maybe just to display the #download-and-verify by default ?

> 2 dave.css

There is two 2 dave.css

- Our here: https://tails.boum.org/install/inc/stylesheets/dave.css (304 lines)
- Maone’s once the extension is installed (171 lines) with I think:

document.querySelector('link[rel="stylesheet"][href$="dave.css"]').href = "https://maone.net/dev/tails/dave.css"; // DEV

There is probably some good reasons, but in the dev mode, I can not:

- install the extension localy (so I play with f12 to modify styles on the production version)
- see what is the current state of master online (while the maone one is replacing it)

Maybe there is an easy way to test and work, I’m waiting for advises (currently with FF I add a new stylesheet in the style editor and paste dave.css)

#6 Updated by sajolida 2015-12-15 04:48:22

  • Priority changed from Normal to Elevated
  • Target version changed from Tails_1.8 to Tails_2.0

This won’t be solved today, so postponing and raising priority.

#7 Updated by ma1 2015-12-15 05:12:25

tchou wrote:

>
> > Display download path after verfication
> We have it while it’s downloading but not after.
> I think that it’s in download-page.js
> […]

During download any element with class “download-path” is filled with the choosen path.
During verification, any element with class “verify-file-path” is filled with the path of the file being verified.
Just have such elements (even multiple ones) wherever you please and you’re done.

>
>
> > Take more vertical space when page is loading
> > Add wheel while loading
>
> The #download-and-verify is display:none by default and is displayed only when everything is loaded I think. The probleme is that depending of the connection it can be 10 seconds or never append.
>
> I succed to reproduce in local this delay thanks to chromium trottling feature, but did not find any workaround to display something only while loading. Maone is there a way to make it work earlier or add a class to #download-and-verify or a div while it’s loading ? (the “init” phase is done by the extension). Maybe just to display the #download-and-verify by default ?

Knowning that on the root element (

, most likely) the extension sets a data-phase=“init” attribute very early, then after your 10 seconds or so as soon (as soon as the descriptor has been fetched) it changes to “ready”, you can setup the CSS accordingly:

#wheel { display: none }
[data-phase=“init”] #wheel { display: block }

>
>
> > 2 dave.css
>
> There is two 2 dave.css
> - Our here: https://tails.boum.org/install/inc/stylesheets/dave.css (304 lines)
> - Maone’s once the extension is installed (171 lines) with I think:
> […]
>
> There is probably some good reasons, but in the dev mode, I can not:
> - install the extension localy (so I play with f12 to modify styles on the production version)
> - see what is the current state of master online (while the maone one is replacing it)
>
> Maybe there is an easy way to test and work, I’m waiting for advises (currently with FF I add a new stylesheet in the style editor and paste dave.css)

The dave.css from maone.net is used if and only if the extensions’ version number is higher than the number inside the page’s #extension-version element, i.e. if I’m using an extension newer than the one supported by the page.
Therefore if you just match current version (0.2.6.9 ATM) you’ll be able to use your own CSS.

#8 Updated by tchou 2015-12-15 05:35:17

> > I succed to reproduce in local this delay thanks to chromium trottling feature, but did not find any workaround to display something only while loading. Maone is there a way to make it work earlier or add a class to #download-and-verify or a div while it’s loading ? (the “init” phase is done by the extension). Maybe just to display the #download-and-verify by default ?
>
> Knowning that on the root element (

, most likely) the extension sets a data-phase=“init” attribute very early, then after your 10 seconds or so as soon (as soon as the descriptor has been fetched) it changes to “ready”, you can setup the CSS accordingly:

Maybe I miss something, but the main use case is a user that has not the extension installed.

#9 Updated by ma1 2015-12-15 10:59:25

tchou wrote:
> > > Maone is there a way to make it work earlier or add a class to #download-and-verify or a div while it’s loading ? (the “init” phase is done by the extension). Maybe just to display the #download-and-verify by default ?
> Maybe I miss something, but the main use case is a user that has not the extension installed.

Maybe you could just put a