427555 - [proto] Land Proto .15 Mac theme changes

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Kevin Gerich]

Round of Mac theme changes, including

- keyhole icons are no longer big-assed
- Added hover/pressed states to the location bar icons
- More tab color tweakage
- added hover/pressed state to "all tabs" button
- updated Download Manager icons
- New HUD design for identity and edit bookmark panels
- focus rings added to non-native controls
- text only toolbar buttons aligned correctly
- search bar text field artifacts removed

Comment 1

[Kevin Gerich]

Attachment: Patch against trunk. See Proto 0.15 theme on AMO to test

Comment 2

[Mike Connor [:mconnor]]

Comment on attachment 314106 [details] [diff] [review]
Patch against trunk. See Proto 0.15 theme on AMO to test

ui-r=mconnor, this looks great

Comment 3

[Asaf Romano (gone)]

Comment on attachment 314106 [details] [diff] [review]
Patch against trunk. See Proto 0.15 theme on AMO to test

>+#star-button:hover {
>+  -moz-image-region: rect(0px, 32px, 16px, 16px);  
>+}
>+
>+#star-button:active {

make that :hover:active.

>+  -moz-image-region: rect(0px, 48px, 16px, 32px);  
> }
> 
> #star-button[starred="true"] {
>-  list-style-image: url("chrome://browser/skin/places/pageStarred.png");
>+  -moz-image-region: rect(16px, 16px, 32px, 0px);  
> }
> 
>-/* BOOKMARKING PANEL */
>-#editBookmarkPanel {
>-  padding: 4px;
>+#star-button:hover[starred="true"] {
>+  -moz-image-region: rect(16px, 32px, 32px, 16px);  
>+}
>+
>+#star-button:active[starred="true"] {

ditto.

> 
> .tabbrowser-strip {
>   margin-top: -1px;
>   border-bottom: 1px solid #404040;
>+  background-color: #9B9B9B !important;

why  !important;?


> .tabs-alltabs-button {
>-  margin: 2px 0px 3px 0px;
>+  list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png");
>+  border: none;
>+  border-left: 2px solid;

nit: merge the rules.

>+  -moz-border-left-colors: rgba(0,0,0,0.25) rgba(255,255,255,0.15);
>+  margin: 0;
>   padding-left: 0;
>   padding-right: 0;
>-  border: none;
>+}
>+.tabs-alltabs-button:hover {
>+  background-color: rgba(0,0,0,0.10) !important;
>+}
>+.tabs-alltabs-button:hover:active,
>+.tabs-alltabs-button[open="true"] {
>+  background-color: rgba(0,0,0,0.20) !important;
> }
> 
> .tabs-alltabs-button  > .toolbarbutton-menu-dropmarker {
>   display: none;
> }
> 
> .tabs-alltabs-button  > .toolbarbutton-text {
>   display: none;
>@@ -1473,17 +1509,17 @@ toolbarbutton.bookmark-item[dragover="tr
> #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
>   -moz-image-region: rect(128px, 64px, 192px, 0px);
> }
> 
> /* Popup Body Text */
> #identity-popup-content-box > description,
> #identity-popup-encryption-label {
>   white-space: pre-wrap;
>-  color: black;
>+  color: #ffffff;
>   padding-left: 15px;
>   margin: 2px 0 4px;
> }
> 
> #identity-popup-content-box > label {
>   white-space: pre-wrap;
>   margin-left: 0;
>   padding-left: 15px;
>@@ -1507,28 +1543,64 @@ toolbarbutton.bookmark-item[dragover="tr
> 
> #identity-popup-content-verifier {
>   margin: 4px 0 2px;
> }
> 
> #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
> #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
>   margin-top: 10px;
>-  margin-left: -18px;
>+  margin-left: -24px;
> }
> 
> #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
> #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
>-  list-style-image: url("chrome://browser/skin/Secure.png");
>-  -moz-image-region: rect(0px, 18px, 18px, 0px);
>+  margin-top: 5px;
>+  list-style-image: url("chrome://browser/skin/Secure-Glyph-White.png");
> }
> 
> /* Popup Bounding Box */
>-#identity-popup-container {
>-  background-image: none;
>-  background-color: white;
>+#identity-popup {
>+  -moz-appearance: none;
>+  background-color: rgba(68,68,68,0.9);
>+  border: 1px solid rgba(255,255,255,0.15);
>+  -moz-border-radius: 8px;
>+  -moz-border-radius-topleft: 0px;
>+  padding: 10px 8px 6px 8px;
>+  margin-top: -3px;
>+  -moz-margin-start: 11px;
>+  color:  #ffffff !important;
>   min-width: 280px;
>-  padding: 10px;
>+}
>+
>+#identity-popup-container {
>+  -moz-appearance: none;
>+  color:  #ffffff !important;

why !important for (in both places, and few more later)?

>Index: browser/themes/pinstripe/browser/places/editBookmarkOverlay.css
>===================================================================

>+#editBookmarkPanel {
>+  -moz-appearance: none;
>+  background-color: rgba(68,68,68,0.9);
>+  border: 1px solid rgba(255,255,255,0.15);
>+  -moz-border-radius: 8px;
>+  -moz-border-radius-topright: 0px ;
>+  padding: 10px 8px 6px 8px;
>+  margin-top: 4px;
>+  color: #ffffff;

This, along with any editBookmarkPanel* selectors belong to browser.css, not to the overlay (which is not the panel itself).

> }
> 
>-.folder-icon > .menu-iconic-left {
>-  display: -moz-box;
>+#editBookmarkPanelTitle {
>+  font-size: 130%;
>+  font-weight: bold;
>+  margin: 8px 12px 0px 9px;
>+}
>+
>+#editBookmarkPanel > hbox {
>+ padding-right: 1px;
>+}
>+
>+/**** HUD style buttons ****/
>+
>+#editBookmarkPanel > hbox > vbox > hbox > button,
>+#editBookmarkPanel > #editBookmarkPanelBottomButtons > button {

once you do that, you can simply rules like this not to select #editBookmarkPanel  first.

> #placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-text {
>-  background: url("chrome://browser/skin/places/menubutton-mid.png") center left repeat-x;
>-  height: 23px;
>-  margin: 0;
>-  padding: 4px;
>+  display:  none;
> }
> 

I prefer applying the toolbarbutton-image binding.

> #placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker {
>   list-style-image: url("chrome://browser/skin/places/folderDropArrow.png");
>+  padding: 0;
> }
> 
> /* organize button */
> #organizeButton {
>+  list-style-image: url("chrome://browser/skin/places/toolbar-button-organize.png");
> }
> 
> /* view button */
> #viewMenu {
>+  list-style-image: url("chrome://browser/skin/places/toolbar-button-view.png");
> }
> 
> /* maintenance button */
> #maintenanceButton {
>+  list-style-image: url("chrome://browser/skin/places/toolbar-button-backup.png");
> }
> 
> /* Root View */
> #placesView {
>   border-top: 1px solid ThreeDDarkShadow;
>   -moz-user-focus: ignore;
> }
> 
>@@ -201,16 +207,31 @@
>   border: 0px;
> }
> 
> #placeContent treechildren::-moz-tree-row {
>   border-top: none !important;
>   padding-top: 1px;
> }
> 
>+#placeContent treechildren::-moz-tree-row(odd) {
>+  background-color: #edf3fe;
>+}
>+
>+#placeContent treechildren::-moz-tree-row(selected),
>+#placeContent treechildren::-moz-tree-row(odd, selected) {
>+  background-color: -moz-mac-secondaryhighlight;
>+}
>+
>+#placeContent treechildren::-moz-tree-row(selected, focus), 
>+#placeContent treechildren::-moz-tree-row(odd, selected, focus) {
>+  background-color: Highlight;
>+  color: HighlightText !important;
>+}
>+
> #placeContent treechildren::-moz-tree-cell,
> #placeContent treechildren::-moz-tree-column {
>   border-right: 1px solid #d7dad7;
> }
> 
> #placeContent treechildren::-moz-tree-cell(separator) {
>   border-color: transparent;
> }
>@@ -260,23 +281,29 @@
> 
> #searchFilter {
>   -moz-appearance: none;
>   border: 3px solid;
>   -moz-border-top-colors: #676767 #C5C5C5 -moz-Field;
>   -moz-border-bottom-colors: #C2C2C2 #A4A4A4 -moz-Field;
>   -moz-border-right-colors: #969696 #C5C5C5 -moz-Field;
>   -moz-border-left-colors: #969696 #C5C5C5 -moz-Field;
>-  -moz-border-radius: 11.5px;
>+  -moz-border-radius: 12px;
>   background: url("chrome://global/skin/icons/search-textbox.png") -moz-Field no-repeat 1px center;
>-  -moz-background-clip: padding !important;
>+  -moz-background-clip: border !important;
>   padding: 0;
>   -moz-padding-start: 14px;
> }
> 
>+#searchFilter[focused="true"] {
>+  outline: 2px solid #4F8EC9;
>+  -moz-outline-radius: 12px;
>+  -moz-outline-offset: -2px;
>+}
>+
> #searchFilter > .textbox-input-box {
>   padding: 2px;
>   border-left: 2px solid transparent;
> }
> 
> .filterList {
>   -moz-appearance: none;
>   background-color: transparent;
>@@ -413,16 +440,31 @@ menulist[open="true"] > .menulist-label-
>   background: url("chrome://global/skin/icons/round-button-active-middle.png") repeat-x center left !important;
> }
> 
> #editBMPanel_namePicker {
>   background: none !important;
>   margin: 0px !important;
>   padding:  0px !important;
> }
>+#editBMPanel_namePicker[droppable="false"] > .menulist-editable-box {
>+  -moz-appearance: textfield;
>+  cursor: text;
>+  margin: 4px 4px;
>+  border: 3px solid;
>+  -moz-border-top-colors: transparent #888888 #000000;
>+  -moz-border-right-colors: transparent #FFFFFF #000000;
>+  -moz-border-bottom-colors: transparent #FFFFFF #000000;
>+  -moz-border-left-colors: transparent #888888 #000000;
>+  -moz-border-radius-topright: 2px;
>+  -moz-border-radius-bottomleft: 2px;
>+  padding: 0;
>+  background-color: -moz-Field;
>+  color: -moz-FieldText;
>+}
> 
> #saveSearch {
>   -moz-appearance: none;
>   margin: 0;
>   padding: 4px 0 3px 0;
>   -moz-padding-start: 7px;
>   background: url("chrome://global/skin/icons/round-button-leftcap.png") no-repeat center left;
>   border: none;
>@@ -528,22 +570,23 @@ menulist[open="true"] > .menulist-label-
> .advancedSearchMinus {
>   background: url("chrome://browser/skin/places/minus.png") no-repeat left center;
> }
> 
> .advancedSearchMinus:active {
>   background: url("chrome://browser/skin/places/minus-active.png") no-repeat left center;
> }
> 
>+%endif
> 
> /**** expanders ****/
> 
> .expander-up,
> .expander-down {
>-  -moz-appearance: none;
>+  -moz-appearance: none !important;

Is the really necessary?


>Index: toolkit/themes/pinstripe/mozapps/downloads/downloads.css
>===================================================================

>  */
> richlistitem[type="download"] button {
>   list-style-image: url(chrome://mozapps/skin/downloads/buttons.png);
> }
> .cancel {
>+  -moz-image-region: rect(0px, 16px, 16px, 0px);
>+}
>+.cancel:hover {
>   -moz-image-region: rect(0px, 32px, 16px, 16px);
> }
>-.pause {
>+.cancel:hover:active {
>   -moz-image-region: rect(0px, 48px, 16px, 32px);
> }
>+
>+.pause {
>+  -moz-image-region: rect(48px, 16px, 64px, 0px);
>+}
>+.pause:hover {
>+  -moz-image-region: rect(48px, 32px, 64px, 16px);
>+}
>+.pause:hover:active {
>+  -moz-image-region: rect(48px, 48px, 64px, 32px);
>+}
> .pause[disabled="true"] {

The :hover:active may override you, maybe use :not?

What's the textbox.css change for?

Comment 4

[Kevin Gerich]

(In reply to comment #3)
Thanks for the review. I think I'm clear on everything except this part. Can you elaborate please?

> >+/**** HUD style buttons ****/
> >+
> >+#editBookmarkPanel > hbox > vbox > hbox > button,
> >+#editBookmarkPanel > #editBookmarkPanelBottomButtons > button {
> 
> once you do that, you can simply rules like this not to select
> #editBookmarkPanel  first.

Comment 5

[Asaf Romano (gone)]

Yeah, I take that back, browser.css is applied anyway due to macbrowseoverlay.

Comment 6

[Asaf Romano (gone)]

Please do move the rules to browser.css though, they don't belong to the stylesheet of the overlay.

Comment 7

[Kevin Gerich]

Attachment: Patch v2

This should take care of the issues Mano mentioned

> What's the textbox.css change for?

fix for bug 419934

Comment 8

[Asaf Romano (gone)]

Comment on attachment 314187 [details] [diff] [review]
Patch v2

>+#go-button:hover {
>+  -moz-image-region: rect(0px, 32px, 16px, 16px);  
>+}
>+
>+#go-button:active {

:hover:active here too.

>+#star-button[starred="true"][open="true"] {
>+  -moz-image-region: rect(16px, 48px, 32px, 32px);  
> }
> 

It never has that set....

r=mano otherwise.

Comment 9

[Kevin Gerich]

Thanks Mano. Checked in on trunk.

Comment 10

[Dave Townsend [:mossop]]

In landing this you seem to have overwritten the new images from bug 414567 with old versions

Comment 11

[cris]

This check-in causes again, color mismatch of tabbar and toolbar, when bookmark toolbar is disabled.

Comment 12

[cris]

(In reply to comment #11)
> This check-in causes again, color mismatch of tabbar and toolbar, when bookmark
> toolbar is disabled.
> 

especially wit keyhole, less obvious with small icons

Comment 13

[Henrik Skupin [:whimboo][⌚️UTC+1]]

The issues mentioned in the latest comments are addressed in their own bugs. So lets mark this one as verified due to no other notes.