977045 - Visual design for non-modal default browser prompt

Status: VERIFIED FIXED

(Firefox :: Shell Integration, defect)

Description

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

This is the UX work for bug 951627.

An infobar seems to be the best solution for asking to set the default browser because
* it doesn't interrupt the flow
* it is still highly visible
* it provides some flexibility

Here's a WIP mockup: http://cl.ly/image/3m2z0X2V3p0m (neither the copy nor the visual design is finished yet)

Comment 1

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

Here are some great copy ideas from Matej:

> [COPY OPTIONS]
> 1) Always use Firefox to stay in control online.
> 2) Always use Firefox for the best in security and privacy.
> 3) Always use Firefox to get the most of the Web.
> 
> [BUTTON]
> Make Firefox my default browser

I love the idea to split it up into call and action! My personal favorite is 3), probably because it is the most general.

Comment 2

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

Since there seem to be no objections, we should go with:

COPY:   Always use Firefox to get the most of the Web.
BUTTON: Make Firefox my default browser

Comment 3

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

Attachment: WIP design spec

Here's a design spec from Michael (still WIP as far as I know). There are versions that use other colors for the button available as well:
http://cl.ly/image/231u2q233J2r
http://cl.ly/image/0F3s2D0v3Y1j
http://cl.ly/image/2d160d3k2Q3G

Comment 4

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

Attachment: dialog_prompt.zip

Mock and specs attached.

Comment 5

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

CSS from the specs:


.icon-container {
 background-color: rgb( 255, 255, 255 );
 width: 40px;
 height: 40px; 
}

.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 {
  background-color: rgb( 241, 241, 241 );
  box-shadow: 0px 1px 1px 0px rgb( 213, 213, 213 );
  height: 40px;
  padding: 10px 10px 10px 10px;
}

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

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