Tails

#1 Updated by sajolida 2015-05-12 15:17:27

• Category set to Installation

#2 Updated by sajolida 2015-05-12 15:26:05

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

#3 Updated by BitingBird 2015-07-01 11:52:21

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

#4 Updated by tchou 2015-08-06 01:38:56

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

#5 Updated by tchou 2015-09-02 08:04:49

• File download-and-install-wip.png added
• % Done changed from 0 to 30

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).

#7 Updated by tchou 2015-09-19 00:44:07

• 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 2015-09-21 10:28:47

• 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 2015-09-22 15:35:53

• Status changed from Confirmed to In Progress

#10 Updated by sajolida 2015-09-23 08:47:54

• 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 Feature #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 2015-10-27 08:58:05

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

#12 Updated by tchou 2015-10-27 09:05:48

• 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.

#15 Updated by sajolida 2015-11-02 11:20:25

• 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 Feature #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

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 2015-11-04 08:47:04

• 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 Feature #9717)

- I added a download-message section to display messages according to Feature #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 Feature #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

>
> What do you think?

I will have a look later.

#17 Updated by tchou 2015-11-04 14:06:25

• 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.

#21 Updated by sajolida 2015-11-07 07:31:50

• 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.

#23 Updated by sajolida 2015-11-23 08:48:25

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

#25 Updated by tchou 2015-12-12 12:13:26

• 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 2015-12-15 04:53:53

• 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 2015-12-15 07:07:31

• QA Check changed from Info Needed to Pass

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

#28 Updated by tchou 2015-12-15 07:07:42

• Assignee changed from tchou to sajolida

#29 Updated by sajolida 2015-12-16 10:03:52

• 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 Feature #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 2015-12-16 10:18:50

• 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 Feature #9915) and new ones. But it’s up to you.

#31 Updated by sajolida 2015-12-17 08:59:32

• File smaller progress indicators.png added
• Assignee changed from sajolida to tchou
• QA Check changed from Ready for QA to Dev Needed

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: /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.

#33 Updated by sajolida 2015-12-18 14:05:39

• File 0001-fixed-width-of-the-header-element-for-langs-with-lon.patch added

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

#34 Updated by tchou 2016-01-13 14:17:43

• 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.

#37 Updated by sajolida 2016-01-15 14:14:57

• 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 2016-01-15 15:18:25

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

#39 Updated by tchou 2016-01-15 15:20:17

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

#40 Updated by tchou 2016-01-15 16:00:34

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

#41 Updated by sajolida 2016-01-16 20:29:45

• 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 Feature #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 Bug #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 2016-01-16 20:29:46

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

#44 Updated by tchou 2016-01-18 15:16:21

• 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 2016-01-21 20:32:02

• File css error after.png added
• File css error before.png added
• Status changed from In Progress to Resolved
• Assignee deleted (sajolida)
• QA Check deleted (Info Needed)

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 Bug #10981 to follow up on minor alignment issues and I’m not closing Feature #10631 as it’s waiting for info from Giorgio.

For the rest, I’ll comment on all the concerns about this branch here as Feature #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 Bug #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.