Create Android theme for URLBar endcaps



Fennec Graveyard
7 years ago
7 years ago


(Reporter: mfinkle, Assigned: mfinkle)





(1 attachment, 3 obsolete attachments)

Created attachment 484495 [details] [diff] [review]

Need identity and pressed states
Created attachment 484873 [details] [diff] [review]

Adds larry images for default, ssl and ev
Adds endcap colors for default, ssl and ev
Updates the lock and unlock images

Problems with this patch include testing it. The SSL patches have not landed yet so it is a bit hard to test. Also the left endcap changes to the default background when pressed instead of maintaining the ev or ssl background. Once opened, the color is ok. We can fix now or later, whichever is easier.
Assignee: nobody → mark.finkle
Attachment #484495 - Attachment is obsolete: true
Attachment #484873 - Flags: review?(mbrubeck)
Comment on attachment 484873 [details] [diff] [review]

> #identity-box[open],
> #identity-box:hover:active {
>   border-right: 1px solid rgba(0, 0, 0, 0.2);
>+  background-image: url("chrome://browser/skin/images/endcap-active-bg.png");
> }

This should also be applied to the right-hand endcap.  (Replace the current .urlbar-cap-button open and hover styles.)

> #identity-box[mode="verifiedIdentity"] {
>-  background-color: rgb(137,215,21);
>+  background-image: url("chrome://browser/skin/images/endcap-ssl-bg.png");
> }

There's a bug where this flashes from dark blue to gray on mousedown, then to light blue on mouseup.  This is because #identity-box:hover:active has higher specificity than #identity-box[mode="verifiedIdentity"], so the blue "verified" image is overridden by the gray :hover:active one.

I think this will be solved by using the ".urlbar-cap-button" class instead of the ID for the default case, as suggested above.  If not, then add a :hover:active selector to this rule (and the "verifiedDomain" one).

>+#identity-box[mode^="verified"]:hover:active {
>+  opacity: 0.4;
> }

This effect looks weird to me.  The blue or green background looks washed out at 40% opacity, and so does the site icon.  And these get lighter on press, while our other endcaps and buttons get darker.

Can you double-check with Sean about this?  (Could he maybe have meant instead for you to overlay endcap-active-bg.png at opacity:0.4, on top of the blue/green backgrounds?)

>+#identity-container[mode="verifiedIdentity"] > hbox #identity-popup-icon {
>+  list-style-image: url("chrome://browser/skin/images/identity-ssl-hdpi.png");
>+#identity-container[mode="verifiedDomain"] > hbox #identity-popup-icon {
>+  list-style-image: url("chrome://browser/skin/images/identity-ev-hdpi.png");
> }

Add ">" after "hbox".
Attachment #484873 - Flags: review?(mbrubeck) → review-
I talked to Sean. Found out he had radial gradient backgrounds for the SSL and EV, so we do not need the opacity, but we do need the ":hover:active" selectors for the SSL and EV endcaps.

I did not add the radial "pressed" state to the right side ( the .urlbar-end-cap style) yet. I didn't know if that was the Madhava/Martell plan or not. We can add it later if needed.
Created attachment 484928 [details] [diff] [review]
patch 2

Attachment #484873 - Attachment is obsolete: true
Attachment #484928 - Flags: review?(mbrubeck)
Created attachment 484930 [details] [diff] [review]

Forgot to qref
Attachment #484928 - Attachment is obsolete: true
Attachment #484930 - Flags: review?(mbrubeck)
Attachment #484928 - Flags: review?(mbrubeck)
Attachment #484930 - Flags: review?(mbrubeck) → review+
The mockups show the radial gradient on the right-hand side, and mart3ll discussed it while we were working on the search engine popup:

We can do that as a followup, or you can change this on checkin.
pushed with radial gradient on right endcap:
Last Resolved: 7 years ago
Resolution: --- → FIXED

Comment 8

7 years ago
Verified on Build:

Mozilla/5.0(Android; Linux armv7l; rv:2.0b8pre) Gecko/20101021 Firefox/4.0b8pre
You need to log in before you can comment on or make changes to this bug.