Opened 6 years ago

Closed 5 years ago

#7495 closed enhancement (fixed)

Create browser-based update notification mechanism

Reported by: mikeperry Owned by: mikeperry
Priority: High Milestone:
Component: Firefox Patch Issues Version:
Severity: Keywords: SponsorJ tbb-bounty
Cc: mcs, brade Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

The check.torproject.org update notification has several problems. It's web-based, overloaded, and unmaintained.

From a usability standpoint, I think I like the idea of an ever-present notification ribbon/toolbar thing on *all* windows rather than a popup that appears only when the check interval expires, so long as it can't be confused with something from the content window.

Note, we'll also want to make sure that such a ribbon does not change the size of the resolution values from your CSS + window.screen patches... This might actually be fairly tricky in practice, due to there not being a lot of slack in the current window sizing code in Torbutton ( https://gitweb.torproject.org/torbutton.git/blob/master:/src/chrome/content/torbutton.js#l4358). See also #6146, for example... We could handle this issue by simply giving a larger buffer for maxHeight in that function, though.

Another option could be some sort of icon hint in the Toolbar (for example, Google Chrome places red up arrow over it's 'menu vent'), but that is even more likely to get ignored.

In either case, the notification should provide a link to the TBB download page, and should pass the OS and architecture to this page in the form of an anchor/fragment (see #4238).

Child Tickets

Attachments (7)

tor-5.gif (1.7 KB) - added by kolohe 5 years ago.
tor-update.xcf (12.8 KB) - added by kolohe 5 years ago.
tor-update2.gif (4.4 KB) - added by mikeperry 5 years ago.
Use replace rather than combine for animation (so there is only one arrow image).
TBB-Update-Prototype.png (44.0 KB) - added by mcs 5 years ago.
Screenshot of prototype implementation
tbu16.gif (1.3 KB) - added by peer 5 years ago.
tbu24.gif (1.7 KB) - added by peer 5 years ago.
issue7495.patch (16.1 KB) - added by mcs 5 years ago.
Revised patch

Download all attachments as: .zip

Change History (20)

comment:1 Changed 6 years ago by mcs

Adding a ribbon to every window without changing the size of the window content area (which is what web pages can see) seems like a challenge. Is your idea that we will increase the height of the window when we add the ribbon (so that the content size thar web pages see remains the same)? Since web pages can monitor resize events, it may be hard to prevent them from noticing even a temporary resize.

Here's another idea: implement the upgrade notification as a floating window that will stay in front of all other windows. We can decide whether it should have a close box or not. brade and I just did a quick test and the floating popup as described here seems to work on Linux, Mac, and WinXP:

https://developer.mozilla.org/en-US/docs/XUL/PopupGuide/Floating_Panels

comment:2 Changed 6 years ago by mikeperry

Hrmm.. it seems like a floating panel might be hard to distinguish from a CSS popup in a malicious webpage, especially since it seems bound to the interior of a browser window.

What if we turned the Torbutton yellow, changed the tooltip text, and added a menu option that sent users to the update link? Would people notice this, or we still need a popup?

comment:3 in reply to:  2 Changed 6 years ago by rransom

Replying to mikeperry:

Hrmm.. it seems like a floating panel might be hard to distinguish from a CSS popup in a malicious webpage, especially since it seems bound to the interior of a browser window.

What if we turned the Torbutton yellow, changed the tooltip text, and added a menu option that sent users to the update link? Would people notice this, or we still need a popup?

Yellow and green are too difficult for colorblind users to distinguish. Consider using blue or purple to indicate that an update is available, and consider adding an ‘emblem’ on top of the icon as well.

comment:4 in reply to:  2 ; Changed 6 years ago by brade

Replying to mikeperry:

Hrmm.. it seems like a floating panel might be hard to distinguish from a CSS popup
in a malicious webpage, especially since it seems bound to the interior of a browser
window.

What if we turned the Torbutton yellow, changed the tooltip text, and added a menu
option that sent users to the update link? Would people notice this, or we still
need a popup?

A XUL floating panel can be moved any where on the screen. It is a full native window that will always stay on top (thus making it harder to ignore). It could be opened partially overlapping the toolbar area to make it obvious that it is not part of content. It is still possible that users might confuse it with a popup window but a popup window will display the URL at the top.

Changing the color and/or graphic within the Torbutton might be a good idea but it would be easier for people to ignore.

Maybe use the popup and also change the look of the Torbutton? That way, users who are unsure of the popup could close it and use the Torbutton menu to access the update.

comment:5 in reply to:  4 Changed 5 years ago by mikeperry

Replying to brade:

Replying to mikeperry:

Hrmm.. it seems like a floating panel might be hard to distinguish from a CSS popup
in a malicious webpage, especially since it seems bound to the interior of a browser
window.

What if we turned the Torbutton yellow, changed the tooltip text, and added a menu
option that sent users to the update link? Would people notice this, or we still
need a popup?

A XUL floating panel can be moved any where on the screen. It is a full native window that will always stay on top (thus making it harder to ignore). It could be opened partially overlapping the toolbar area to make it obvious that it is not part of content. It is still possible that users might confuse it with a popup window but a popup window will display the URL at the top.

Changing the color and/or graphic within the Torbutton might be a good idea but it would be easier for people to ignore.

The old graphic for Torbutton might be our starting point here. It has a yellow-grey center and a purple border. Instead of a red X, we could put a red up arrow and maybe an exclamation point. The menu could then have a bold or otherwise distinct "Update Tor Browser..." entry that links to the appropriate download page, with OS+Arch. The purple border + up arrow would satisfy the color-blind requirement, and is also quite visibly different.

There is a tor.png 32x32 icon in the source. That could be a starting point. We can see if we can find a volunteer with a good eye to play with gimp/photoshop to put the up arrow on it.

Maybe use the popup and also change the look of the Torbutton? That way, users who are unsure of the popup could close it and use the Torbutton menu to access the update.

I am still wary of using the popup at all. Even if it is placed to overlap a non-content area of the window, we'd still be training our users to install software from "popups". Most users probably won't notice the subtle distinction of the non-content overlap ability.

comment:6 Changed 5 years ago by mikeperry

aagbsn in #tor just asked if an animated gif might work. I've never tried one in XUL. I assume it would. If not, I guess we could animate it with XUL JS... I suppose we could have the up arrow start low and move vertically upwards in a loop. That would be hard to ignore.

Changed 5 years ago by kolohe

Attachment: tor-5.gif added

comment:8 Changed 5 years ago by mikeperry

As I said on IRC, to me, the arrows in tor-5.gif seem more like a progress indicator of something than an update signal. Based on http://www.designdownloader.com/termsofservice/, I think we can freely use either of these arrows, or others: http://www.designdownloader.com/i/?id=arrow_up_9-20110809171811-00007 http://www.designdownloader.com/i/?id=arrow_up_1-20110809171533-00031.

The arrow also shouldn't overlap the exclamation point.

Changed 5 years ago by kolohe

Attachment: tor-update.xcf added

comment:9 in reply to:  8 Changed 5 years ago by kolohe

Replying to mikeperry:

As I said on IRC, to me, the arrows in tor-5.gif seem more like a progress indicator of something than an update signal. Based on http://www.designdownloader.com/termsofservice/, I think we can freely use either of these arrows, or others: http://www.designdownloader.com/i/?id=arrow_up_9-20110809171811-00007 http://www.designdownloader.com/i/?id=arrow_up_1-20110809171533-00031.

The arrow also shouldn't overlap the exclamation point.

I made the adjustments suggested in #tor and uploaded an .xcf

Changed 5 years ago by mikeperry

Attachment: tor-update2.gif added

Use replace rather than combine for animation (so there is only one arrow image).

Changed 5 years ago by mcs

Attachment: TBB-Update-Prototype.png added

Screenshot of prototype implementation

comment:10 Changed 5 years ago by mcs

Please take a look at the previous two attachments. Kathy Brade and I made a first pass at modifying Torbutton to show an animated toolbar icon and to display a "Download Tor Browser Bundle Update" menu item when an update is available. There are a few open issues:

  • We need to agree on which download URL to use and how to represent the OS and architecture within it.
  • The download URL is opened in the current tab; should it be opened in a new tab instead?
  • For the animated icon, we need sizes to match the existing tor-enabled-16.png (which is actually 18x18 pixels) and tor-enabled-24.png (24x24 pixels). To test our prototype, we just scaled down the 32x32 pixel animated GIF that Mike created.

Changed 5 years ago by peer

Attachment: tbu16.gif added

Changed 5 years ago by peer

Attachment: tbu24.gif added

comment:11 Changed 5 years ago by peer

An outdated TBB might be insecure and should result in a warning. The user could encounter security issues that have been fixed and documented (a risk) and should update the browser (an action). A blinking warning icon might be good for grabbing the user's attention.

Arrow variations could be confusing as they could suggest that an automated update is in progress or is downloading when user intervention is needed.

Changed 5 years ago by mcs

Attachment: issue7495.patch added

Revised patch

comment:12 Changed 5 years ago by mcs

Mike, please review the revised patch when you have a chance.

We incorporated the new "caution" icon, added #mac/#win/#linux to the download URL so that the existing download page will open correctly, and made it so the download page opens in a new tab.

One potential issue is that this patch stores the fact that an updated is needed in a pref. That means that after someone installs an up-to-date TBB, the "caution" icon and download link will be shown until the first version check is completed. The alternative is to clear the pref at startup, but this would cause the out-of-date notification to disappear on restart even if an update has not been installed yet (until the next version check).

comment:13 Changed 5 years ago by mikeperry

Resolution: fixed
Status: newclosed

The patch looks good. It seems to work ok if I add the extensions.torbutton.updateNeeded pref to our defaults.js and set it to false. Then, the first run doesn't get the update notification until the update check completes, which is fine with me.

I also checked the new icon against gimp's color blind filters and it seems like the yellow on green is still visible to all 3 color blind types (mostly because our green has a lot of grey in it).

I've committed this to my current working scratch branch mikeperry/ticket7974-squashed. It will appear in the next TBB-alpha and the first TBB-stable that we release with FF17. Woo hoo!

Going to close this now.

Note: See TracTickets for help on using tickets.