872521 - Visually distinguish Private Browsing windows better from regular browser windows

Status: NEW

(SeaMonkey :: Themes, defect)

Description

[rsx11m]

The only way to tell whether or not a window is private currently is the text in the title bar provided by the OS desktop theme. In contrast, Firefox also marks Private Browsing windows visually, (1) by a different color of the application button, or (2) by a special icon in the right corner of the menu bar if it is enabled.

There should be some visual cue in SeaMonkey as well to easier recognize a private window. Since (1) won't be applicable, either adding a similar icon to the menu bar as well; or make some modifications to, e.g., the throbber icon changing its color a bit or making it semi-transparent (implying a "ghost" metaphor for "not being watched here" which may be the easiest solution).

Filing for UI Design rather than Themes as additional backend work is needed.

If bug 872000 checks in first, this would also need updates to the Help content as applicable to reflect any additional cues implemented here.

Comment 1

[Tony Mechelynck [:tonymec]]

The throbber is something themes are known to modify, I think changing its colour isn't a very good choice to signal that private browsing is in use.

A new icon on the toolbars/menubar: yes, maybe. Or maybe a change in the styling of the URL bar, but that one already changes background colour depending on connection security and/or identity verification… Maybe an URL bar icon similar to Larry? Or maybe a style change in the "Larry" design (we already have an officer for the usual cases, but an officer is a "public" figure; maybe something more private — a manservant's uniform? or a bodyguard? — for "private" browsing), in the same background colours, including one in some neutral background for "private, but no security information"?

Just tossing some ideas in the air.

Comment 2

[Philip Chee]

I haven't checked but I think the PB mode in Firefox is controlled by the theme so we just need to focus on our built in Default and Modern themes.

Comment 3

[rsx11m]

Firefox sets in their browser.js implementation as part of the gPrivateBrowsingUI.init() constructor a main-window attribute "privatebrowsingmode" which is either "permanent" (SeaMonkey doesn't have this mode properly implemented yet per bug 842618) or "temporary" for per-window private browsing. In their themes, this is matched with respective rules for #main-window[privatebrowsingmode=temporary].

Comment 4

[rsx11m]

(In reply to Philip Chee from comment #2)
> so we just need to focus on our built in Default and Modern themes.

You are correct. While SeaMonkey doesn't have the "privatebrowsingmode" attribute (which Firefox apparently only needs to distinguish per-window from global private browsing), the "windowtype" attribute is sufficient to tell whether or not the window is in regular or private mode. Thus, the following quick test works and makes the throbber semi-transparent for me in a private window:

  #main-window[windowtype="navigator:private"] #throbber-box {
    opacity: 0.5;
  }

Moving component to Themes in this case.

Comment 5

[rsx11m]

I've added a dependency on bug 874042 given that it may remove the windowtype attribute specific for private windows. Introducing a "privatebrowsingmode" attribute to match Firefox should help here and make it easier for theme authors to maintain Firefox and SeaMonkey versions of their themes in parallel.

Comment 6

[[e-mail]]

(In reply to rsx11m from comment #5)
> I've added a dependency on bug 874042 given that it may remove the
> windowtype attribute specific for private windows.
You can still style based on that, something like this perhaps:
  :root:not([windowtype]) #throbber-box {
    -moz-transform: scale(-1);
  }
[Joke style, not to be taken seriously.]

> Introducing a "privatebrowsingmode" attribute to match Firefox should
> help here and make it easier for theme authors to maintain Firefox and
> SeaMonkey versions of their themes in parallel.
Although Firefox only needs it because it has two types of private browsing...

Comment 7

[rsx11m]

(In reply to [e-mail] from comment #6)
>   :root:not([windowtype]) #throbber-box {

Just to confirm, this works as selector in current trunk and aurora builds.

Comment 8

[rsx11m]

There has been some interesting discussion on IRC between Ratty and Tobin, see http://logbot.glob.com.au/?c=mozilla%23seamonkey&s=26+Jun+2013&e=26+Jun+2013

I like the idea of utilizing the status bar to indicate that a window is in Private Browsing mode. After all, there are similar indicators already for being offline or connecting to a secure site.

Personally I think that adding an icon to the offline/secure area where those other icons are located already should fit well into the current concept of how it's used. Using a different color for the location bar may conflict with secure sites, and another important point to consider with respect to stronger indicators is that the indication should be subtle enough to avoid someone passing by with a glimpse on the screen to recognize directly that the user is browsing in private mode (though I'm not sure to which extent that's a privacy consideration).

Comment 10

[Jez]

(In reply to rsx11m from comment #8)
> There has been some interesting discussion on IRC between Ratty and Tobin,
> see
> http://logbot.glob.com.au/?c=mozilla%23seamonkey&s=26+Jun+2013&e=26+Jun+2013

Yeah, another vote here for putting an icon in the status bar... thinking about it, this is exactly the kind of thing the status bar is for!  I made a GIMP image of my proposed status bar icon (18x12; 12px seems to be the normal height of status bar icons, and I purposely put 2px padding on the sides as I think it looks too cramped otherwise), as well as a mockup of what it would look like in the status bar.

Comment 11

[Jez]

Attachment: Proposed private browsing mode icon, GIMP format

Comment 12

[Jez]

Attachment: Proposed private browsing mode icon mockup

Comment 13

[rsx11m]

Nice, but maybe a bit too subtle? The light magenta doesn't contrast against the default dialog background used in the status bar. I'm wondering if explicitly colorizing the status-bar background similar to the secure connection would help making it more prominent? Which color though? It shouldn't be too aggressive to amount to a distraction, but not too subtle either to miss it easily.

Comment 14

[rsx11m]

(increasing the icon's contrast a bit to sharpen its edges should help increase recognition as well.)

Comment 15

[Jez]

(In reply to [e-mail] from comment #6)
> (In reply to rsx11m from comment #5)
> > I've added a dependency on bug 874042 given that it may remove the
> > windowtype attribute specific for private windows.
> You can still style based on that, something like this perhaps:
>   :root:not([windowtype]) #throbber-box {
>     -moz-transform: scale(-1);
>   }
> [Joke style, not to be taken seriously.]
> 
> > Introducing a "privatebrowsingmode" attribute to match Firefox should
> > help here and make it easier for theme authors to maintain Firefox and
> > SeaMonkey versions of their themes in parallel.
> Although Firefox only needs it because it has two types of private
> browsing...

Neil, I'm a bit disappointed that you didn't bother to add a "privatebrowsingmode" attribute.  This solution you provide isn't great.

The trouble is I want to hide my icon by default, and then show it if one is in private browsing mode.  This means I want my "display:none" to match on something, and with your solution, I can't do that.  I have to hide it by default, and then somehow unhide it when your :not() selector matches, which means explicitly setting the "display" value to something.  This is an ugly solution.  It's nicer to just not apply the "display:none" and let the browser choose what the "display" value should be.

Comment 16

[Jez]

Just thought I'd let everyone know, the latest version of my MonkeyFix extension (1.2.0) now supports this, and shows a little "Private Browsing" icon in the status bar when in Private Browsing mode.  :-)

https://addons.mozilla.org/en-US/seamonkey/addon/monkeyfix/

Comment 17

[rsx11m]

Thanks for the add-on, but any suggestion/code to provide this in the regular releases?

Comment 18

[jSMth]

Unnoticeable. I have add-on MonkeyFix installed, and I didn't seen the icon until I read there (although I have used it not too long). Maybe, icon on the left of site icon in the address bar would be better. Or text on purple background, like the text in secure area when SSL is enabled. Or everything of this. For me, icon in address bar would be better - it is related to address what you browsing, and you know in each case, is it privately or not. Useful when you have many private and regular windows opened and switching between them and don't know in which window you are now. Icon should be more dark and contrast anyway. First of all, it should be noticeable to yourself, not for someone who passes by. The page content should be more interesting for them.

Comment 19

[Frank Lion]

Not quite sure why this bug has been hanging around for so long, as it's not exactly hard to fix - http://forums.mozillazine.org/viewtopic.php?p=14898605&sid=7a8a35497d83db8ec63dd963f7360827#p14898605

Yeah, a dedicated icon would be better, but people are not completely daft and would soon catch on why there is a purple box around the throbber that is only seen in Private Window mode. tl:dr? - doing something easy is probably a lot better than doing nothing at all.