Project

General

Profile

Feature #14921

Bug #12328: Tails Verification: Migrate DAVE to Web Extensions and support Chrome

Improve the CSS of the new download page

Added by sajolida 8 months ago. Updated 7 months ago.

Status:
Resolved
Priority:
Normal
Assignee:
-
Category:
Installation
Target version:
Start date:
11/04/2017
Due date:
% Done:

0%

QA Check:
Feature Branch:
web/14921-download-css
Type of work:
Website
Blueprint:
Starter:
Affected tool:
Installation Assistant

Description

  • Text on top of [X] button in OpenPGP toogle, see #14630#note-16.
  • When I installed the extension, the "Verify" button becomes visible. But IMO one can easily miss this modification. Would it be possible to make it more visible? Either by using another colour or by making this button bigger or animate the background colour or something similar?

chrome_win1.png View (84.5 KB) cbrownstein, 12/02/2017 08:08 AM

chrome_win2.png View (87.6 KB) cbrownstein, 12/02/2017 08:08 AM

firefox_win1.png View (82.7 KB) cbrownstein, 12/02/2017 08:08 AM

firefox_win2.png View (88.5 KB) cbrownstein, 12/02/2017 08:08 AM

openpgp_dialog_X.png View (87.4 KB) cbrownstein, 12/02/2017 08:08 AM


Related issues

Related to Tails - Bug #10909: Toggle are displayed by default when JavaScript is disabled In Progress 01/12/2016

History

#1 Updated by sajolida 8 months ago

  • Target version changed from Tails_3.3 to Tails_3.5

#2 Updated by sajolida 8 months ago

  • Description updated (diff)

#3 Updated by sajolida 8 months ago

  • Description updated (diff)

#4 Updated by cbrownstein 8 months ago

  • Status changed from Confirmed to In Progress
  • Assignee changed from sajolida to cbrownstein

I'm going to take care of the screenshot issue pointed out in #14630#note-21 by spriver.

#5 Updated by sajolida 8 months ago

  • QA Check set to Ready for QA
  • Feature Branch set to web/14921-download-css

I think this is ready. I'm super happy!

#6 Updated by cbrownstein 8 months ago

I'll update this ticket as I notice issues, rather than list all of the issues in a single note.

First issue that I'm noticing: In website/install/win.en.html and all of the similar pages, e.g., website/install/debian/usb-overview.en.html

"Let's Go!" is not centered in the button like it is at
https://tails.boum.org/install/win/usb/overview/index.en.html

#7 Updated by sajolida 8 months ago

Cody: when do you think you'll be done with this review?

intrigeri will have another look at Uzair's work this week-end and we might very well release right after that.

I think it would also be fine to release even if your review is not 100% done, but then I'll want to know whether you think that the big picture is correct and that there is no very big mistake that should block a release.

(And please give this ticket more priority than #14977.)

#8 Updated by cbrownstein 8 months ago

Please see the attached screenshots. The problem in the "win" screenshots is present when JavaScript is disabled.

With respect to the "openpgp_dialog_X" screenshot: When JavaScript is disabled and the "X" is clicked, the dialog snaps to the top of the window. I don't know if this is expected behavior. If not, is it possible to remove the "X" since it's nonfunctional anyway?

The "You seem to have JavaScript disabled..." screenshot assumes that the user is blocking JavaScript with the NoScript extension. This might not accurate. The user can block JavaScript by other means. (I'm cognizant of the fact that it's impossible to anticipate all the ways the user can block JavaScript.)

Also, I made 2 commits in my branch. I'm not sure if you want to use them.

https://github.com/cbrownstein/tails/tree/web/14921-download-css

Other than the above issues, I'm not noticing anything else at the moment.

#9 Updated by sajolida 8 months ago

  • Related to Bug #10909: Toggle are displayed by default when JavaScript is disabled added

#10 Updated by sajolida 8 months ago

File chrome_win1.png added
File chrome_win2.png added
File firefox_win1.png added
File firefox_win2.png added
File openpgp_dialog_X.png added
Assignee changed from cbrownstein to sajolida
QA Check changed from Ready for QA to Dev Needed

Please see the attached screenshots. The problem in the "win" screenshots is present when JavaScript is disabled.

Yeap. That's #10909 and it's been the case since we have these download
instructions. This should have solved #10909 years ago but that work
never got properly finished.

The good news is that I managed to do something smarter this time for
the new download page (toggle are hidden when JavaScript is disabled) so
we should reuse the same technique elsewhere now (and maybe push it
upstream to ikiwiki).

We could do that during our sprint for example as we'll be working on
very related things.

With respect to the "openpgp_dialog_X" screenshot: When JavaScript is disabled and the "X" is clicked, the dialog snaps to the top of the window. I don't know if this is expected behavior. If not, is it possible to remove the "X" since it's nonfunctional anyway?

Right, the [X] should be removed when JavaScript is disabled. I took
note of this in #10909#note-16 since it's a related issue (toggle
working badly without JavaScript).

The "You seem to have JavaScript disabled..." screenshot assumes that the user is blocking JavaScript with the NoScript extension. This might not accurate. The user can block JavaScript by other means. (I'm cognizant of the fact that it's impossible to anticipate all the ways the user can block JavaScript.)

Like you said people can deactivate JavaScript in many different ways so
we can't give precise instructions for all of them. My guess was that
the most frequent use case in our context will be people in Tor Browser
(for example with the security slider on High) and that's what I documented.

People who do things differently are likely to be tech-savvy enough to
know by themselves how to enable JavaScript on one page. If you have no
JavaScript at all you're probably used to seeing broken websites and
having to tweak your settings.

Also, I made 2 commits in my branch. I'm not sure if you want to use them.

I merged them, thanks!

We don't update the notification_in_tails.png screenshot every time
because it's not worth it but it's good to refresh it from time to time
and here we also changed from i386 to amd64 in the file name.

https://github.com/cbrownstein/tails/tree/web/14921-download-css

Other than the above issues, I'm not noticing anything else at the moment.

\o/

#11 Updated by sajolida 8 months ago

  • QA Check changed from Dev Needed to Pass

Then this ticket is "Ready for QA: Pass" now I think → \o/

#12 Updated by sajolida 7 months ago

  • Status changed from In Progress to Resolved
  • Assignee deleted (sajolida)
  • QA Check deleted (Pass)

Also available in: Atom PDF