Hi Uzair,
This time I'm putting in copy tails-dev@??? which is our
development mailing, instead of tails-ux@, because we're entering the
realm of code and implementation. anonym is subscribed to this list so
there's no need to put him in explicit copy anymore.
So I'm done with a first HTML prototype of the new download page. You
can see it here:
https://tails.boum.org/install/download_2/
The code is in our main Git repository:
https://git-tails.immerda.ch/tails/
And the most relevant files are:
HTML:
https://git-tails.immerda.ch/tails/tree/wiki/src/install/inc/steps/download_2.inline.html
CSS:
https://git-tails.immerda.ch/tails/tree/wiki/src/install/inc/stylesheets/dave_2.css
JavaScript:
https://git-tails.immerda.ch/tails/tree/wiki/src/install/inc/js/dave_2.js
In the current version of the verification extension, the logic behind
the moving parts on the page is mostly taken care of by CSS selectors
(for example, #download[data-state="pause"]) and the extension itself.
But here I started writing some JavaScript to handle the interactions
that couldn't take place in the extension (because it might not be
installed already) and in the end I thought that maybe the whole logic
behind the moving parts could be handled this way (and this makes the
CSS *much* easier to understand). But I don't know if doing things this
way will work for you...
I'm really not used to writing JavaScript like this or organizing code
between a page, a script, and an extension so I'd highly appreciate
comments and guidance on whether I went in the right directions or
should do things differently.
For example, I supposed that it will be possible for your extension to
rely on some calls to some functions in the script dealing with the
logic between the moving parts (for example 'showVerificationResult').
I thought that this would help us decouple what's shipped in the
extension from the content and interactions on the page.
In my JS I also simulated the work of the extension. You'll see that
with the XXX comments in dave_2.js.
Also, the prototype is far from being complete but I thought that it was
ready enough for you to start commenting on it and doing your coding
work. For example, I'm still missing:
- To integrate the browser detection code (from dave.js).
- To make all the graphical elements look better. So far I focused on
the HTML structure and the interactions but not the look.
If you want to build a local version of the website as part of your work
and need guidance on how to do that, I can help you out.
Tell me if you need anything!
