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.

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).

(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 :)

Awesome, thanks :)

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]"

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

(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.

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

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

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 ); }

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.

Good catch, Philipp!

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.

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 :-)