977037 - Interaction design and visual design for tab-modal dialogs (e.g. HTTP auth)

Status: VERIFIED FIXED

(Toolkit :: General, defect)

Description

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

As a prerequisite for bug 613785 and others, we need a generalized design for tab-modal dialogs (that aren't alerts).
Some work in progress can be found here: http://cl.ly/image/0Y2S1G1G3x3A
Michael will take it from here.

Comment 1

[Florian Bender]

WIP looks good, however I'd propose to move the box directly below the address bar so it somehow looks like the omnibar/dropdown. The reason is that the (sub-)domain is sometimes not providing enough information to make a decision on the prompt (e.g. HTTP login may relate to a folder). Also, some prompts in the mockup don't show any URL at all making it rather hard to know which page requested the prompt (e.g. the "Stay on page?" prompt) leaving only the site title and dimmed page to identify the page. Lastly, there is no way to reach the Identity Panel to verify the sites' identity before entering credentials (HTTP login prompt). This is a no-go – there's already a bug on this somewhere, can't find it right now. 

So, please make sure that the full URL is always visible. Some prompts may want to "repeat" the domain name (e.g. HTTP login prompt, to cover the case of a HTTP-auth-required resource inside another site).

Comment 2

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to Florian Bender from comment #1)
> WIP looks good, however I'd propose to move the box directly below the
> address bar so it somehow looks like the omnibar/dropdown. The reason is
> that the (sub-)domain is sometimes not providing enough information to make
> a decision on the prompt (e.g. HTTP login may relate to a folder). Also,
> some prompts in the mockup don't show any URL at all making it rather hard
> to know which page requested the prompt (e.g. the "Stay on page?" prompt)
> leaving only the site title and dimmed page to identify the page. Lastly,
> there is no way to reach the Identity Panel to verify the sites' identity
> before entering credentials (HTTP login prompt). This is a no-go – there's
> already a bug on this somewhere, can't find it right now. 
> 
> So, please make sure that the full URL is always visible. Some prompts may
> want to "repeat" the domain name (e.g. HTTP login prompt, to cover the case
> of a HTTP-auth-required resource inside another site).

That is actually something Michael and I talked about yesterday. The URL bar will be visible (and functional) in the final design :)

Comment 3

[Florian Bender]

Awesome, thanks :)

Comment 4

[papalowa]

IMHO, without bug 647010 the domain below the the TLD (and IPs if no domain) should be emphasized, e.g.
* https://www.example.com/show_bug.cgi?id=977037 -> emphasize "example.com"
* https://myintranet/show_bug.cgi?id=977037 -> emphasize "myintranet"
* https://63.245.215.20/show_bug.cgi?id=977037 -> emphasize "63.245.215.20"
* https://[2620:101:8008:5::2:1]/show_bug.cgi?id=977037 -> emphasize "[2620:101:8008:5::2:1]"

Comment 5

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Bug 741050 (about the downloads dialog) could also benefit from this approach.

Comment 6

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to papalowa from comment #4)
> IMHO, without bug 647010 the domain below the the TLD (and IPs if no domain)
> should be emphasized, e.g.
> * https://www.example.com/show_bug.cgi?id=977037 -> emphasize "example.com"
> * https://myintranet/show_bug.cgi?id=977037 -> emphasize "myintranet"
> * https://63.245.215.20/show_bug.cgi?id=977037 -> emphasize "63.245.215.20"
> * https://[2620:101:8008:5::2:1]/show_bug.cgi?id=977037 -> emphasize
> "[2620:101:8008:5::2:1]"

Makes sense! Since we already do that in the location bar, it should fit in quite nicely.

Comment 7

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: Sign in WIP

Here's a design spec from Michael (still WIP as far as I know)

Comment 8

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

And some mockups of other use cases that should use the same kind of dialog:
http://cl.ly/image/0p3b113u1t2o
http://cl.ly/image/0Z1d0E0D0s31

Comment 9

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: -Mocks.zip

Comment 10

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: -Specs.zip

Comment 11

[Michael Maslaney [:mmaslaney] ([e-mail])]

Spec CSS

.secondary-button-text {
  font-size: 12.5px;
  line-height: 18.75 px;
  font-family: "Segoe UI";
  color: rgb( 51, 51, 51 );
  text-align: left;
}

.secondary-button {
  border-style: solid;
  border-width: 1px;
  border-color: rgb( 193, 193, 193 );
  border-radius: 2px;
  background-color: rgb( 251, 251, 251 );
  height: 26px;
}

.secondary-button:hover {
  background-color: rgb( 255, 255, 255 );
}

.secondary-button:active {
  background-color: rgb( 200, 200, 200 );
}

.primary-button-text {
  font-size: 12.5px;
  line-height: 18.75px;
  font-family: "Segoe UI";
  color: rgb( 255, 255, 255 );
  text-align: left;
}

.primary-button {
  border-radius: 2px;
  background-color: rgb( 116, 191, 67 );
  height: 26px;
}

.primary-button:hover {
  background-color: rgb( 108, 178, 62 );
}

.primary-button:hover:active {
  background-color: rgb( 100, 164, 58 );
}

.promp h1 {
  font-size: 23px;
  line-height: 30 px;
  font-family: "Segoe UI";
  color: rgb( 51, 51, 51 );
  text-align: left;
}

.promp-tag {
  font-size: 12.5px;
  line-height: 18.75 px;
  font-family: "Segoe UI";
  color: rgb( 230, 96, 0 );
  text-align: left;
}

.promp h2 {
  font-size: 12.5px;
  line-height: 18.75 px;
  font-family: "Segoe UI";
  font-weight: bold;
  color: rgb( 51, 51, 51 );
  text-align: left;
}

.promp-text {
  font-size: 12.5px;
  line-height: 18.75 px;
  font-family: "Segoe UI";
  color: rgb( 51, 51, 51 );
  text-align: left;
}

.prompt-container {
  border-style: solid;
  border-width: 1px;
  border-color: rgb( 23, 24, 26 );
  background-color: rgba( 255, 255, 255, 0.969 );
  opacity: 0.2;
  box-shadow: 0px 3px 5px 0px rgb( 23, 24, 26 );
}

.controls-container {
  background-color: rgb( 241, 241, 241 );
  box-shadow: 0px -1px 0px 0px rgb( 213, 213, 213 );
}

.input {
  border-style: solid;
  border-width: 1px;
  border-color: rgb( 187, 187, 187 );
  background-color: rgb( 255, 255, 255 );
}

.input:active {
  border-color: rgb( 0, 150, 221 );
}

Comment 12

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Note that the buttons at the bottom should be the other way around on Windows.

Windows:       Sign in | Cancel
OS X/Linux:    Cancel | Sign in

That way we meet the platform conventions.

Comment 13

[Michael Maslaney [:mmaslaney] ([e-mail])]

Good catch, Philipp!

Comment 15

[Matthew N. [:MattN]]

To whoever implements this, we already use this footer on UITour tooltips (info panels), the identity popup (maybe a slightly different colour), bookmark/history panels and on the menu panel; we also use the button styling on UITour tooltips. Please make re-useable styles (e.g. classes) and/or defines so we aren't hard-coding these styles in 4+ places. It seems like we should have a <footer> element or similar that provides the footer styling in any panel and provides the proper negative margins so that it reaches the edges of default panels.

Comment 16

[thomas.ebert]

Quick question: Does this also fix not being able to navigate anywhere else, that is, a different tab or an extension (e.g. a Password Manager) while a pop-up for Basic Authentication is showing? This is something that bugs me for a *very* long time now. Would be nice if it finally got fixed :-)

Comment 17

[Greg Dubicki]

@thomas.ebert: no, what you are writing about is that the Basic Auth pop-up is currently window-modal. And the bug for this is bug 613785 .