Project

General

Profile

Feature #9385

Bug #7552: Firefox extension to automatically verify the ISO checksum

Feature #8566: Web prototype of "download and verify" page

CSS for "download and verify" page

Added by sajolida over 4 years ago. Updated over 3 years ago.

Status:
Resolved
Priority:
Elevated
Assignee:
-
Category:
Installation
Target version:
Start date:
05/12/2015
Due date:
% Done:

30%

Feature Branch:
web/10631-DAVE-CSS
Type of work:
Website
Blueprint:
Starter:
Affected tool:
ISO Verification Extension

download-and-install-wip.png View (258 KB) tchou, 09/02/2015 07:57 AM

smaller progress indicators.png View (17.3 KB) sajolida, 12/17/2015 08:58 AM

0001-fixed-width-of-the-header-element-for-langs-with-lon.patch View (788 Bytes) sajolida, 12/18/2015 02:05 PM

css error after.png View (48.7 KB) sajolida, 01/21/2016 08:30 PM

css error before.png View (51.1 KB) sajolida, 01/21/2016 08:30 PM


Related issues

Related to Tails - Feature #10631: Improve Download and verify (DAVE) - html/css only Resolved 11/24/2015
Blocked by Tails - Feature #9384: Draft markdown and HTML for "download and verify" page Resolved 05/12/2015

History

#1 Updated by sajolida over 4 years ago

  • Category set to Installation

#2 Updated by sajolida over 4 years ago

  • Blocked by Feature #9384: Draft markdown and HTML for "download and verify" page added

#3 Updated by BitingBird about 4 years ago

  • Target version changed from Tails_1.4.1 to Tails_1.5

#4 Updated by tchou about 4 years ago

  • Target version changed from Tails_1.5 to Tails_1.6

#5 Updated by tchou about 4 years ago

Work in progress on https://git-tails.immerda.ch/tchou/tails/log/?h=9384

Still stuffs to do. For example have clear indications for maone about what is visible or not depending on steps (I think we miss a couple of states).

#6 Updated by tchou about 4 years ago

I tried to figure out all the steps in a kind of "programmatic" way with the slides (https://labs.riseup.net/code/attachments/download/921/extension-20150828.fodg) to help me to see if states where missing (and it was). I updated my repo with some extra html (https://git-tails.immerda.ch/tchou/tails/log/?h=9384).

Here are my notes. I need to review it myself after a night before it's really ready for Q/A.
(removed my past notes to make this page lighter)

#7 Updated by tchou almost 4 years ago

  • Assignee changed from tchou to sajolida
  • QA Check set to Ready for QA

It's ready for Q/A.
Some questions in my notes.


If we detect an unsupported browser - slide 1
---------------------------------------------

    #undetected-browser .hidden
    #unsupported-browser .visible
    #supported-browser .hidden

    #i_have_iso .visible

    #download .hidden
    #verify .hidden

If we fail to detect the browser - slide 2
------------------------------------------

    #undetected-browser .visible
    #unsupported-browser .hidden
    #supported-browser .hidden

    #i_have_iso .visible

    #download .hidden
    #verify .hidden

    if click on "I'm already in Firefox or Tor Broswer" 
    - show/hide other elements ?
    - link to an other html page section ?
    - what happend if there is no JS ? Do we need some <noscript> somewhere ? what can the extension  handle (may guess is that it's working well)

If we detect a supported browser - slide 3
-------------------------------------------
    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .hidden    
        #update .hidden
        #install .visible
            install-button .visible
            install-text .hidden
        #bittorrent-minor .visible

    #i_have_iso .visible

    #download .hidden
    #verify .hidden

If we detect a previously installed extension - slide 4
-------------------------------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .visible
            #use-text .hidden    
        #update .hidden  
        #install .hidden
        #bittorrent-minor .visible

    #i_have_iso .visible

    #download .hidden
    #verify .hidden

    - for this case, I'm wondering if we should skip it and move direct to the #download section (slide 9) and assume that if the user has the extension, he will not use bittorent or have a ISO image
    (maybe we want he uses the extension)

If we detect an outdated installed extension - no slide
-------------------------------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .hidden    
        #update .visible
            #update-button .visible
            #update-text .hidden   
        #install .hidden     
        #bittorrent-minor .visible

    #i_have_iso .visible

    #download .hidden
    #verify .hidden

if extension is installed and the user want to use it - slide 9
---------------------------------------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden

        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .visible
            #download-button-state .hidden
        #download-text .hidden
        #download-message .hidden

    #verify .visible .opacity
        #verify-text-calculating .hidden
        #verify-text-state .hidden
        #verify-text-success .hidden
        #verify-text-failure .hidden
        #verify-text-failure-again .hidden

    - I think we will not use "update-text" and "install-text" (so we could remove it from the html) as far as what is important that we want to use it, so only have the "use-text", or maybe a specific label ("firefox extension").

    - we need a #verify .visible with an .opacity class

during the download - slide 11
-------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden     
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .hidden
        #download-text .visible
        #download-message .hidden

    #verify .visible .opacity
        #verify-text-calculating .hidden
        #verify-text-state .hidden
        #verify-text-success .hidden
        #verify-text-failure .hidden
        #verify-text-failure-again .hidden

The download is in pause - no slide
-----------------------------------
new state : the download is in pause

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden     
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .visible
            #download-button-state .visible
                #download-button-state-retry .hidden
                #download-button-state-resume .visible
        #download-text .hidden
        #download-message .visible
            #download-message-paused .visible
            #download-message-failed .hidden

    #verify .hidden

download failed - slide 12
-------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden     
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .visible
            #download-button-state .visible
                #download-button-state-retry .hidden
                #download-button-state-resume .visible
        #download-text .hidden
        #download-message .visible
            #download-message-paused .hidden
            #download-message-failed .visible

    #verify .visible
        #verify-text .hidden
        #verify-text-success .hidden
        #verify-text-failure .visible
        #verify-text-failure-again .hidden

while verifying - slide 13
--------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .hidden
        #download-text .visible
            #download-eta .hidden
            #download-progress .hidden
            #download-text-state . visible
                #download-text-pause .hidden
                #download-text-done .visible
        #download-message .hidden

    #verify .visible
        #verify-text .visible
            #verify-text-state-calculating .visible
            #verify-text-state-done .hidden
            #verify-text-state-failed .hidden
        #verify-text-success .hidden
        #verify-text-failure .hidden
        #verify-text-failure-again .hidden

verifying succed - slide 14
---------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .hidden
        #download-text .visible
            #download-eta .hidden
            #download-progress .hidden
            #download-text-state . visible
                #download-text-pause .hidden
                #download-text-done .visible
        #download-message .hidden

    #verify .visible
        #verify-text .visible
            #verify-text-state-calculating .hidden
            #verify-text-state-done .visible
            #verify-text-state-failed .hidden
        #verify-text-success .visible
        #verify-text-failure .hidden
        #verify-text-failure-again .hidden

if the download fail - slide 15
-------------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .visible
            #download-button-state .visible
                #download-button-state-retry .visible
                #download-button-state-resume .hidden
        #download-text .hidden
        #download-message .hidden

    #verify .visible
        #verify-text .visible
            #verify-text-state-calculating .hidden
            #verify-text-state-done .hidden
            #verify-text-state-failed .visible
        #verify-text-success .hidden
        #verify-text-failure .visible
        #verify-text-failure-again .hidden

if the download failed 2 times - slide 16
-----------------------------------------

    #undetected-browser .hidden
    #unsupported-browser .hidden
    #supported-browser .visible
        #use .visible 
            #use-button .hidden
            #use-text .visible   
        #update .hidden
        #install .hidden 
        #bittorrent-minor .hidden

    #i_have_iso .hidden

    #download .visible
        #download-button .hidden
        #download-text .visible
            #download-eta .hidden
            #download-progress .hidden
            #download-path .hidden
            #download-text-state .visible
                #download-text-pause .hidden
                #download-text-done .hidden
                #download-text-failed .visible
        #download-message .hidden

    #verify .visible
        #verify-text .visible
            #verify-text-state-calculating .hidden
            #verify-text-state-done .hidden
            #verify-text-state-failed .visible
        #verify-text-success .hidden
        #verify-text-failure .hidden
        #verify-text-failure-again .visible

css
===
    This king of things (but proabably it will be some javascript fonction).

    .visible {
        display:block;
        }

    .hidden {
        dislay: none;
        }

    .opacity {
        opacity:0.5;
    }

It' more about html rather than css, but I prefered stay on this ticket.
My repo is updated with extra divs.

#8 Updated by sajolida almost 4 years ago

  • Priority changed from Normal to Elevated
  • Target version changed from Tails_1.6 to Tails_1.7

Postponing and so raising priority.

#9 Updated by BitingBird almost 4 years ago

  • Status changed from Confirmed to In Progress

#10 Updated by sajolida almost 4 years ago

  • Assignee changed from sajolida to tchou
  • QA Check changed from Ready for QA to Info Needed

Cool you're finally working on this.

But to avoid going into the kind of misunderstanding that we had on #9313, can you please clarify what is ready for review: the code prototype, the color code, the style, the pictos, the code style?

Also, on your branch 9384 I cannot find the code that created all this. Maybe you forgot to push. Please also set the "Feature branch" of Redmine to the name of your branch.

#11 Updated by tchou almost 4 years ago

  • Feature Branch set to web/9385-download-and-verify-css

#12 Updated by tchou almost 4 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Info Needed to Ready for QA

You wan have a look to:
- the html structure with bootstrap native classes
- all possible steps inside the extension (see #6 and #7)
- the questions inside the notes

You don't need to look to the css, it's juste some markup for readability.

#13 Updated by tchou almost 4 years ago

Note that I did a branch from my bootsrap branch so you can have a look to the global structure.

#14 Updated by tchou almost 4 years ago

I updated the code because of https://labs.riseup.net/code/issues/9717
As well, I updated this note https://labs.riseup.net/code/issues/9385#note-7

#15 Updated by sajolida almost 4 years ago

  • Assignee changed from sajolida to tchou
  • QA Check changed from Ready for QA to Dev Needed

Thanks for the branch.

First, a few comments on the Git methodology:

  • The proposed final location of this page, as embedded in the code
    itself if /download. I think I already pointed that out to you in a
    previous review. Moving files around breaks the Git history and make
    things harder to review and analyse later.
  • In the particular case of this file, we'll have to inline this same
    content in the specific download pages from each scenario, so this
    content will very likely end up in an inline and then added to each
    of /download and /install/linux/usb/download for example. Let's do
    that now and decide to move this into /download.inline.mdwn.
  • In the first commit of your branch (b495fe7) you're importing a
    version of the code that already has many modifications from the one
    in the blueprint. This makes it very hard to review. The better way
    of starting your branch would have been to copy the content of the
    blueprint into /download.inline.mdwn and then replay manually your
    changes one by one on top of that. In the current state of things,
    with no Git history and no explanation for your changes my review
    work is much more painful than what it should be. When we review
    things, we actually mostly review the changes made to the previous
    code. In that process we need to be able to clearly see which
    changes have been made and the commit messages are here to explain
    these changes (instead of having to figure out why they
    happened). Otherwise, we have to review and analyse from scratch
    every time.

So here is what I propose you. This time I won't ask you to do this
incremental manual work again now that you started a new branch but
please at least:

  • Move your file to /download.inline.mdwn which should be its final
    destination.
  • Check manually the diff between
    /blueprint/bootstrapping/extension/prototype.mdwn and
    /install/download-and-verify.mdwn. For example, you can use
    vimdiff. I had to do that myself to be able to analyse your work.
  • Make sure that all this diff is as small and as clean as
    possible. That all differences in there make sense (most of them do
    already) and provide explanation for the ones that are not obvious,
    let's say, anything that not simply adding Bootstrap classes or
    copying string from the wireframe.

For example, to get you started:

  • What's the use of the big <div id="download-and-verify">? If we
    need special styling for this page we can put that in download.css
    as you did already.
  • Use indentation consistenly. intrigeri proposed 2 spaces and gave
    good reasons against tabs. I know there are tabs already in the code
    of the website but I haven't introduced new ones in years.
  • Explain the changes you introduced between lines 101 and 107 119
    which are mixing up changes to the HTML, Bootstrap, and wireframe.

Other than that, most of the changes you did to add native Bootstrap
classes look fine and I'm glad you found a few typo in the original
HTML code!

Regarding your questions in #9385#note-7

if click on "I'm already in Firefox or Tor Broswer"
- show/hide other elements ?
- link to an other html page section ?
- what happend if there is no JS ? Do we need some <noscript> somewhere ? what can the extension
handle (may guess is that it's working well)

This part is the section that we be visible if there is no JS. So we
should assume we have no JS here and that we can't hide and show
stuff. We could point to a different page with some CSS tricks to show
different sections by default but then we need one of this such pages
for each scenario, etc. and that sounds painful.

Maybe instead we can have the button "I'm already in Firefox or Tor
Browser" install the extension. Then the code of the extension would
move on to the actual download. Maybe we need to rephrase that button
a bit to make it clear that it's installing something. Maybe adding
"Install" in a class="label" would be enough. Let's also keep in
mind that this code path will mostly likely happen to people who are
used to having troubles browsing the web without JS.

What do you think?

#16 Updated by tchou almost 4 years ago

  • QA Check changed from Dev Needed to Info Needed
  • Move your file to /download.inline.mdwn which should be its final
    destination.

I moved it to wiki/src/download.inline.mdwn because you used a /.
But maybe you mean wiki/src/install/download.inline.mdwn.

For example, to get you started:

  • What's the use of the big <div id="download-and-verify">? If we
    need special styling for this page we can put that in download.css
    as you did already.

I don't know if I used it for css (I'm not familiar with per/file css file, especialy with ikiwiki inclusions) or thinking about JS to be shure to trigger the right #id with its big parent. I removed it.

  • Use indentation consistenly. intrigeri proposed 2 spaces and gave
    good reasons against tabs. I know there are tabs already in the code
    of the website but I haven't introduced new ones in years.

Note the I commited 4 days ago, and Intrigeri talk about the 2 spaces 3 days ago.
This file is now not supposed to hava any tabs left.

  • Explain the changes you introduced between lines 101 and 107 119
    which are mixing up changes to the HTML, Bootstrap, and wireframe.

- At the beginning of the file, I changed p to code, because it seems it's more usal to do this for copy and past.

- I added 240 Ko/s - 360,7/ because in chrome and firefox it's this kind of information that is displayed.

- I added a progress bar according to the slide 11

<div id="download-progress" class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
      45%
    </div>
</div>

- I added some ids to trigger some states

<span id ="download-text-done" class="label label-success state">Done</span>
<span id ="download-text-failed" class="label label-warning state">Failed</span>

- I added a download-button-state-resume resume state because we have a resume in slide 12 (from ticket #9717)

- I added a download-message section to display messages according to #9717 and the "pause" scenario.

<div id="download-message">
  <div id="download-message-paused">
    <p>The download as been paused. Click "resume" to go on.</p>
  </div>
  <div id="download-message-failed">
    <p>The download of the ISO image failed! Please check your network connection and try to resume...</p>
  </div>
</div>

Regarding your questions in #9385#note-7

if click on "I'm already in Firefox or Tor Broswer"
- show/hide other elements ?
- link to an other html page section ?
- what happend if there is no JS ? Do we need some <noscript> somewhere ? what can the extension

What do you think?

I will have a look later.

#17 Updated by tchou almost 4 years ago

  • Assignee changed from tchou to sajolida
  • Target version changed from Tails_1.7 to Tails_1.8
  • QA Check changed from Info Needed to Ready for QA

I assigne you, for the first points.

#18 Updated by tchou almost 4 years ago

tchou wrote:

  • Move your file to /download.inline.mdwn which should be its final
    destination.

I moved it to wiki/src/download.inline.mdwn because you used a /.
But maybe you mean wiki/src/install/download.inline.mdwn.

For example, to get you started:

  • What's the use of the big <div id="download-and-verify">? If we
    need special styling for this page we can put that in download.css
    as you did already.

I don't know if I used it for css (I'm not familiar with per/file css file, especialy with ikiwiki inclusions) or thinking about JS to be shure to trigger the right #id with its big parent. I removed it.

maone use the <div id="download-and-verify">, so I revert this change in 159f5ccf35ab1f0a0daed611080018cf96f2b0a3.

#19 Updated by sajolida almost 4 years ago

I moved it to wiki/src/download.inline.mdwn because you used a /.
But maybe you mean wiki/src/install/download.inline.mdwn.

That's indeed what I proposed, so the inline lies next to the canonical
https://tails.boum.org/download/. Thanks for doing it.

  • Use indentation consistenly. intrigeri proposed 2 spaces and gave
    good reasons against tabs. I know there are tabs already in the code
    of the website but I haven't introduced new ones in years.

Note the I commited 4 days ago, and Intrigeri talk about the 2 spaces 3 days ago.
This file is now not supposed to hava any tabs left.

I'm glad we settled on 2 spaces. I still had to fix a "few" indentation
issues with 93df423. Not fun :(

- At the beginning of the file, I changed p to code, because it seems it's more usal to do this for copy and past.

Good.

- I added 240 Ko/s - 360,7/ because in chrome and firefox it's this kind of information that is displayed.

I think this is problematic, and for several reasons:

  • From a methodology point of view as I said earlier already, please in
    the future refrain yourself from changing the design while implementing
    it. It makes it hard for me to identify these changes and give my
    opinion. I know that I do that myself in some rare occasions but, when I
    do, I separate it clearly in one atomic commit and ask your opinion
    explicitly.
  • From a technical point of view, how is this value calculated? It would
    have to be calculated by the extension itself. But this was not in the
    wireframe we gave to Giorgio so that would be unexpected extra work for
    him. Did you ask him whether he's all-right with this change?
  • From a design point of view, I'm not sure that's useful information as
    we already have an ETA ("10 minutes left") which would be updated as the
    download goes faster or slower.

So please remove this from your CSS implementation and start the
discussion in a dedicated thread or ticket.

- I added a progress bar according to the slide 11

> <div id="download-progress" class="progress">
>   <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
>     <span class="sr-only">45% Complete</span>
>       45%
>     </div>
> </div>
> 

Good.

- I added some ids to trigger some states

> <span id ="download-text-done" class="label label-success state">Done</span>
> <span id ="download-text-failed" class="label label-warning state">Failed</span>
> 

Good.

- I added a download-button-state-resume resume state because we have a resume in slide 12 (from ticket #9717)

Good.

- I added a download-message section to display messages according to #9717 and the "pause" scenario.

> <div id="download-message">
>   <div id="download-message-paused">
>     <p>The download as been paused. Click "resume" to go on.</p>
>   </div>
>   <div id="download-message-failed">
>     <p>The download of the ISO image failed! Please check your network connection and try to resume...</p>
>   </div>
> </div>
> 

Here changing the design while implementing as well by adding a new
message "The download as been paused. Click "resume" to go on." which
was not on the wireframe. I personally don't think it's needed.

Also, <span id="download-text-pause">Pause</span> has no label, is
that one purpose?

#20 Updated by sajolida almost 4 years ago

maone use the <div id="download-and-verify">, so I revert this change in 159f5ccf35ab1f0a0daed611080018cf96f2b0a3.

Ok. In the future, please try to put this kind of useful information in
the commit message itself as it, in general, makes our code easier to
analyze in the future, and thus easier to maintain.

#21 Updated by sajolida almost 4 years ago

  • Assignee changed from sajolida to tchou
  • QA Check changed from Ready for QA to Dev Needed

Also, I pushed my changes on origin/web/9385-download-and-verify-css so make sure to fetch and merge this before working again on your code.

#22 Updated by sajolida almost 4 years ago

After some more work by tchou on this branch we merged it into web/assistant.

We now have a basic CSS and bootstrap styling so we can test this new download page with the extension. Still, it will need more styling once we can test it so I'm leaving this ticket open.

#23 Updated by sajolida almost 4 years ago

  • Subject changed from Draft CSS for "download and verify" page to CSS for "download and verify" page

#24 Updated by sajolida almost 4 years ago

Now that we apply dave.css to all instructions, #pagebody a[href^="http"] { background: transparent none repeat scroll 0% 0%; } from dave.css hides background images on all external links. This is inconsistent with the rest of the documentation.

#25 Updated by tchou almost 4 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Dev Needed to Info Needed

I feel that you did the change for a[href^="http"] to make it specific for the extension, am I wrong ?

#26 Updated by sajolida almost 4 years ago

  • Assignee changed from sajolida to tchou

Which change I did are your referring to? If I do git grep a[href^="http"] I find it in two places:

  • in local.css and dates from d6d65f67 (2011-04-08)
  • in install/inc/stylesheets/dave.css and dates from 16b09da (2015-11-19) by you

I need more info to understand what you are referring to...

#27 Updated by tchou almost 4 years ago

  • QA Check changed from Info Needed to Pass

done in 41e8a001344999af00a65fade9bbbdfdc2c35fd7 in web/10623-css-improvements

#28 Updated by tchou almost 4 years ago

  • Assignee changed from tchou to sajolida

#29 Updated by sajolida almost 4 years ago

  • Assignee changed from sajolida to tchou
  • Target version changed from Tails_1.8 to Tails_2.0
  • QA Check changed from Pass to Info Needed

I'm not sure to understand the meaning you put behind your last to changes to this ticket that put it as "Ready QA: Pass", and assigned to me.

First of all, this work was originally on your plate, so you shouldn't be the one to mark it as "Pass".

Second, I had the feeling that during the sprint we were working on a "good enough" version of the CSS of DAVE that could lead us to the UX tests, but not more. From the results of the tests we created #10631 which is about functional aspects on the CSS.

Still, I'm not sure we reached a mature CSS in terms of aesthetics or polishing, removing glitches, etc. or at least I never did a full review of your work in this sense.

So I'd like you to clarify whether you consider that these non-functional aspects of the CSS are all ready for QA. Then I'll do a proper review.

#30 Updated by tchou almost 4 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Info Needed to Ready for QA

You're right: it should have been a "ready for q/a", but I think that somewhere in my mind, this issue had to be closed after your pass, and the remaining css issues treated in other tickets (like #9915) and new ones. But it's up to you.

#31 Updated by sajolida almost 4 years ago

Understood your fix of the #pagebody a[href^="http"] issue in web/10623-css-improvements and I'm fine with it.

Then regarding, non-functional CSS improvements I propose:

  • Display future steps in advance. See wireframe slide 9.
    For the record, the reference wireframe is here: https://labs.riseup.net/code/attachments/download/921/extension-20150828.fodg.
  • Display icon instead of "Done", like in wireframe.
  • Display icon instead of "Pause", like in wireframe.
  • Remove "Paused" label, like in wireframe.
  • Replace the "Resume" button with a "play" icon. Then the
    "Cancel" button could be a smaller link below it. We didn't have
    any "Cancel" button on the wireframe, so this needs adjustement.
  • Remove the sentence "The download has been paused. Click
    "resume" to go on.". The download only gets paused
    through an action by the user so they're already aware of this and our "pause" and "play" buttons should be simple and good enough to work even for people not reading this.
  • Use smaller font for progress indicators (speed, MiB, etc.). Maybe 65% and aligned to the left. See attachment.
  • Replace the "Download again" button with a link. It should be less proheminent and probably before the trophy.

#32 Updated by sajolida almost 4 years ago

Someone also reported ""Downloading to $PATH" doesn't fit horizontally, and (then?) the progress bar doesn't either. I have a very wide screen."

#34 Updated by tchou over 3 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Dev Needed to Ready for QA
  • Display icon instead of "Done", like in wireframe.

OK.

  • Display icon instead of "Pause", like in wireframe.

OK.

  • Remove "Paused" label, like in wireframe.

OK.

  • Replace the "Resume" button with a "play" icon. Then the

OK.

"Cancel" button could be a smaller link below it. We didn't have
any "Cancel" button on the wireframe, so this needs adjustement.

Now there is a little cancel button, but I suggest to merge the "download again" and "cancel" button with as behavior to "reset" DAVE aka go back on the first step "install/use/update vs bittorent".

  • Remove the sentence "The download has been paused. Click
    "resume" to go on.". The download only gets paused
    through an action by the user so they're already aware of this and our "pause" and "play" buttons should be simple and good enough to work even for people not reading this.

As far as I understand https://labs.riseup.net/code/issues/9717#note-13, when the download is interupted, "You've got one (aka pause) or the other (aka resume) depending whether the download is actually resumable or not ". So I think we need both. I rewrote the message to hanled the both possible state of the pause message. (in 2eb3c7c76100064314c8f67fae33e6048255a9ac)

  • Use smaller font for progress indicators (speed, MiB, etc.). Maybe 65% and aligned to the left. See attachment.

OK.

  • Replace the "Download again" button with a link. It should be less proheminent and probably before the trophy.

OK. But like saif above I suggest to have an always visble "cancel/restart/reset" button. (I don't kown with wich name).

+ I suggest to have a troubleshoting section, always visible, saying that if there is a problem mabe the user can enable/disable the add-on.

#35 Updated by tchou over 3 years ago

sajolida wrote:

Someone also reported ""Downloading to $PATH" doesn't fit horizontally, and (then?) the progress bar doesn't either. I have a very wide screen."

Must be fixed too (with an overflow: auto and a static width)

#36 Updated by tchou over 3 years ago

sajolida wrote:

This ticket should also address https://mailman.boum.org/pipermail/tails-l10n/2015-December/003104.html. Patch in attachment.

I just discovered that the patch was also send with the mail here https://mailman.boum.org//pipermail/tails-l10n/attachments/20151209/36242f38/attachment.bin

I'll try to merge it later.

#37 Updated by sajolida over 3 years ago

  • Assignee changed from sajolida to tchou
  • QA Check changed from Ready for QA to Dev Needed

I started reviewing this but quickly saw that you had committed badly
resolved conflicts in assistant.css. See `git show eed4b91`. Can you
solve this and also merge origin/web/10631-DAVE-CSS so we're on the
same page and I'm sure to review what you intended to summit?

#38 Updated by tchou over 3 years ago

  • Feature Branch changed from web/9385-download-and-verify-css to web/10631-DAVE-CS

#39 Updated by tchou over 3 years ago

  • Feature Branch changed from web/10631-DAVE-CS to web/10631-DAVE-CSS

#40 Updated by tchou over 3 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Dev Needed to Ready for QA

#41 Updated by sajolida over 3 years ago

  • Assignee changed from sajolida to tchou
  • QA Check changed from Ready for QA to Dev Needed

Some comments for the whole branch, I'm not differentiating tickets:

  • In e6510e9 you're mentioning accessibility issues. I propose to
    add alt="" with the previous label to the [[!img you're introducing?
  • I'm afraid of the inconsistent use of semi-colons in
    dave.css. Sometimes we have one before }, sometimes we have one
    after }, sometimes we have none. Are you sure this is interpreted
    always the same on every browser? If so, then why use them
    inconsistently? If not, then maybe this requires comments. See
    e75f57d for a recent example of missing semi-colon in .css that breaks
    stuff.
  • Add the authors of the icons you're using in /doc/about/license.
  • Why are you using empty class attributes in several places? For
    example in 2da84ae.
  • Why not put check.png in green? and maybe failed.png in dark red.
  • Why have very different sizes for check.png (46x37) and failed.png
    (84x84). Do you think that the "failed" information needs more
    weigh than the "checked" information? Personally I don't.
  • You didn't comment on my note on the animation from #10631#note-22.
  • I'm fine with merging the "Cancel" and "Download again" button.
  • Regarding 2eb3c7c, the full quote of Giorgio finished with "I might
    have found a work-around -- stay tuned" so I'm not convinced we need to be that verbose. But right now it's still not
    clear to me what happens in Tails when the network connection is
    lost and reestablished. Giorgio said the download should start again
    automatically but it's not what I get, see #10954. I'm not sure
    what happens outside of Tails. Does it go into failed? Anyway, I'd
    like to clarify all this before deciding a final phrasing.

#42 Updated by sajolida over 3 years ago

  • Related to Feature #10631: Improve Download and verify (DAVE) - html/css only added

#43 Updated by tchou over 3 years ago

sajolida wrote:

Some comments for the whole branch, I'm not differentiating tickets:

  • In e6510e9 you're mentioning accessibility issues. I propose to
    add alt="" with the previous label to the [[!img you're introducing?

done.

  • I'm afraid of the inconsistent use of semi-colons in
    dave.css. Sometimes we have one before }, sometimes we have one
    after }, sometimes we have none. Are you sure this is interpreted
    always the same on every browser? If so, then why use them
    inconsistently? If not, then maybe this requires comments. See
    e75f57d for a recent example of missing semi-colon in .css that breaks
    stuff.

AFAIK, we shoud not have semicolons after }, except when it's an @import. I fixed that.

The last semicolon in a declaration is facultative (but it's more or less a good practice to leave it, you can have a look there https://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block)

  • Add the authors of the icons you're using in /doc/about/license.

done.

  • Why are you using empty class attributes in several places? For
    example in 2da84ae.

While I'm not shure the work is finished, I leave it, so it's faster to add one (especialy in the FF F12)

  • Why not put check.png in green? and maybe failed.png in dark red.

Because it was black in the mockup. Feel free to change it if you want.

  • Why have very different sizes for check.png (46x37) and failed.png
    (84x84). Do you think that the "failed" information needs more
    weigh than the "checked" information? Personally I don't.

I usaly use SVG so I don't I don't pay attention to the file size.
I fix it with css depending of the layout.
Maybe the failed icon is not currently used and tested (only when verification failure, and I don't know how to test it. I gonna have a look to DAVE, maybe there some decicated data-xxx)

Yes, I'll do.

  • I'm fine with merging the "Cancel" and "Download again" button.

I created a ticket to work on it: #10966

  • Regarding 2eb3c7c, the full quote of Giorgio finished with "I might
    have found a work-around -- stay tuned" so I'm not convinced we need to be that verbose. But right now it's still not
    clear to me what happens in Tails when the network connection is
    lost and reestablished. Giorgio said the download should start again
    automatically but it's not what I get, see #10954. I'm not sure
    what happens outside of Tails. Does it go into failed? Anyway, I'd
    like to clarify all this before deciding a final phrasing.

- What I understand :
- there is two differents states when a download is interrupted (resumable or failed)
- this behavior is not working inside Tails and he is about making a work-around
- I don't remember that the dowlowd was supposed to restart/resume automatically, but it's a good way to do it (with a Tails iso, chrome does it, FF fail).
- If the connection is lost it goes in data-state="pause" or data-state="failed" state.

#44 Updated by tchou over 3 years ago

  • Assignee changed from tchou to sajolida
  • QA Check changed from Dev Needed to Info Needed

Sajolida and Giorgio, do you know how to test the verification failure ?

#45 Updated by sajolida over 3 years ago

I added a bunch of stuff on top of your branch with debc781..ba5331b
and merged it on the website because otherwise I couldn't test what it
was doing for real. So you should review this carefully and tell me if
we should revert anything from this.

Still, I think this is good enough for now so I'm closing this ticket. Congrats! I created #10981 to follow up on minor alignment issues and I'm not closing #10631 as it's waiting for info from Giorgio.

For the rest, I'll comment on all the concerns about this branch here as #10631. Yeah, our tickets and branches are a bit messy but, oh well...

  • I tried again to see the CSS animation thing work on Tor Browser and
    failed. They work on https://daneden.github.io/animate.css/ but not
    your "Please wait..." on Tor Browser. The Tor Browser design
    document mentions privacy issues with CSS:
    https://www.torproject.org/projects/torbrowser/design/. It doesn't
    make much sense to me in this case I reckon but honestly I don't want to
    dive into this any further, unless you tell me that your code works
    for you on Tor Browser. I was anyway still not convinced by
    copy-pasting thousands of lines of code to create a simple CSS
    animation. So I replaced it with an animated PNG, see 81fb3c7. I
    tried using an animated SVG from loading.io which would be smoother and inserted it through CSS but
    the animation was not working. If we feel the need again for such
    things in the future, I'll reconsider importing such a library (with
    CSS import). Feel free to submit a better animated GIF or whatever and I'll merge it.
  • I created #10980 to credit more icons as we're missing many from
    the overview and infography.
  • I removed some extra semi-colons in a7707d8 after spending 30
    minutes debugging some weird CSS behavior. Cleaning code is serious
    business, man! See attachments. Feel free to further clean the CSS console as it might save you some more headaches in the future.
  • I fixed a bad CSS attribute in d970ecf please check the possible
    consequences.

Also available in: Atom PDF