The identity-box should have a smaller font-size and a gradient end border instead of a solid line

RESOLVED FIXED in Firefox 14

Status

()

Firefox
Theme
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: jaws, Assigned: jaws)

Tracking

14 Branch
Firefox 15
Points:
---
Bug Flags:
in-testsuite -

Firefox Tracking Flags

(firefox14 fixed)

Details

(URL)

Attachments

(2 attachments, 8 obsolete attachments)

22.04 KB, image/png
Details
4.90 KB, patch
dao
: review+
Details | Diff | Splinter Review
Created attachment 617187 [details] [diff] [review]
WIP of patch (Windows only)

As the mockup in the URL shows, there should be a smaller font-size for the identity-box text. The end border on the identity-box when viewing an https-ev site be a linear gradient instead of a solid line.
Attachment #617187 - Flags: feedback?(fryn)

Updated

5 years ago
Component: Location Bar → Theme
QA Contact: location.bar → theme
Created attachment 617596 [details]
Screen shot showing w/ and w/o line

Why should there be a separator line/gradient between the site identity block and the URL in the EV case, but no separator line/gradient in the non-EV case? IMO, it is easier to read and looks good w/o any separator, and that would make the EV and non-EV cases consistent. See screenshot for comparison.
(In reply to Brian Smith (:bsmith) from comment #1)
> Why should there be a separator line/gradient between the site identity
> block and the URL in the EV case, but no separator line/gradient in the
> non-EV case?

This is because the EV case has text shown, so we want to provide a separator between the two text groups.

Comment 3

5 years ago
Created attachment 617642 [details]
Emboldened text

Jared, the text should have bold font-weight as in the screenshot I just made.
The font-size of 85% is what that Stephen and I came up with in-person.

P.S. "embolden" is a real word. Stephen didn't believe me:
https://www.google.com/search?q=define+embolden

Comment 4

5 years ago
Comment on attachment 617187 [details] [diff] [review]
WIP of patch (Windows only)

Review of attachment 617187 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/winstripe/browser.css
@@ +1343,5 @@
>  /* identity box */
>  
>  #identity-box {
>    padding: 2px;
> +  font-size: .9em;

I think .9em is fine. The .85 that I suggested in the previous comment might be a bit too small.
Please embolden this.

@@ +1398,5 @@
> +}
> +
> +#identity-box.verifiedIdentity:after {
> +  content: "";
> +  display: block;

Can you verify the height of this pseudo-element extends from the top of the identity box to the bottom of it (e.g. setting a CSS outline on it to check its dimensions, etc.)?
We don't want it to be only as tall as the font-size.

@@ +1401,5 @@
> +  content: "";
> +  display: block;
> +  width: 1px;
> +  -moz-margin-start: 2px;
> +  background-image: -moz-linear-gradient(to bottom, hsla(92,81%,16%,0),

`to bottom, ` can be omitted.
Attachment #617187 - Flags: feedback?(fryn) → feedback+
Created attachment 617667 [details] [diff] [review]
Patch for bug (Windows, Linux, OS X)

.85em looks too small for Windows, so I stuck with .9em on Windows (which will make it look the same as on Mac).
Attachment #617187 - Attachment is obsolete: true
Attachment #617667 - Flags: review?(fryn)
Can I have some context here? I vaguely remember that we used to have smaller and/or bolder text but got rid of it in an attempt to streamline this. Also note that bold text rendering is different across operating systems; this isn't going to look like attachment 617642 [details] on Windows and Linux.
Created attachment 617680 [details] [diff] [review]
Patch for bug v2 (Windows, Linux, OS X)

This patch has the same font-size for the identity-box on all platforms as Frank requested offline.
Attachment #617680 - Flags: review?(fryn)

Comment 8

5 years ago
Comment on attachment 617680 [details] [diff] [review]
Patch for bug v2 (Windows, Linux, OS X)

Review of attachment 617680 [details] [diff] [review]:
-----------------------------------------------------------------

The gradient pseudo-element's height is derived from the font-size, but I'm okay with that, since it's just a separator, sorta like a pipe character.

We're gonna need a peer to r or rs this.
Attachment #617680 - Flags: review?(fryn) → feedback+

Updated

5 years ago
Attachment #617667 - Attachment is obsolete: true
Attachment #617667 - Flags: review?(fryn)
Created attachment 620917 [details] [diff] [review]
Patch for bug v3 (Windows, Linux, and OS X)

This patch removes the bolding of the text due to platform differences and the way that bold fonts get aliased. I also lightened up the green font color so that it is not as close to black.
Attachment #617596 - Attachment is obsolete: true
Attachment #617642 - Attachment is obsolete: true
Attachment #617680 - Attachment is obsolete: true
Attachment #620917 - Flags: review?(fryn)
Created attachment 620918 [details]
Screenshot of patch
Attachment #620918 - Flags: ui-review?(shorlander)
Comment on attachment 620917 [details] [diff] [review]
Patch for bug v3 (Windows, Linux, and OS X)

Please set the background on #identity-box without :after.
Attachment #620917 - Flags: review?(fryn) → review-
Created attachment 620949 [details] [diff] [review]
Patch for bug v4 (Windows, Linux, and OS X)

No longer using :after for the background-image.
Attachment #620917 - Attachment is obsolete: true
Attachment #620949 - Flags: review?(dao)
Comment on attachment 620949 [details] [diff] [review]
Patch for bug v4 (Windows, Linux, and OS X)

You're making the text brighter on Windows on Mac but not on Linux, where it was already darker anyway -- this doesn't seem right.
Attachment #620949 - Flags: review?(dao) → review-
Created attachment 621051 [details] [diff] [review]
Patch for bug v5

Increased the brightness on the text for Linux.
Attachment #620949 - Attachment is obsolete: true
Attachment #621051 - Flags: review?(dao)
(In reply to Jared Wein [:jaws] from comment #14)
> Created attachment 621051 [details] [diff] [review]
> Patch for bug v5
> 
> Increased the brightness on the text for Linux.

It's still less saturated and less bright than on Windows and Mac. Is this intentional?
Created attachment 621142 [details] [diff] [review]
Patch for bug v6

The colors were different before but I talked with Stephen and he said to make them all the same (color: hsl(92,100%,30%)).
Attachment #621051 - Attachment is obsolete: true
Attachment #621051 - Flags: review?(dao)
Attachment #621142 - Flags: review?(dao)

Updated

5 years ago
Attachment #621142 - Flags: review?(dao) → review+
https://hg.mozilla.org/integration/mozilla-inbound/rev/0de23000ee3d
Flags: in-testsuite-
Target Milestone: --- → Firefox 15
Attachment #620918 - Flags: ui-review?(shorlander)
Comment on attachment 621142 [details] [diff] [review]
Patch for bug v6

[Approval Request Comment]
Regression caused by (bug #): bug 742419
User impact if declined:
Slightly altered look of identity-box between Fx14 & Fx15. The identity-box got a makeover for Fx14 and since this is security-sensitive UI, we want to have the ability to tell a clear message about how to use it.

Testing completed (on m-c, etc.): locally, just landed on mozilla-inbound for Fx15
Risk to taking this patch (and alternatives if risky): none expected
String changes made by this patch: none
Attachment #621142 - Flags: approval-mozilla-aurora?
http://hg.mozilla.org/mozilla-central/rev/0de23000ee3d
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Attachment #621142 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
https://hg.mozilla.org/releases/mozilla-aurora/rev/eff91fd2ec87
status-firefox14: --- → fixed
You need to log in before you can comment on or make changes to this bug.