redesigned welcome page

[tarcieri]

I've integrated the redesign of the welcome page I did using Twitter Bootstrap and it's actually mostly usable now. I submitted a pull request on Github here:

​https://github.com/warner/tahoe-lafs/pull/5

There's still some work to be done to get all of the links working, and the Open URI box needs to be wired up, but the overall majority of the work is done and I think it's looking a lot nicer than the old version.

Here's an earlier work-in-progress screenshot. The version I'm submitting looks even nicer, IMO:

​http://i.imgur.com/ftZ8W.png

[tarcieri]

Screenshot of the actual version in the pull request available here:

​http://i.imgur.com/tf1iJ.png

[jg71]

I like it :thumbs-up:

[davidsarah]

I like the general layout. The file upload and directory creation functions seem to be behind links when they were previously on the welcome page. I know they were a bit ugly, but there's enough room for them and perhaps we can make them less ugly.

(I changed the ticket summary because it's not really relevant that the prototype was done using Twitter Bootstrap.)

[tarcieri]

Yeah, treat anything you see as a concept that's easily changed. You can add another "well" in the Bootstrap terminology which contains the file upload form.

One of the nice things about Bootstrap is that it's extremely well documented, so getting all of the original features back and working again should be something anyone should be able to pull off, and if you use Bootstrap's idioms the visual design should end up looking pretty nice as well:

​http://twitter.github.com/bootstrap/scaffolding.html ​http://twitter.github.com/bootstrap/components.html

If no one will volunteer to do the rest of the work to get this all of the way there I can finish it up, but I was hoping someone would like it enough to get whatever remains to be done finished for me ;)

[davidsarah]

New pull request from tarcieri: ​https://github.com/tahoe-lafs/tahoe-lafs/pull/19

[tarcieri]

I redesigned the sidebar as follows:

​http://i.imgur.com/1Epjv.png

I've also deleted all the script tags on the page as there were concerns about them (there was at least one script loading from a third party domain)

There's a couple concerns left:

1) There's a single test failure in test_web.py line 3087, in _after_get_welcome_page probably due to the altered markup

2) davidsarah noted that the file download input boxes aren't labeled properly more and look confusing

[warner]

Looks awesome! I'm going to one last review pass and get this landed on trunk, where it will be included in 1.10.

[amiller]

I gave this interface a whirl and immediately learned about new features (like the timeline!) that I hadn't used before. And all the functionality I'm used to from the front-page is still intact. So +1 I really like this update and look forward to its integration, and also (additionally, not as a prerequisite) to this style being applied to the rest of the WUI pages.

[davidsarah]

I'm currently rebasing this and fixing tests.

[davidsarah]

​https://github.com/tahoe-lafs/tahoe-lafs/commits/1713-bootstrapped-welcome-page

Please test for usability and regressions!

This adds back the Report Incident form, avoiding a regression pointed out by warner. It also removes the PNG icon files and bootstrap-responsive.css, which were unused, and it renames static/css/tahoe.css to new-tahoe.css to avoid confusion with the existing static/tahoe.css. (We may merge them at some point though.)

[davidsarah]

Also see #1931 for possible aesthetic improvements (as opposed to functionality).

[davidsarah]

The following CSS warnings are reported by Firefox 17:

Error in parsing value for 'background-image'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2203
Expected color but found 'top'.  Error in parsing value for 'background-image'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2204
Error in parsing value for 'filter'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2206
Expected end of value but found '	'.  Error in parsing value for 'background-color'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2220
Expected declaration but found '*'.  Skipped to next declaration. @ http://127.0.0.1:3456/css/bootstrap.css:2249
Unknown property '-moz-border-radius'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2307
Unknown property '-moz-border-radius-topleft'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2313
Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2316
Unknown property '-moz-border-radius-topright'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2322
Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2325
Unknown property '-moz-box-shadow'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2360
Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'.  Ruleset ignored due to bad selector. @ http://127.0.0.1:3456/css/bootstrap.css:2946
Unknown property '-moz-background-clip'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3295
Unknown property 'box-sizing'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3733
Unknown property '-moz-background-size'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3749
Unknown property '-moz-border-radius'.  Declaration dropped. @ http://127.0.0.1:3456/css/new-tahoe.css:39

Most of them appear to be relatively harmless uses of deprecated Mozilla-specific properties.

[davidsarah]

Hmm, this was a bug:

GET http://127.0.0.1:3456/img/logo.png [HTTP/1.1 404 Not Found 2ms]

Now fixed.

[davidsarah]

The branch has been rebased on top of the fixes for #1746 and #1775.

[davidsarah]

The new Welcome page does not work at all on Internet Explorer 8 ("This page cannot be displayed."). Should that be considered a blocker?

I tried forcing it into or out of Compatibility Mode but that didn't help (it's just the chicken you always have to wave in the air for any IE problem).

[davidsarah]

Replying to davidsarah:

The new Welcome page does not work at all on Internet Explorer 8 ("This page cannot be displayed."). Should that be considered a blocker?

I tried forcing it into or out of Compatibility Mode but that didn't help (it's just the chicken you always have to wave in the air for any IE problem).

I was mistaken; see 1931#comment:13.

[davidsarah]

Having the connected/not-connected indicator be a red or green bullet without any change in text, is an accessibility regression for colourblind people, so I would like to fix that before the release.

[davidsarah]

Landed in ​709be93a. \o/

I will fix the accessibility problem mentioned in comment:20.

[davidsarah]

Replying to davidsarah:

I will fix the accessibility problem mentioned in comment:20.

Please review: ​https://github.com/davidsarah/tahoe-lafs/commit/1713-accessibility.

[davidsarah]

Fix for comment:20 committed in ​1f38c920. It still needs review.

[David-Sarah Hopwood <david-sarah@…>]

In 1f38c920119aa66e:

New Welcome page: ensure 'not connected' status for Introducer and Helper is shown via text as well as bullet colour. refs #1713

Signed-off-by: David-Sarah Hopwood <david-sarah@…>

[warner]

That last fix looks fine. It seems slightly weird to have a rendering function delegate-to-self and then compare the result against a string (i.e. data_introducer_description() calls self.data_connected_to_introducer() and sees if the return value is "no". In the future, we should probably factor out an internal function that returns a boolean instead. But that code is cool for now.

[sickness]

I'm trying the new welcome page web interface after downloading allmydata-tahoe-1.10b1.post1.zip

I've built the release and configured a simple 3 node introducer/storage/client on the same box just

to see how the new web interface is

first of all I noticed that the introducer interface still has the old style

then I've noticed that on firefox 20.0 on 1024x600 resolution lots of things overlap

screenshots of introducer, storage, client web interface provided

introducer ​http://www.pr0n.it/tahoeintroducer1.10b1.post1.png
storage ​http://www.pr0n.it/tahoestorage1.10b1.post1.png
client ​http://www.pr0n.it/tahoeclient1.10b1.post1.png