771284 - Use light coloring for Mac OS X arrow panels

Status: RESOLVED FIXED

(Toolkit :: Themes, defect)

Description

[Chris Lee (:cleer)]

Attachment: Patch v1

Per dao's recommendation in https://bugzilla.mozilla.org/show_bug.cgi?id=767321, splitting up a large Mac OS X arrow panel patch into separate parts. This bug refers to the coloring of the panel, which is being changed from black "HUD" style to a lighter color similar to that seen in iCal, Safari, and Firefox for Windows.

The attached patch simply changes the background color and adds new arrow images. It seems like the Windows implementation uses SVG, so that should probably be updated. This patch doesn't touch button, dropdowns, or UI elements specific to certain panels like the downloads or bookmarks panels.

Comment 1

[Chris Lee (:cleer)]

Attachment: Patch v2

This version of the patch also changes the @hudButton@ style that is used exclusively in arrow panels. I'm not sure if it should go with this bug, so let me know if you think otherwise.

This is the also a change that affects arrow panels in general; other UI element styles are defined in specific arrow panels where they are used. This makes it a little tricky to make a global arrow panel UI element restyle without including lots of specific files.

Comment 2

[Chris Lee (:cleer)]

Attachment: iCal screenshot

Some of the panel (border-radius and background color) and button (essentially all of it) styling were influenced by the iCal/Safari/Quick Look Mac system styles. I checked this with Stephen and I think he seemed to think it made sense. We can continue to think about how closely to replicate OS X with this and how much to preserve consistency with Firefox on Windows/Linux.

If we go with replicating OS X, the ideal would be using the native system panels if at all possible: https://bugzilla.mozilla.org/show_bug.cgi?id=723061

dolske also sort of figured out how to mimic the OS X blurred translucency: http://cl.ly/3H2R0o0q201e1e0E1E1P

3:33:01 PM dolske: I just disabled the check at the top of nsCocoaWindow::SetUpWindowFilter so everything blurs.
3:33:34 PM dolske: for a real patch, you'd need to figure out how to make that code know it's <panel>

Comment 3

[u428464]

Not to forget there is also a "remember password" panel.

Comment 4

[Stefan [:stefanh]]

Chris,

When you set the review flag, you also need to set the reviewer (e-mail). The reviewer will then get an e-mail.

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

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

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

Frank, can you test this out on OS X? The CSS changes look fine to me.

Comment 6

[Dão Gottwald [:dao]]

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

The arrow image is lighter than the panel background. The colors need to match.

While you're at it, you could unify panelarrow-down.png and panelarrow-up.png to panelarrow-vertical.png and mirror the image like it's done for panelarrow-horiz.png.

You also need to adjust the popup-notification-menubutton styling and some bookmarks panel styles / resources that assume a dark background.

Comment 7

[Chris Lee (:cleer)]

The color difference is intentional and accounts for the header background in the mockup, which I can't implement without changing the XUL structure of each individual arrow panel. Changing the image will just mean changing it back to this color when that work is done.

Comment 8

[Chris Lee (:cleer)]

Also, the point of splitting up these bugs (which was done on your suggestion) was to keep separate components separate from the general arrow panel-wide patch. If we want to mix them in (which would be necessary for that consistency), that was the intent of the original patch that I already submitted in https://bugzilla.mozilla.org/show_bug.cgi?id=767321

Comment 9

[Dão Gottwald [:dao]]

(In reply to Chris Lee (:cleer) from comment #7)
> Changing the image will just mean changing it back to this color when that work is done.

That's fine. In the meantime we need to keep the styling in a ship-able shape, i.e. the colors need to match.

(In reply to Chris Lee (:cleer) from comment #8)
> Also, the point of splitting up these bugs (which was done on your
> suggestion) was to keep separate components separate from the general arrow
> panel-wide patch. If we want to mix them in (which would be necessary for
> that consistency), that was the intent of the original patch that I already
> submitted in https://bugzilla.mozilla.org/show_bug.cgi?id=767321

That patch does significantly more things than those needed for this bug.

Comment 10

[Chris Lee (:cleer)]

Attachment: Patch v3

Updated patch with some styling of the bookmarks and downloads panel (making them look somewhat consistent while not actually implementing what we want to implement eventually...) Also modified the arrow color and consolidated arrow images.

Where does "popup-notification-menubutton" appear?

Comment 11

[Dão Gottwald [:dao]]

(In reply to Chris Lee (:cleer) from comment #10)
> Where does "popup-notification-menubutton" appear?

In the geolocation prompt, for instance, or any other popup notification with secondary actions.

Comment 12

[Chris Lee (:cleer)]

Attachment: Patch v4

+ styling for generic popup notification (ex. geolocation) and dropdown arrow image

Comment 13

[u428464]

A very important bug in the previous implementation was the fact that the arrow didn't always indicate the center of the attached icon (e.g. In full screen mode or in maximized mode with the download button on the far right). It shouldn't be the case : the arrow should be centered in most possible case (there is always some cases where the identity globe is half out of the screen so unless there is a diagonal arrow implemented, the arrow won't be centered).

Comment 14

[u428464]

I just noticed that Google Chrome chooses to cut the panel if a part of it is off-screen. Firefox tries to always show it completely. Some thoughts about that.

Comment 15

[Dão Gottwald [:dao]]

Comment on attachment 640447 [details] [diff] [review]
Patch v4

>+#editBookmarkPanelGrid row {
>+  margin-bottom: 8px;
>+}
>+
>+#editBookmarkPanelGrid row:last-of-type {
>+  margin-bottom: 0;
>+}
>+
>+/**** Input elements ****/
>+
>+#editBookmarkPanel textbox {

Avoid the descendant selector.

>+  skin/classic/global/arrow/arrow-dn-panel.png                       (arrow/arrow-dn-panel.png)

We already have arrow-dn-sharp.gif, arrow-dn.gif and arrow-dn.png. Can you use or update one of these?

>-  skin/classic/global/arrow/panelarrow-up.png                        (arrow/panelarrow-up.png)
>-  skin/classic/global/arrow/panelarrow-down.png                      (arrow/panelarrow-down.png)
>   skin/classic/global/arrow/panelarrow-horiz.png                     (arrow/panelarrow-horiz.png)
>+  skin/classic/global/arrow/panelarrow-vert.png                      (arrow/panelarrow-vert.png)

s/vert/vertical/

Comment 16

[Chris Lee (:cleer)]

(In reply to Dão Gottwald [:dao] from comment #15)
the descendant selector.
> 
> >+  skin/classic/global/arrow/arrow-dn-panel.png                       (arrow/arrow-dn-panel.png)
> 
> We already have arrow-dn-sharp.gif, arrow-dn.gif and arrow-dn.png. Can you
> use or update one of these?
> 

These are different images used in different cases. Changing them probably alters another element that we don't want to alter.

> >-  skin/classic/global/arrow/panelarrow-up.png                        (arrow/panelarrow-up.png)
> >-  skin/classic/global/arrow/panelarrow-down.png                      (arrow/panelarrow-down.png)
> >   skin/classic/global/arrow/panelarrow-horiz.png                     (arrow/panelarrow-horiz.png)
> >+  skin/classic/global/arrow/panelarrow-vert.png                      (arrow/panelarrow-vert.png)
> 
> s/vert/vertical/

Why "horiz" and "vertical"?

Comment 17

[Chris Lee (:cleer)]

Attachment: Patch v5

Updated image names to panelarrow-horizontal.png and panelarrow-vertical.png to mirror winstripe/gnomestripe filenames. Using child selector instead of descendant selector in CSS.

Comment 18

[Chris Lee (:cleer)]

Comment on attachment 640748 [details] [diff] [review]
Patch v5

# HG changeset patch
# User Chris Lee <[e-mail]>
# Date 1341952017 25200
# Node ID dc75bb2b5e6bc6ef8de0e48b0b0c48a1daa71aea
# Parent  6d7fae9764b34ce5d6e25d19a1c86fbcfabbf829
Bug 771284 - Use light coloring for Mac OS X arrow panels

diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -1268,23 +1268,44 @@ window[tabsontop="false"] richlistitem[t
   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
 }
 
 #editBookmarkPanelTitle {
   font-size: 130%;
   font-weight: bold;
 }
 
+#editBMPanel_rows > row {
+  margin-bottom: 8px;
+}
+
+#editBMPanel_rows > row:last-of-type {
+  margin-bottom: 0;
+}
+
+/**** Input elements ****/
+
+#editBookmarkPanel textbox {
+  -moz-appearance: none;
+  background: -moz-linear-gradient(#fafafa, #fff);
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
+              0 1px rgba(255, 255, 255, 0.3);
+  margin: 0;
+  padding: 3px 6px;
+}
+
 /**** HUD style buttons ****/
 
 .editBookmarkPanelHeaderButton,
 .editBookmarkPanelBottomButton {
   @hudButton@
-  margin: 6px;
-  min-width: 79px;
+  margin: 0;
+  min-width: 82px;
   min-height: 22px;
 }
 
 .editBookmarkPanelHeaderButton:hover:active,
 .editBookmarkPanelBottomButton:hover:active {
   @hudButtonPressed@
 }
 
@@ -1296,35 +1317,37 @@ window[tabsontop="false"] richlistitem[t
 .editBookmarkPanelBottomButton[default="true"] {
   background-color: #666;
 }
 
 #editBookmarkPanelHeader {
   margin-bottom: 6px;
 }
 
+.editBookmarkPanelBottomButton:last-child {
+  -moz-margin-start: 8px;
+}
+
 /* The following elements come from editBookmarkOverlay.xul. Styling that's
    specific to the editBookmarkPanel should be in browser.css. Styling that
    should be shared by all editBookmarkOverlay.xul consumers should be in
    editBookmarkOverlay.css. */
 
 #editBMPanel_newFolderBox {
   background-image: -moz-linear-gradient(rgb(90,90,90), rgb(40,40,40));
   background-origin: padding-box;
   background-clip: padding-box;
   border-radius: 0 0 3px 3px;
   border: 1px solid rgba(0,0,0,.3);
   border-top: none;
   box-shadow: inset 0 -1px 2px rgba(0,0,0,.2),
               inset 0 1px 0 rgba(255,255,255,.15),
               0 1px 0 rgba(255,255,255,.15);
+  margin: 0;
   padding: 0;
-  margin-left: 4px;
-  margin-right: 4px;
-  margin-bottom: 8px;
   height:  20px;
 }
 
 #editBMPanel_newFolderButton {
   -moz-appearance: none;
   border: 0;
   -moz-border-end-width: 3px;
   border-style: solid;
@@ -1350,20 +1373,21 @@ window[tabsontop="false"] richlistitem[t
 }
 
 #editBMPanel_newFolderButton .button-text {
   display: none;
 }
 
 #editBMPanel_folderMenuList {
   @hudButton@
-  border-radius: 3px;
+  margin: 0;
   min-height: 22px;
-  -moz-padding-start: 4px;
-  -moz-padding-end: 0;
+  padding: 2px 4px 1px 8px;
+  -moz-padding-start: 8px;
+  -moz-padding-end: 4px;
 }
 
 #editBMPanel_folderMenuList:-moz-focusring {
   @hudButtonFocused@
 }
 
 #editBMPanel_folderMenuList[open="true"],
 #editBMPanel_folderMenuList:hover:active {
@@ -1375,30 +1399,31 @@ window[tabsontop="false"] richlistitem[t
   display: -moz-box;
   background-color: transparent;
   border: 0;
   margin: 0;
   padding: 0;
 }
 
 #editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon {
-  list-style-image: url("chrome://browser/skin/hud-style-dropmarker-double-arrows.png");
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-panel.png");
 }
 
 /**** folder tree ****/
 
 #editBMPanel_folderTree {
   -moz-appearance: none;
-  border-radius: 2px 2px 0 0;
-  background-color: rgba(50,50,50,.9);
-  border: 1px solid rgba(0,0,0,.3);
+  background: -moz-linear-gradient(#fafafa, #fff);
+  border-radius: 3px 3px 0 0;
+  border: 1px solid rgba(0, 0, 0, 0.3);
   border-bottom: none;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
-  color: #fff;
+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
+              0 1px rgba(255, 255, 255, 0.3);
   /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+  margin: 0 !important;
   min-width: 27em;
   position: relative;
 }
 
 #editBMPanel_folderTree:-moz-focusring {
   box-shadow: 0 0 4px 1px -moz-mac-focusring,
               0 0 2px 1px -moz-mac-focusring;
 }
@@ -1420,23 +1445,24 @@ window[tabsontop="false"] richlistitem[t
 }
 
 #editBMPanel_folderTree > treechildren::-moz-tree-twisty(selected, open) {
   -moz-image-region: rect(0px, 40px, 10px, 30px);
 }
 
 #editBMPanel_tagsSelector {
   -moz-appearance: none;
-  border-radius: 2px;
-  background-color: rgba(50,50,50,1);
-  border: 1px solid rgba(0,0,0,.3);
+  border-radius: 3px;
+  background: -moz-linear-gradient(#fafafa, #fff);
+  border-radius: 3px 3px 0 0;
+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
   border-bottom: none;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.15),
-              0 1px 0 rgba(255,255,255,.15);
-  color: #fff;
+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
+              0 1px rgba(255, 255, 255, 0.3);
+  margin: 0;
 }
 
 #editBMPanel_tagsSelector:-moz-focusring {
   @hudButtonFocused@
 }
 
 #editBMPanel_tagsSelector .listcell-check {
   -moz-appearance: none;
@@ -1474,23 +1500,21 @@ window[tabsontop="false"] richlistitem[t
   background-color: #b3b3b3;
 }
 
 /**** expanders ****/
 
 #editBookmarkPanel .expander-up,
 #editBookmarkPanel .expander-down {
   @hudButton@
-  border-radius: 3px;
   -moz-margin-start: 4px;
-  -moz-margin-end: 2px;
   padding: 0;
-  -moz-padding-start: 4px;
-  min-width: 10px;
-  min-height: 20px;
+  -moz-padding-start: 3px;
+  min-width: 26px;
+  min-height: 22px;
 }
 
 #editBookmarkPanel .expander-up:-moz-focusring,
 #editBookmarkPanel .expander-down:-moz-focusring {
   @hudButtonFocused@
 }
 
 #editBookmarkPanel .expander-up:hover:active,
@@ -1504,23 +1528,23 @@ window[tabsontop="false"] richlistitem[t
 
 #editBookmarkPanel .expander-down {
   list-style-image: url("chrome://browser/skin/hud-style-expander-closed.png");
 }
 
 #editBMPanel_tagsField {
   -moz-appearance: none !important;
   -moz-padding-start: 3px !important;
-  margin: 2px !important;
   border: 1px solid rgba(0,0,0,.5) !important;
   box-shadow: inset 0 1px 0 rgba(0,0,0,.3);
   background-color: #666 !important;
   background-clip: padding-box;
   background-origin: padding-box;
   color: #fff !important;
+  margin: 0;
   min-height: 20px;
 }
 
 #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:-moz-placeholder {
   color: #bbb;
 }
 
 #editBMPanel_tagsField[focused="true"] {
@@ -2307,20 +2331,24 @@ toolbarbutton.chevron > .toolbarbutton-m
 
 #geo-notification-icon {
   list-style-image: url(chrome://browser/skin/Geolocation-16.png);
 }
 
 .geolocation-text-link {
   color: #fff;
   -moz-margin-start: 0; /* override default label margin to match description margin */
+  color: #0073e6;
+  text-decoration: none;
 }
 
 .telemetry-text-link {
   color: #fff;
+  color: #0073e6;
+  text-decoration: none;
 }
 
 #addons-notification-icon {
   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
 }
 
 #password-notification-icon {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
diff --git a/browser/themes/pinstripe/downloads/buttons.png b/browser/themes/pinstripe/downloads/buttons.png
index 0fdb1b4c138eee18daf481dc503d24fb631bef57..0b5161ff01e345592da15d696a7f8de985f5db5d
GIT binary patch
literal 1669
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
P00000NkvXXu0mjf!Q?U<

diff --git a/browser/themes/pinstripe/downloads/downloads.css b/browser/themes/pinstripe/downloads/downloads.css
--- a/browser/themes/pinstripe/downloads/downloads.css
+++ b/browser/themes/pinstripe/downloads/downloads.css
@@ -74,17 +74,16 @@ richlistitem[type="download"]:last-child
 
 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
   outline: 1px #999 dotted;
   outline-offset: -1px;
   -moz-outline-radius: 3px;
 }
 
 .downloadInfo {
-  color: white;
   padding: 8px;
   -moz-padding-end: 0;
 }
 
 .downloadTypeIcon {
   -moz-margin-end: 8px;
   /* Prevent flickering when changing states. */
   min-height: 32px;
diff --git a/browser/themes/pinstripe/hud-style-expander-closed.png b/browser/themes/pinstripe/hud-style-expander-closed.png
index 25219fea2257b75ec400cd71c2c98d9ce4f15fba..f0e97b22e161028728a92d5032d7ecd6cfc343f0
GIT binary patch
literal 155
zc%17D@N?(olHy`uVBq!ia0vp^oIuRR!2%?ApR4f$Qc0dJjv*Y;$rsjK+_`?{IR>^_
znhs^WhwGmnaJ@Et>t6|pEq~YOvFrU>&oiZZ<?HRI9xka|_1E+NQ~lC|r~VtqZu}7Y
zeDnSMtI3c5`v@pY{M#&3^fA8blAInx*vWtQAJ}WVurjcyE8g{&{{97M8-u5-pUXO@
GgeCwu-9MiI

diff --git a/browser/themes/pinstripe/hud-style-expander-open.png b/browser/themes/pinstripe/hud-style-expander-open.png
index 168b53a5e8b9bba12051917b323ad64222ace4ca..e3febf4ffb85360ef5245b5563c3799f4b7da59f
GIT binary patch
literal 155
zc%17D@N?(olHy`uVBq!ia0vp^oIuRR!2%?ApR4f$Qc0dJjv*Yf$q5Y1yqsq%r49+0
z&A9T!^yZs_gB87M>>&Z&S5x+#-uOsu`D3@sTOtlN9h3EQm*)C++FZm!&iEAz*URUT
zb57*{&_8$JL%hxYgO6J3<PO&_{m=LRsY2SH>CBs^GU%GfIbJqe_5f%bgQu&X%Q~lo
FCICvgI_dxb

diff --git a/browser/themes/pinstripe/shared.inc b/browser/themes/pinstripe/shared.inc
--- a/browser/themes/pinstripe/shared.inc
+++ b/browser/themes/pinstripe/shared.inc
@@ -1,6 +1,6 @@
 %include ../../../toolkit/themes/pinstripe/global/shared.inc
 %include ../browserShared.inc
 
-%define hudButton -moz-appearance: none; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); border-radius: 12px; border: 1px solid rgba(0,0,0,.65); background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%, rgba(50,50,50,.9) 51%, rgba(40,40,40,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); background-clip: padding-box; background-origin: padding-box; padding: 2px 9px;
-%define hudButtonPressed background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9)); box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
+%define hudButton -moz-appearance: none; color: #434343; border-radius: 4px; border: 1px solid #b5b5b5; background: -moz-linear-gradient(#fff, #f2f2f2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), inset 0 0 1px rgba(255, 255, 255, 0.25), 0 1px rgba(255, 255, 255, 0.3); background-clip: padding-box; background-origin: padding-box; padding: 2px 6px;
+%define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
 %define hudButtonFocused box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
diff --git a/toolkit/themes/pinstripe/global/arrow/arrow-dn-panel.png b/toolkit/themes/pinstripe/global/arrow/arrow-dn-panel.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0a9c837836a7b6803bf11b91c664130fa810d26
GIT binary patch
literal 1083
zc$}3}&r1|h9AD5hBu`<OmtJFmQM>cr?9R;2;3n(NZZ5cH>q2{MoO!O3&b--~XS*60
z)Fn@LjPPLpfY7O+Lq#486hk^hBuE5y3yNyVir%Pe5+U@3H}8GFd_UjsXTCpX1_v&*
zwsf?FLZQ}dpO$BLGdqV4H?i-`y|1s?b)2S)bcl@5itgc1(j>zeWNp2K^H?`0%P(+u
zDAZ823PoDX^{WQ4BYNNysoHKRknWzUs~cmOf?-^;oCNpr@e>YMW`esc=3vfE;Zdt^
z%ELob0|jGh%ur0O=RD}Hsw{wwsSc|4xZ|tU1h*YmW$(bub70$rjwQGqQpMaLND&VM
zF#^K|lpv5$1Vv-AET01cM39F9kAyIi)u^CC2zG^I**tSZ&1;$6Tue)Fqm;TT&sQpy
zNF^E}UWrGFq69GnA<R6&{-i_oYS{5R>k%~U8=mD-i#Q<A^<gqW6C79n1>4Q#_5wTp
zZlPGo_^R&mC<1xg=Ih=*&Et`Sz5T+Zi}^hE$%JRHevEYPOLZ_baAa)Mi=M@rqK|9D
zn6R-!vs!|alyqE4X`+~tqiHCKk|e{7n2{ABu4G_JsblwJm?dIbriwI8ff|&0<A_Nb
zDPl(Gm7$1GQbCdyt7Ef{Pj$z@b*%LVD;|hdQy$hS@d|{D*E>HrN+|J1i3?Ig66nh5
zhUEl?GeKi^xnj?{hRuveY_MHf)%phmD8wN`atz7>lo*S+AS9D=uYh85Oo}EMgB`5-
zKh@$H3I4C~sGHc#1<$=<XUg8XV2AC9$ClxGSF)Wg(qvXk7OHQCU#+cO)k~$>jg5`k
z%F<Hp#NqZEKWfjuf8JbeTYl)QPfdS#d9rPKdioeb4`%1)=6V_%8yCpiN9C5Icgn`Q
z#hLZ~{{GcpKexU$Yqx5k+%%8CGX3;EyEQ*Qe;RZwHqSgimAu<_`^)`U@d$VtI=hm)
TG_={>5Ug`HJ)kZ0Ub*=j`dDC<

diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-down.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-down.png
deleted file mode 100644
Binary file toolkit/themes/pinstripe/global/arrow/panelarrow-down.png has changed
diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-horiz.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-horiz.png
deleted file mode 100644
Binary file toolkit/themes/pinstripe/global/arrow/panelarrow-horiz.png has changed
diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-horizontal.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-horizontal.png
new file mode 100644
index 0000000000000000000000000000000000000000..5050ec169f1076a0495a50aead1dc2141e86078d
GIT binary patch
literal 200
zc%17D@N?(olHy`uVBq!ia0vp^0zj<J!3HGRdQOx8seVrv$B>F!Z?A6TJ**(X`q0P8
zEU96Q(__v}E>k`>aNWB9G&GM-Wa);b;gR1tIlb##j$F!1U|uk9%B9y9efkX@$0aUC
zbuZm<O-kFap@T8zObQU{Jq|kc+$zlo47m*t7(f3ruh{MV-0Aym8Xe5;H#wNqcM361
u;An7RP+?LKWawq6U^$@h{r%tg24VKuxmu#z{?!1T#^CAd=d#Wzp$P!P>r1Qv

diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-up.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-up.png
deleted file mode 100644
Binary file toolkit/themes/pinstripe/global/arrow/panelarrow-up.png has changed
diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-vertical.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-vertical.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea4fb2d0f44ab775e09dd2948caaca58811a2c76
GIT binary patch
literal 213
zc%17D@N?(olHy`uVBq!ia0vp^>Od^O!3HF!-bqscQgb|A978H@9X+>^_kaQq%K;xJ
zv!sSKPKQ|{l}=SSu&!0UK4H%z_d}OnKRxs*SIMZSu<Y>J)rnH)EXyn2`@cQ9Lr%<T
zM^yHrwZENW_*ZZB(sbRzSYXC?xai!Zpi68Ha_LQ(1{03YOq4kBm?MI}$MBx)gad*G
zEKdqqc$h0?+5#Q8+7oRi97>en-|~PVNAH6<-+^UJjCnFVj~nCv%WJyiYR$ancn9cC
N22WQ%mvv4FO#sCPPyYY_

diff --git a/toolkit/themes/pinstripe/global/jar.mn b/toolkit/themes/pinstripe/global/jar.mn
--- a/toolkit/themes/pinstripe/global/jar.mn
+++ b/toolkit/themes/pinstripe/global/jar.mn
@@ -56,16 +56,17 @@ toolkit.jar:
   skin/classic/global/toolbarbutton.css
   skin/classic/global/TopLevelImageDocument.css
   skin/classic/global/TopLevelVideoDocument.css
 * skin/classic/global/tree.css
 * skin/classic/global/viewbuttons.css
   skin/classic/global/wizard.css
   skin/classic/global/arrow/arrow-dn-dis.gif                         (arrow/arrow-dn-dis.gif)
   skin/classic/global/arrow/arrow-dn-dis.png                         (arrow/arrow-dn-dis.png)
+  skin/classic/global/arrow/arrow-dn-panel.png                       (arrow/arrow-dn-panel.png)
   skin/classic/global/arrow/arrow-dn-sharp.gif                       (arrow/arrow-dn-sharp.gif)
   skin/classic/global/arrow/arrow-dn-white.png                       (arrow/arrow-dn-white.png)
   skin/classic/global/arrow/arrow-dn.gif                             (arrow/arrow-dn.gif)
   skin/classic/global/arrow/arrow-dn.png                             (arrow/arrow-dn.png)
   skin/classic/global/arrow/arrow-lft-dis.gif                        (arrow/arrow-lft-dis.gif)
   skin/classic/global/arrow/arrow-lft-hov.gif                        (arrow/arrow-lft-hov.gif)
   skin/classic/global/arrow/arrow-lft-sharp-end.gif                  (arrow/arrow-lft-sharp-end.gif)
   skin/classic/global/arrow/arrow-lft-sharp.gif                      (arrow/arrow-lft-sharp.gif)
@@ -73,19 +74,18 @@ toolkit.jar:
   skin/classic/global/arrow/arrow-rit-dis.gif                        (arrow/arrow-rit-dis.gif)
   skin/classic/global/arrow/arrow-rit-hov.gif                        (arrow/arrow-rit-hov.gif)
   skin/classic/global/arrow/arrow-rit-sharp-end.gif                  (arrow/arrow-rit-sharp-end.gif)
   skin/classic/global/arrow/arrow-rit-sharp.gif                      (arrow/arrow-rit-sharp.gif)
   skin/classic/global/arrow/arrow-rit.gif                            (arrow/arrow-rit.gif)
   skin/classic/global/arrow/arrow-up-dis.gif                         (arrow/arrow-up-dis.gif)
   skin/classic/global/arrow/arrow-up-sharp.gif                       (arrow/arrow-up-sharp.gif)
   skin/classic/global/arrow/arrow-up.gif                             (arrow/arrow-up.gif)
-  skin/classic/global/arrow/panelarrow-up.png                        (arrow/panelarrow-up.png)
-  skin/classic/global/arrow/panelarrow-down.png                      (arrow/panelarrow-down.png)
-  skin/classic/global/arrow/panelarrow-horiz.png                     (arrow/panelarrow-horiz.png)
+  skin/classic/global/arrow/panelarrow-horizontal.png                (arrow/panelarrow-horizontal.png)
+  skin/classic/global/arrow/panelarrow-vertical.png                  (arrow/panelarrow-vertical.png)
   skin/classic/global/checkbox/cbox-check.gif                        (checkbox/cbox-check.gif)
   skin/classic/global/checkbox/cbox-check-dis.gif                    (checkbox/cbox-check-dis.gif)
   skin/classic/global/console/console-error-caret.gif                (console/console-error-caret.gif)
   skin/classic/global/console/console-error-dash.gif                 (console/console-error-dash.gif)
 * skin/classic/global/console/console.css                            (console/console.css)
   skin/classic/global/dirListing/dirListing.css                      (dirListing/dirListing.css)
   skin/classic/global/dirListing/folder.png                          (dirListing/folder.png)
   skin/classic/global/dirListing/local.png                           (dirListing/folder.png)
diff --git a/toolkit/themes/pinstripe/global/notification.css b/toolkit/themes/pinstripe/global/notification.css
--- a/toolkit/themes/pinstripe/global/notification.css
+++ b/toolkit/themes/pinstripe/global/notification.css
@@ -110,27 +110,27 @@ notification[type="warning"] .messageClo
 .popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
   box-shadow: @focusRingShadow@;
   position: relative;
 }
 
 .popup-notification-menubutton:not([type="menu-button"]),
 .popup-notification-menubutton > .button-menubutton-button,
 .popup-notification-menubutton > .button-menubutton-dropmarker {
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
-  border-radius: 12px;
-  border: 1px solid rgba(0,0,0,.65);
-  background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%,
-                                   rgba(50,50,50,.9) 51%, rgba(40,40,40,.9));
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
-              inset 0 0 1px rgba(255,255,255,.1),
-              0 1px 0 rgba(255,255,255,.1);
+  -moz-appearance: none;
+  color: #434343;
+  border-radius: 4px;
+  border: 1px solid #b5b5b5;
+  background: -moz-linear-gradient(#fff, #f2f2f2);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8),
+             inset 0 0 1px rgba(255, 255, 255, 0.25),
+             0 1px rgba(255, 255, 255, 0.3);
   background-clip: padding-box;
   background-origin: padding-box;
+  padding: 2px 6px;
 }
 
 .popup-notification-menubutton:not([type="menu-button"]) {
   padding: 2px 9px;
 }
 
 .popup-notification-menubutton > .button-menubutton-button {
   -moz-appearance: none;
@@ -145,17 +145,17 @@ notification[type="warning"] .messageClo
 .popup-notification-menubutton > .button-menubutton-dropmarker {
   padding-top: 7px;
   padding-bottom: 7px;
   -moz-padding-start: 5px;
   -moz-padding-end: 8px;
   margin-top: 0;
   margin-bottom: 0;
   -moz-margin-start: -1px;
-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-white.png");
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-panel.png");
 }
 
 .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
 .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
@@ -163,20 +163,17 @@ notification[type="warning"] .messageClo
 .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 .popup-notification-menubutton:not([type="menu-button"]):hover:active,
 .popup-notification-menubutton > .button-menubutton-button:hover:active,
 .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
-  background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
-  box-shadow: inset 0 0 3px rgba(0,0,0,.2),
-              inset 0 1px 7px rgba(0,0,0,.4),
-              0 1px 0 rgba(255,255,255,.1);
+  box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
 }
 
 .popup-notification-closebutton {
   -moz-margin-end: -12px;
   margin-top: -13px;
 }
 
 .popup-notification-closeitem > .menu-iconic-left {
diff --git a/toolkit/themes/pinstripe/global/popup.css b/toolkit/themes/pinstripe/global/popup.css
--- a/toolkit/themes/pinstripe/global/popup.css
+++ b/toolkit/themes/pinstripe/global/popup.css
@@ -47,53 +47,50 @@ panel[type="arrow"][side="bottom"] {
 panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-top: -26px;
   margin-bottom: -26px;
 }
 
 .panel-arrowcontent {
   -moz-appearance: none;
-  color: white;
-  background: -moz-linear-gradient(rgba(85,85,85,1), rgba(75,75,75,.97) 5px, rgba(58,58,58,.97) 17px, rgba(43,43,43,.97) 40px, rgba(40,40,40,.97) 80px, rgba(40,40,40,.97));
-  border-radius: 6px;
-  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset,
+  background: #ededed;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset,
               0 1px 0 rgba(255,255,255,.05) inset,
               0 0 0 1px rgba(0,0,0,.25);
+  color: #666;
   padding: 16px;
   margin: 1px;
 }
 
-.panel-arrow {
-  opacity: 0.97;
-}
-
 .panel-arrow[side="top"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.png");
   margin-left: 6px;
   margin-right: 6px;
   margin-bottom: -2px;
 }
 
 .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.png");
+  -moz-transform: scaleY(-1);
   margin-left: 6px;
   margin-right: 6px;
   margin-top: -2px;
 }
 
 .panel-arrow[side="left"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.png");
   margin-top: 6px;
   margin-bottom: 6px;
   margin-right: -2px;
 }
 
 .panel-arrow[side="right"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.png");
   -moz-transform: scaleX(-1);
   margin-top: 6px;
   margin-bottom: 6px;
   margin-left: -2px;
 }
 
 /* ::::: tooltip ::::: */

Comment 19

[Chris Lee (:cleer)]

Oops. Sorry, don't know how to use all the Bugzilla functionality.

Comment 20

[Chris Lee (:cleer)]

Attachment: Patch v5.1

Previous patch accidentally didn't include image files. Otherwise the same. Sorry about the spam.

Comment 21

[Chris Lee (:cleer)]

Comment on attachment 640756 [details] [diff] [review]
Patch v5.1

># HG changeset patch
># User Chris Lee <[e-mail]>
># Date 1341952017 25200
># Node ID dc75bb2b5e6bc6ef8de0e48b0b0c48a1daa71aea
># Parent  6d7fae9764b34ce5d6e25d19a1c86fbcfabbf829
>Bug 771284 - Use light coloring for Mac OS X arrow panels
>
>diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css
>--- a/browser/themes/pinstripe/browser.css
>+++ b/browser/themes/pinstripe/browser.css
>@@ -1268,23 +1268,44 @@ window[tabsontop="false"] richlistitem[t
>   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
> }
> 
> #editBookmarkPanelTitle {
>   font-size: 130%;
>   font-weight: bold;
> }
> 
>+#editBMPanel_rows > row {
>+  margin-bottom: 8px;
>+}
>+
>+#editBMPanel_rows > row:last-of-type {
>+  margin-bottom: 0;
>+}
>+
>+/**** Input elements ****/
>+
>+#editBookmarkPanel textbox {
>+  -moz-appearance: none;
>+  background: -moz-linear-gradient(#fafafa, #fff);
>+  border-radius: 3px;
>+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
>+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
>+              0 1px rgba(255, 255, 255, 0.3);
>+  margin: 0;
>+  padding: 3px 6px;
>+}
>+
> /**** HUD style buttons ****/
> 
> .editBookmarkPanelHeaderButton,
> .editBookmarkPanelBottomButton {
>   @hudButton@
>-  margin: 6px;
>-  min-width: 79px;
>+  margin: 0;
>+  min-width: 82px;
>   min-height: 22px;
> }
> 
> .editBookmarkPanelHeaderButton:hover:active,
> .editBookmarkPanelBottomButton:hover:active {
>   @hudButtonPressed@
> }
> 
>@@ -1296,35 +1317,37 @@ window[tabsontop="false"] richlistitem[t
> .editBookmarkPanelBottomButton[default="true"] {
>   background-color: #666;
> }
> 
> #editBookmarkPanelHeader {
>   margin-bottom: 6px;
> }
> 
>+.editBookmarkPanelBottomButton:last-child {
>+  -moz-margin-start: 8px;
>+}
>+
> /* The following elements come from editBookmarkOverlay.xul. Styling that's
>    specific to the editBookmarkPanel should be in browser.css. Styling that
>    should be shared by all editBookmarkOverlay.xul consumers should be in
>    editBookmarkOverlay.css. */
> 
> #editBMPanel_newFolderBox {
>   background-image: -moz-linear-gradient(rgb(90,90,90), rgb(40,40,40));
>   background-origin: padding-box;
>   background-clip: padding-box;
>   border-radius: 0 0 3px 3px;
>   border: 1px solid rgba(0,0,0,.3);
>   border-top: none;
>   box-shadow: inset 0 -1px 2px rgba(0,0,0,.2),
>               inset 0 1px 0 rgba(255,255,255,.15),
>               0 1px 0 rgba(255,255,255,.15);
>+  margin: 0;
>   padding: 0;
>-  margin-left: 4px;
>-  margin-right: 4px;
>-  margin-bottom: 8px;
>   height:  20px;
> }
> 
> #editBMPanel_newFolderButton {
>   -moz-appearance: none;
>   border: 0;
>   -moz-border-end-width: 3px;
>   border-style: solid;
>@@ -1350,20 +1373,21 @@ window[tabsontop="false"] richlistitem[t
> }
> 
> #editBMPanel_newFolderButton .button-text {
>   display: none;
> }
> 
> #editBMPanel_folderMenuList {
>   @hudButton@
>-  border-radius: 3px;
>+  margin: 0;
>   min-height: 22px;
>-  -moz-padding-start: 4px;
>-  -moz-padding-end: 0;
>+  padding: 2px 4px 1px 8px;
>+  -moz-padding-start: 8px;
>+  -moz-padding-end: 4px;
> }
> 
> #editBMPanel_folderMenuList:-moz-focusring {
>   @hudButtonFocused@
> }
> 
> #editBMPanel_folderMenuList[open="true"],
> #editBMPanel_folderMenuList:hover:active {
>@@ -1375,30 +1399,31 @@ window[tabsontop="false"] richlistitem[t
>   display: -moz-box;
>   background-color: transparent;
>   border: 0;
>   margin: 0;
>   padding: 0;
> }
> 
> #editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon {
>-  list-style-image: url("chrome://browser/skin/hud-style-dropmarker-double-arrows.png");
>+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-panel.png");
> }
> 
> /**** folder tree ****/
> 
> #editBMPanel_folderTree {
>   -moz-appearance: none;
>-  border-radius: 2px 2px 0 0;
>-  background-color: rgba(50,50,50,.9);
>-  border: 1px solid rgba(0,0,0,.3);
>+  background: -moz-linear-gradient(#fafafa, #fff);
>+  border-radius: 3px 3px 0 0;
>+  border: 1px solid rgba(0, 0, 0, 0.3);
>   border-bottom: none;
>-  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
>-  color: #fff;
>+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
>+              0 1px rgba(255, 255, 255, 0.3);
>   /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
>+  margin: 0 !important;
>   min-width: 27em;
>   position: relative;
> }
> 
> #editBMPanel_folderTree:-moz-focusring {
>   box-shadow: 0 0 4px 1px -moz-mac-focusring,
>               0 0 2px 1px -moz-mac-focusring;
> }
>@@ -1420,23 +1445,24 @@ window[tabsontop="false"] richlistitem[t
> }
> 
> #editBMPanel_folderTree > treechildren::-moz-tree-twisty(selected, open) {
>   -moz-image-region: rect(0px, 40px, 10px, 30px);
> }
> 
> #editBMPanel_tagsSelector {
>   -moz-appearance: none;
>-  border-radius: 2px;
>-  background-color: rgba(50,50,50,1);
>-  border: 1px solid rgba(0,0,0,.3);
>+  border-radius: 3px;
>+  background: -moz-linear-gradient(#fafafa, #fff);
>+  border-radius: 3px 3px 0 0;
>+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
>   border-bottom: none;
>-  box-shadow: inset 0 1px 2px rgba(0,0,0,.15),
>-              0 1px 0 rgba(255,255,255,.15);
>-  color: #fff;
>+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
>+              0 1px rgba(255, 255, 255, 0.3);
>+  margin: 0;
> }
> 
> #editBMPanel_tagsSelector:-moz-focusring {
>   @hudButtonFocused@
> }
> 
> #editBMPanel_tagsSelector .listcell-check {
>   -moz-appearance: none;
>@@ -1474,23 +1500,21 @@ window[tabsontop="false"] richlistitem[t
>   background-color: #b3b3b3;
> }
> 
> /**** expanders ****/
> 
> #editBookmarkPanel .expander-up,
> #editBookmarkPanel .expander-down {
>   @hudButton@
>-  border-radius: 3px;
>   -moz-margin-start: 4px;
>-  -moz-margin-end: 2px;
>   padding: 0;
>-  -moz-padding-start: 4px;
>-  min-width: 10px;
>-  min-height: 20px;
>+  -moz-padding-start: 3px;
>+  min-width: 26px;
>+  min-height: 22px;
> }
> 
> #editBookmarkPanel .expander-up:-moz-focusring,
> #editBookmarkPanel .expander-down:-moz-focusring {
>   @hudButtonFocused@
> }
> 
> #editBookmarkPanel .expander-up:hover:active,
>@@ -1504,23 +1528,23 @@ window[tabsontop="false"] richlistitem[t
> 
> #editBookmarkPanel .expander-down {
>   list-style-image: url("chrome://browser/skin/hud-style-expander-closed.png");
> }
> 
> #editBMPanel_tagsField {
>   -moz-appearance: none !important;
>   -moz-padding-start: 3px !important;
>-  margin: 2px !important;
>   border: 1px solid rgba(0,0,0,.5) !important;
>   box-shadow: inset 0 1px 0 rgba(0,0,0,.3);
>   background-color: #666 !important;
>   background-clip: padding-box;
>   background-origin: padding-box;
>   color: #fff !important;
>+  margin: 0;
>   min-height: 20px;
> }
> 
> #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:-moz-placeholder {
>   color: #bbb;
> }
> 
> #editBMPanel_tagsField[focused="true"] {
>@@ -2307,20 +2331,24 @@ toolbarbutton.chevron > .toolbarbutton-m
> 
> #geo-notification-icon {
>   list-style-image: url(chrome://browser/skin/Geolocation-16.png);
> }
> 
> .geolocation-text-link {
>   color: #fff;
>   -moz-margin-start: 0; /* override default label margin to match description margin */
>+  color: #0073e6;
>+  text-decoration: none;
> }
> 
> .telemetry-text-link {
>   color: #fff;
>+  color: #0073e6;
>+  text-decoration: none;
> }
> 
> #addons-notification-icon {
>   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
> }
> 
> #password-notification-icon {
>   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
>diff --git a/browser/themes/pinstripe/downloads/buttons.png b/browser/themes/pinstripe/downloads/buttons.png
>index 0fdb1b4c138eee18daf481dc503d24fb631bef57..0b5161ff01e345592da15d696a7f8de985f5db5d
>GIT binary patch
>literal 1669
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
>P00000NkvXXu0mjf!Q?U<
>
>diff --git a/browser/themes/pinstripe/downloads/downloads.css b/browser/themes/pinstripe/downloads/downloads.css
>--- a/browser/themes/pinstripe/downloads/downloads.css
>+++ b/browser/themes/pinstripe/downloads/downloads.css
>@@ -74,17 +74,16 @@ richlistitem[type="download"]:last-child
> 
> #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
>   outline: 1px #999 dotted;
>   outline-offset: -1px;
>   -moz-outline-radius: 3px;
> }
> 
> .downloadInfo {
>-  color: white;
>   padding: 8px;
>   -moz-padding-end: 0;
> }
> 
> .downloadTypeIcon {
>   -moz-margin-end: 8px;
>   /* Prevent flickering when changing states. */
>   min-height: 32px;
>diff --git a/browser/themes/pinstripe/hud-style-expander-closed.png b/browser/themes/pinstripe/hud-style-expander-closed.png
>index 25219fea2257b75ec400cd71c2c98d9ce4f15fba..f0e97b22e161028728a92d5032d7ecd6cfc343f0
>GIT binary patch
>literal 155
>zc%17D@N?(olHy`uVBq!ia0vp^oIuRR!2%?ApR4f$Qc0dJjv*Y;$rsjK+_`?{IR>^_
>znhs^WhwGmnaJ@Et>t6|pEq~YOvFrU>&oiZZ<?HRI9xka|_1E+NQ~lC|r~VtqZu}7Y
>zeDnSMtI3c5`v@pY{M#&3^fA8blAInx*vWtQAJ}WVurjcyE8g{&{{97M8-u5-pUXO@
>GgeCwu-9MiI
>
>diff --git a/browser/themes/pinstripe/hud-style-expander-open.png b/browser/themes/pinstripe/hud-style-expander-open.png
>index 168b53a5e8b9bba12051917b323ad64222ace4ca..e3febf4ffb85360ef5245b5563c3799f4b7da59f
>GIT binary patch
>literal 155
>zc%17D@N?(olHy`uVBq!ia0vp^oIuRR!2%?ApR4f$Qc0dJjv*Yf$q5Y1yqsq%r49+0
>z&A9T!^yZs_gB87M>>&Z&S5x+#-uOsu`D3@sTOtlN9h3EQm*)C++FZm!&iEAz*URUT
>zb57*{&_8$JL%hxYgO6J3<PO&_{m=LRsY2SH>CBs^GU%GfIbJqe_5f%bgQu&X%Q~lo
>FCICvgI_dxb
>
>diff --git a/browser/themes/pinstripe/shared.inc b/browser/themes/pinstripe/shared.inc
>--- a/browser/themes/pinstripe/shared.inc
>+++ b/browser/themes/pinstripe/shared.inc
>@@ -1,6 +1,6 @@
> %include ../../../toolkit/themes/pinstripe/global/shared.inc
> %include ../browserShared.inc
> 
>-%define hudButton -moz-appearance: none; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); border-radius: 12px; border: 1px solid rgba(0,0,0,.65); background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%, rgba(50,50,50,.9) 51%, rgba(40,40,40,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); background-clip: padding-box; background-origin: padding-box; padding: 2px 9px;
>-%define hudButtonPressed background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9)); box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
>+%define hudButton -moz-appearance: none; color: #434343; border-radius: 4px; border: 1px solid #b5b5b5; background: -moz-linear-gradient(#fff, #f2f2f2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), inset 0 0 1px rgba(255, 255, 255, 0.25), 0 1px rgba(255, 255, 255, 0.3); background-clip: padding-box; background-origin: padding-box; padding: 2px 6px;
>+%define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
> %define hudButtonFocused box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
>diff --git a/toolkit/themes/pinstripe/global/arrow/arrow-dn-panel.png b/toolkit/themes/pinstripe/global/arrow/arrow-dn-panel.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..b0a9c837836a7b6803bf11b91c664130fa810d26
>GIT binary patch
>literal 1083
>zc$}3}&r1|h9AD5hBu`<OmtJFmQM>cr?9R;2;3n(NZZ5cH>q2{MoO!O3&b--~XS*60
>z)Fn@LjPPLpfY7O+Lq#486hk^hBuE5y3yNyVir%Pe5+U@3H}8GFd_UjsXTCpX1_v&*
>zwsf?FLZQ}dpO$BLGdqV4H?i-`y|1s?b)2S)bcl@5itgc1(j>zeWNp2K^H?`0%P(+u
>zDAZ823PoDX^{WQ4BYNNysoHKRknWzUs~cmOf?-^;oCNpr@e>YMW`esc=3vfE;Zdt^
>z%ELob0|jGh%ur0O=RD}Hsw{wwsSc|4xZ|tU1h*YmW$(bub70$rjwQGqQpMaLND&VM
>zF#^K|lpv5$1Vv-AET01cM39F9kAyIi)u^CC2zG^I**tSZ&1;$6Tue)Fqm;TT&sQpy
>zNF^E}UWrGFq69GnA<R6&{-i_oYS{5R>k%~U8=mD-i#Q<A^<gqW6C79n1>4Q#_5wTp
>zZlPGo_^R&mC<1xg=Ih=*&Et`Sz5T+Zi}^hE$%JRHevEYPOLZ_baAa)Mi=M@rqK|9D
>zn6R-!vs!|alyqE4X`+~tqiHCKk|e{7n2{ABu4G_JsblwJm?dIbriwI8ff|&0<A_Nb
>zDPl(Gm7$1GQbCdyt7Ef{Pj$z@b*%LVD;|hdQy$hS@d|{D*E>HrN+|J1i3?Ig66nh5
>zhUEl?GeKi^xnj?{hRuveY_MHf)%phmD8wN`atz7>lo*S+AS9D=uYh85Oo}EMgB`5-
>zKh@$H3I4C~sGHc#1<$=<XUg8XV2AC9$ClxGSF)Wg(qvXk7OHQCU#+cO)k~$>jg5`k
>z%F<Hp#NqZEKWfjuf8JbeTYl)QPfdS#d9rPKdioeb4`%1)=6V_%8yCpiN9C5Icgn`Q
>z#hLZ~{{GcpKexU$Yqx5k+%%8CGX3;EyEQ*Qe;RZwHqSgimAu<_`^)`U@d$VtI=hm)
>TG_={>5Ug`HJ)kZ0Ub*=j`dDC<
>
>diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-down.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-down.png
>deleted file mode 100644
>Binary file toolkit/themes/pinstripe/global/arrow/panelarrow-down.png has changed
>diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-horiz.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-horiz.png
>deleted file mode 100644
>Binary file toolkit/themes/pinstripe/global/arrow/panelarrow-horiz.png has changed
>diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-horizontal.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-horizontal.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..5050ec169f1076a0495a50aead1dc2141e86078d
>GIT binary patch
>literal 200
>zc%17D@N?(olHy`uVBq!ia0vp^0zj<J!3HGRdQOx8seVrv$B>F!Z?A6TJ**(X`q0P8
>zEU96Q(__v}E>k`>aNWB9G&GM-Wa);b;gR1tIlb##j$F!1U|uk9%B9y9efkX@$0aUC
>zbuZm<O-kFap@T8zObQU{Jq|kc+$zlo47m*t7(f3ruh{MV-0Aym8Xe5;H#wNqcM361
>u;An7RP+?LKWawq6U^$@h{r%tg24VKuxmu#z{?!1T#^CAd=d#Wzp$P!P>r1Qv
>
>diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-up.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-up.png
>deleted file mode 100644
>Binary file toolkit/themes/pinstripe/global/arrow/panelarrow-up.png has changed
>diff --git a/toolkit/themes/pinstripe/global/arrow/panelarrow-vertical.png b/toolkit/themes/pinstripe/global/arrow/panelarrow-vertical.png
>new file mode 100644
>index 0000000000000000000000000000000000000000..ea4fb2d0f44ab775e09dd2948caaca58811a2c76
>GIT binary patch
>literal 213
>zc%17D@N?(olHy`uVBq!ia0vp^>Od^O!3HF!-bqscQgb|A978H@9X+>^_kaQq%K;xJ
>zv!sSKPKQ|{l}=SSu&!0UK4H%z_d}OnKRxs*SIMZSu<Y>J)rnH)EXyn2`@cQ9Lr%<T
>zM^yHrwZENW_*ZZB(sbRzSYXC?xai!Zpi68Ha_LQ(1{03YOq4kBm?MI}$MBx)gad*G
>zEKdqqc$h0?+5#Q8+7oRi97>en-|~PVNAH6<-+^UJjCnFVj~nCv%WJyiYR$ancn9cC
>N22WQ%mvv4FO#sCPPyYY_
>
>diff --git a/toolkit/themes/pinstripe/global/jar.mn b/toolkit/themes/pinstripe/global/jar.mn
>--- a/toolkit/themes/pinstripe/global/jar.mn
>+++ b/toolkit/themes/pinstripe/global/jar.mn
>@@ -56,16 +56,17 @@ toolkit.jar:
>   skin/classic/global/toolbarbutton.css
>   skin/classic/global/TopLevelImageDocument.css
>   skin/classic/global/TopLevelVideoDocument.css
> * skin/classic/global/tree.css
> * skin/classic/global/viewbuttons.css
>   skin/classic/global/wizard.css
>   skin/classic/global/arrow/arrow-dn-dis.gif                         (arrow/arrow-dn-dis.gif)
>   skin/classic/global/arrow/arrow-dn-dis.png                         (arrow/arrow-dn-dis.png)
>+  skin/classic/global/arrow/arrow-dn-panel.png                       (arrow/arrow-dn-panel.png)
>   skin/classic/global/arrow/arrow-dn-sharp.gif                       (arrow/arrow-dn-sharp.gif)
>   skin/classic/global/arrow/arrow-dn-white.png                       (arrow/arrow-dn-white.png)
>   skin/classic/global/arrow/arrow-dn.gif                             (arrow/arrow-dn.gif)
>   skin/classic/global/arrow/arrow-dn.png                             (arrow/arrow-dn.png)
>   skin/classic/global/arrow/arrow-lft-dis.gif                        (arrow/arrow-lft-dis.gif)
>   skin/classic/global/arrow/arrow-lft-hov.gif                        (arrow/arrow-lft-hov.gif)
>   skin/classic/global/arrow/arrow-lft-sharp-end.gif                  (arrow/arrow-lft-sharp-end.gif)
>   skin/classic/global/arrow/arrow-lft-sharp.gif                      (arrow/arrow-lft-sharp.gif)
>@@ -73,19 +74,18 @@ toolkit.jar:
>   skin/classic/global/arrow/arrow-rit-dis.gif                        (arrow/arrow-rit-dis.gif)
>   skin/classic/global/arrow/arrow-rit-hov.gif                        (arrow/arrow-rit-hov.gif)
>   skin/classic/global/arrow/arrow-rit-sharp-end.gif                  (arrow/arrow-rit-sharp-end.gif)
>   skin/classic/global/arrow/arrow-rit-sharp.gif                      (arrow/arrow-rit-sharp.gif)
>   skin/classic/global/arrow/arrow-rit.gif                            (arrow/arrow-rit.gif)
>   skin/classic/global/arrow/arrow-up-dis.gif                         (arrow/arrow-up-dis.gif)
>   skin/classic/global/arrow/arrow-up-sharp.gif                       (arrow/arrow-up-sharp.gif)
>   skin/classic/global/arrow/arrow-up.gif                             (arrow/arrow-up.gif)
>-  skin/classic/global/arrow/panelarrow-up.png                        (arrow/panelarrow-up.png)
>-  skin/classic/global/arrow/panelarrow-down.png                      (arrow/panelarrow-down.png)
>-  skin/classic/global/arrow/panelarrow-horiz.png                     (arrow/panelarrow-horiz.png)
>+  skin/classic/global/arrow/panelarrow-horizontal.png                (arrow/panelarrow-horizontal.png)
>+  skin/classic/global/arrow/panelarrow-vertical.png                  (arrow/panelarrow-vertical.png)
>   skin/classic/global/checkbox/cbox-check.gif                        (checkbox/cbox-check.gif)
>   skin/classic/global/checkbox/cbox-check-dis.gif                    (checkbox/cbox-check-dis.gif)
>   skin/classic/global/console/console-error-caret.gif                (console/console-error-caret.gif)
>   skin/classic/global/console/console-error-dash.gif                 (console/console-error-dash.gif)
> * skin/classic/global/console/console.css                            (console/console.css)
>   skin/classic/global/dirListing/dirListing.css                      (dirListing/dirListing.css)
>   skin/classic/global/dirListing/folder.png                          (dirListing/folder.png)
>   skin/classic/global/dirListing/local.png                           (dirListing/folder.png)
>diff --git a/toolkit/themes/pinstripe/global/notification.css b/toolkit/themes/pinstripe/global/notification.css
>--- a/toolkit/themes/pinstripe/global/notification.css
>+++ b/toolkit/themes/pinstripe/global/notification.css
>@@ -110,27 +110,27 @@ notification[type="warning"] .messageClo
> .popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
>   box-shadow: @focusRingShadow@;
>   position: relative;
> }
> 
> .popup-notification-menubutton:not([type="menu-button"]),
> .popup-notification-menubutton > .button-menubutton-button,
> .popup-notification-menubutton > .button-menubutton-dropmarker {
>-  color: #fff;
>-  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
>-  border-radius: 12px;
>-  border: 1px solid rgba(0,0,0,.65);
>-  background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%,
>-                                   rgba(50,50,50,.9) 51%, rgba(40,40,40,.9));
>-  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
>-              inset 0 0 1px rgba(255,255,255,.1),
>-              0 1px 0 rgba(255,255,255,.1);
>+  -moz-appearance: none;
>+  color: #434343;
>+  border-radius: 4px;
>+  border: 1px solid #b5b5b5;
>+  background: -moz-linear-gradient(#fff, #f2f2f2);
>+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8),
>+             inset 0 0 1px rgba(255, 255, 255, 0.25),
>+             0 1px rgba(255, 255, 255, 0.3);
>   background-clip: padding-box;
>   background-origin: padding-box;
>+  padding: 2px 6px;
> }
> 
> .popup-notification-menubutton:not([type="menu-button"]) {
>   padding: 2px 9px;
> }
> 
> .popup-notification-menubutton > .button-menubutton-button {
>   -moz-appearance: none;
>@@ -145,17 +145,17 @@ notification[type="warning"] .messageClo
> .popup-notification-menubutton > .button-menubutton-dropmarker {
>   padding-top: 7px;
>   padding-bottom: 7px;
>   -moz-padding-start: 5px;
>   -moz-padding-end: 8px;
>   margin-top: 0;
>   margin-bottom: 0;
>   -moz-margin-start: -1px;
>-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-white.png");
>+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-panel.png");
> }
> 
> .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
> .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
>   border-top-right-radius: 0;
>   border-bottom-right-radius: 0;
> }
> 
>@@ -163,20 +163,17 @@ notification[type="warning"] .messageClo
> .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
>   border-top-left-radius: 0;
>   border-bottom-left-radius: 0;
> }
> 
> .popup-notification-menubutton:not([type="menu-button"]):hover:active,
> .popup-notification-menubutton > .button-menubutton-button:hover:active,
> .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
>-  background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
>-  box-shadow: inset 0 0 3px rgba(0,0,0,.2),
>-              inset 0 1px 7px rgba(0,0,0,.4),
>-              0 1px 0 rgba(255,255,255,.1);
>+  box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
> }
> 
> .popup-notification-closebutton {
>   -moz-margin-end: -12px;
>   margin-top: -13px;
> }
> 
> .popup-notification-closeitem > .menu-iconic-left {
>diff --git a/toolkit/themes/pinstripe/global/popup.css b/toolkit/themes/pinstripe/global/popup.css
>--- a/toolkit/themes/pinstripe/global/popup.css
>+++ b/toolkit/themes/pinstripe/global/popup.css
>@@ -47,53 +47,50 @@ panel[type="arrow"][side="bottom"] {
> panel[type="arrow"][side="left"],
> panel[type="arrow"][side="right"] {
>   margin-top: -26px;
>   margin-bottom: -26px;
> }
> 
> .panel-arrowcontent {
>   -moz-appearance: none;
>-  color: white;
>-  background: -moz-linear-gradient(rgba(85,85,85,1), rgba(75,75,75,.97) 5px, rgba(58,58,58,.97) 17px, rgba(43,43,43,.97) 40px, rgba(40,40,40,.97) 80px, rgba(40,40,40,.97));
>-  border-radius: 6px;
>-  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset,
>+  background: #ededed;
>+  border-radius: 5px;
>+  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset,
>               0 1px 0 rgba(255,255,255,.05) inset,
>               0 0 0 1px rgba(0,0,0,.25);
>+  color: #666;
>   padding: 16px;
>   margin: 1px;
> }
> 
>-.panel-arrow {
>-  opacity: 0.97;
>-}
>-
> .panel-arrow[side="top"] {
>-  list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png");
>+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.png");
>   margin-left: 6px;
>   margin-right: 6px;
>   margin-bottom: -2px;
> }
> 
> .panel-arrow[side="bottom"] {
>-  list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png");
>+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.png");
>+  -moz-transform: scaleY(-1);
>   margin-left: 6px;
>   margin-right: 6px;
>   margin-top: -2px;
> }
> 
> .panel-arrow[side="left"] {
>-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
>+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.png");
>   margin-top: 6px;
>   margin-bottom: 6px;
>   margin-right: -2px;
> }
> 
> .panel-arrow[side="right"] {
>-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
>+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.png");
>   -moz-transform: scaleX(-1);
>   margin-top: 6px;
>   margin-bottom: 6px;
>   margin-left: -2px;
> }
> 
> /* ::::: tooltip ::::: */
>

Comment 22

[Dão Gottwald [:dao]]

Comment on attachment 640756 [details] [diff] [review]
Patch v5.1

(In reply to Chris Lee (:cleer) from comment #16)
> (In reply to Dão Gottwald [:dao] from comment #15)
> > >+  skin/classic/global/arrow/arrow-dn-panel.png                       (arrow/arrow-dn-panel.png)
> > 
> > We already have arrow-dn-sharp.gif, arrow-dn.gif and arrow-dn.png. Can you
> > use or update one of these?
> > 
> 
> These are different images used in different cases. Changing them probably
> alters another element that we don't want to alter.

If their names are to be believed, these are generic images that should work in different contexts. It's unclear why elements in panels need a specific down arrow that wouldn't work in other contexts.

> #editBMPanel_folderMenuList {
>   @hudButton@
>-  border-radius: 3px;
>+  margin: 0;
>   min-height: 22px;
>-  -moz-padding-start: 4px;
>-  -moz-padding-end: 0;
>+  padding: 2px 4px 1px 8px;
>+  -moz-padding-start: 8px;
>+  -moz-padding-end: 4px;

Use padding-top and padding-bottom.

> #editBMPanel_tagsSelector {

>-  box-shadow: inset 0 1px 2px rgba(0,0,0,.15),
>-              0 1px 0 rgba(255,255,255,.15);

>+  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05),
>+              0 1px rgba(255, 255, 255, 0.3);

Remove the added spaces.

> .geolocation-text-link {
>   color: #fff;
>   -moz-margin-start: 0; /* override default label margin to match description margin */
>+  color: #0073e6;
>+  text-decoration: none;
> }
> 
> .telemetry-text-link {
>   color: #fff;
>+  color: #0073e6;
>+  text-decoration: none;
> }

Set the color only once per rule.

Comment 23

[Chris Lee (:cleer)]

Attachment: Patch v6

Updated re: latest feedback. Replacing the existing global arrow image is a visual design question for shorlander which I personally don't think should hold up the development of this patch. I'll try to direct him to this question later.

Comment 24

[Dão Gottwald [:dao]]

Comment on attachment 640805 [details] [diff] [review]
Patch v6

>+#editBookmarkPanel textbox {

child selector

>-%define hudButtonPressed background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9)); box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
>+%define hudButtonPressed box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);

remove the added spaces within the color values throughout this patch

> .popup-notification-menubutton:not([type="menu-button"]),
> .popup-notification-menubutton > .button-menubutton-button,
> .popup-notification-menubutton > .button-menubutton-dropmarker {
>+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8),
>+             inset 0 0 1px rgba(255, 255, 255, 0.25),
>+             0 1px rgba(255, 255, 255, 0.3);

indentation is off

Comment 25

[Chris Lee (:cleer)]

Attachment: Patch v7

Thanks for the review. Altered the patch in response.

Comment 26

[Dão Gottwald [:dao]]

Comment on attachment 645148 [details] [diff] [review]
Patch v7

pinstripe/global/arrow/ is a mess which is why I don't want arrow-dn-panel.png in there. You can put it in browser/themes/pinstripe/places/ if you like.

You'll also want to remove hud-style-dropmarker-double-arrows.png.

Comment 27

[Dão Gottwald [:dao]]

Comment on attachment 645148 [details] [diff] [review]
Patch v7

>+#editBMPanel_rows > row > textbox,
>+#editBMPanel_rows > row > hbox > textbox {
>+  -moz-appearance: none;
>+  background: -moz-linear-gradient(#fafafa, #fff);
>+  border-radius: 3px;
>+  border: 1px solid rgba(0,0,0,.3) !important;
>+  box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
>+              0 1px rgba(255,255,255,.3);
>+  margin: 0;
>+  padding: 3px 6px;
>+}

This looks like it lacks styling for the focused state.
Not sure why these text fields need custom styling at all, though.

Comment 28

[Chris Lee (:cleer)]

(In reply to Dão Gottwald [:dao] from comment #26)
> Comment on attachment 645148 [details] [diff] [review]
> Patch v7
> 
> pinstripe/global/arrow/ is a mess which is why I don't want
> arrow-dn-panel.png in there. You can put it in
> browser/themes/pinstripe/places/ if you like.
> 
> You'll also want to remove hud-style-dropmarker-double-arrows.png.

The image is specific to arrow panels, though, not specific to the bookmarks panel. Future panels with dropdowns should use the same image.

Comment 29

[Chris Lee (:cleer)]

Attachment: Patch v8

One solution to the filename issue:
/browser/themes/pinstripe/panel-dropmarker.png
/browser/themes/pinstripe/panel-expander-closed.png
/browser/themes/pinstripe/panel-expander-open.png

Personally, I feel like we should keep all the resources related and specific to the arrow panel in a folder or at least with the same filename prefix. This'd include panelarrow-horizontal.png and panelarrow-vertical.png, which are currently in /global/themes/pinstripe/arrow/ (the "messy" directory).

I'm also unsure of what "hud" in the filenames refers to. If it means the black system style known as "HUD" on Mac (probably), we should rename all references of it to something else (currently I'm using "panel"). This would have to include the @hudButton@ macros in shared.inc, though. It's also possible that "hud" just means heads-up display, including the new panel.

Also, there are some other resources associated with the panel (currently styled black and with the hud- prefix) of which I'd like to get new versions from Stephen.

I also think I fixed the focus styles on the text fields and expanded areas. Not sure about buttons.

Comment 30

[Dão Gottwald [:dao]]

Comment on attachment 645613 [details] [diff] [review]
Patch v8

>-  list-style-image: url("chrome://global/skin/arrow/arrow-dn-white.png");

This makes the image unused. Please remove it.

>+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-panel.png");

This image doesn't exist.

You'll also need to remove the gross hack that was added here:
http://hg.mozilla.org/mozilla-central/annotate/5598b8c4f271/browser/themes/pinstripe/browser.css#l3459
(lines 3459-3486)

Comment 31

[Chris Lee (:cleer)]

Attachment: Patch v9

Updated the dropmarker image-related stuff. The custom social panel styling and images can indeed be removed, but I feel like that should happen in a separate bug. What do you think?

Any thoughts on the filename questions in comment 29?

Comment 32

[Chris Lee (:cleer)]

Attachment: Patch v9.1

Oops, forgot to include new images in previous patches. Previous comments/questions still stand.

Comment 33

[Chris Lee (:cleer)]

Ping for review.

Comment 34

[Chris Lee (:cleer)]

Ping for review again.

Comment 35

[Frank Yan (:fryn)]

Comment on attachment 645884 [details] [diff] [review]
Patch v9.1

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

The patch is mostly great and overall a major improvement. :)
Just a few things to fix:

The arrow panel close button should be replaced with a dark "X", so it is more visible.
The chevrons in the "add bookmark" panel should be centered within their respective buttons.
The Sync promo that appears in the "remember password" and "add bookmark" panels needs updated background and/or foreground colors to be more readable. (To reproduce this, change the value of browser.syncPromoViewsLeft in about:config to 1, and click the bookmark star.)

I'm indifferent about where the social CSS/image changes get made, as long as they get done before we ship that UI to release channel.

Comment 36

[Frank Yan (:fryn)]

By "that UI", I'm referring to the social UI.
Also, just a heads up that the patch bitrotted a few lines in browser/themes/pinstripe/jar.mn.

Comment 37

[Chris Lee (:cleer)]

Attachment: Patch 10

Should fix all above problems as well as some related ones I spotted (centering the dropmarker in geolocation panel and coloring of the bottom part of the downloads panel).

Comment 38

[Frank Yan (:fryn)]

Comment on attachment 650717 [details] [diff] [review]
Patch 10

While I think this is good enough to land, there is just one more thing that I would like fixed, so we don't have to open a followup for it:

In the "add bookmark" dialog, clicking the folder chevron still causes the chevron to become misaligned. It seems that the chevron alignment fix needs to be more generalized.

Also the mini-toolbar under the folders with the "+" icon has a light-on-dark color scheme that doesn't match the rest of the panel anymore. If fixing the color scheme is trivial CSS, go for it. If not, it's tertiary UI, so I'm not that worried about it.

Comment 39

[Chris Lee (:cleer)]

Attachment: Patch 11

Addresses above issues and some related things I found.

Comment 40

[Frank Yan (:fryn)]

Comment on attachment 651581 [details] [diff] [review]
Patch 11

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

Great improvements. :)

1 thing to fix:
The Sync promo messes up the layout of the "Remember Password" prompt.
Reproduce using positive browser.syncPromoViewsLeft value.
Tips for fixing this:
You can test with the "Remember Password" prompt by entering arbitrary input into https://www.getpersonas.com/en-US/signin
Please also test with the "Add Bookmark" prompt to avoid regressing that.

Comment 41

[Frank Yan (:fryn)]

Comment on attachment 651581 [details] [diff] [review]
Patch 11

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

Ah, I didn't build the correct directories.

Looks good to me.

We need to remember to fix bug 780349 before shipping the social API.

Comment 42

[Chris Lee (:cleer)]

Attachment: Patch 12

Got rid of a bunch of CSS/an image that were serving only to make the bookmarks panel folder tree background suitable for the dark theme. Just look around #editBMPanel_folderTree.

Also renamed an image just for consistency.

Comment 43

[Frank Yan (:fryn)]

Comment on attachment 651923 [details] [diff] [review]
Patch 12

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

If you rename the files in the code, you also need to run `hg move` to move the actual files to their new path.

Also, please update the jar.mn changes to apply cleanly to the latest tree.
(1. hg qpop; hg pull -u; hg qpush 2. Re-do changes in the file. 3. hg qref)

Comment 44

[Chris Lee (:cleer)]

Attachment: Patch 13

Should fix those things.

Comment 45

[Dão Gottwald [:dao]]

Comment on attachment 652240 [details] [diff] [review]
Patch 13

Similar issue as in bug 776708: you can't use a browser resource (panel-dropmarker.png) in toolkit.

Comment 46

[Chris Lee (:cleer)]

(In reply to Dão Gottwald [:dao] from comment #45)
> Comment on attachment 652240 [details] [diff] [review]
> Patch 13
> 
> Similar issue as in bug 776708: you can't use a browser resource
> (panel-dropmarker.png) in toolkit.

Vice versa, you mean?

Comment 47

[Chris Lee (:cleer)]

(In reply to Chris Lee (:cleer) from comment #46)
> (In reply to Dão Gottwald [:dao] from comment #45)
> > Comment on attachment 652240 [details] [diff] [review]
> > Patch 13
> > 
> > Similar issue as in bug 776708: you can't use a browser resource
> > (panel-dropmarker.png) in toolkit.
> 
> Vice versa, you mean?

Oh, never mind, I found it. Will fix.

Comment 48

[Chris Lee (:cleer)]

Attachment: Patch 14

Fixed image location issue.

Comment 49

[Frank Yan (:fryn)]

Comment on attachment 652255 [details] [diff] [review]
Patch 14

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

::: browser/themes/pinstripe/browser.css
@@ +1466,4 @@
>  }
>  
>  #editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon {
> +  list-style-image: url("chrome://browser/skin/panel-dropmarker.png");

I think you meant to put chrome://global/skin/icons/panel-dropmarker.png

What is the reason for not using one of the following?
https://mxr.mozilla.org/mozilla-central/find?string=dropmarker.png
In particular, note the toolbarbutton-dropmarker.png files.
Though, there does seem to be precedent for having duplicate files, e.g. the two existing toolbarbutton-dropmarker.png files are identical.

::: toolkit/themes/pinstripe/global/notification.css
@@ +143,4 @@
>    margin-top: 0;
>    margin-bottom: 0;
>    -moz-margin-start: -1px;
> +  list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");

Likewise here.

Comment 50

[Chris Lee (:cleer)]

Attachment: Patch 15

Fixed that image reference issue.

Yeah, we could potentially use toolbarbutton-dropmarker-lion.png, which looks very similar, but it's not in the right directory (toolkit) and the filename makes it kind of semantically odd to use here. So I'd personally go with a new image, but I can see reason to try to reuse one.

Comment 51

[Chris Lee (:cleer)]

Attachment: Patch 16

Discovered and fixed a little bug with the link color in popups.

Comment 52

[Chris Lee (:cleer)]

Attachment: Patch 17

Updated the HTTPS lock icon and the sync promo icon. They're now gray instead of white, which is much more visible on the light background.

As far as I know, the patch should be ready for checkin if this review passes.

Comment 53

[Chris Lee (:cleer)]

Attachment: Patch v18

Err, sorry for the patch barrage. >_< I just realized that the way that I fixed the expander icon padding was pretty dumb, so I fixed it (with what I think is) the right way. Also unprefixed all the -moz-linear-gradients I touched while I was at it. Everything else should be the same.

Comment 54

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/fc19d9b5a531

I just checked in patch 17. Can you post a follow-up patch on top of it please?

Comment 55

[Chris Lee (:cleer)]

Attachment: Followup patch

Comment 56

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 654442 [details] [diff] [review]
Followup patch

https://hg.mozilla.org/integration/mozilla-inbound/rev/529608d3f3ff

Comment 57

[Chris Lee (:cleer)]

Cool. Thanks, Ryan, Frank, and Dao!

Comment 58

[Dão Gottwald [:dao]]

Comment on attachment 654442 [details] [diff] [review]
Followup patch

>+#editBookmarkPanel .expander-up .button-icon,
>+#editBookmarkPanel .expander-down .button-icon {
>+  margin: 1px 0 0;
>+}
>+
>+#editBookmarkPanel .expander-up .button-text,
>+#editBookmarkPanel .expander-down .button-text {
>+  display: none;
>+}

Use the child selector to get to button-icon and button-text. Chained descendant selectors with the leaf node being a very common class is an exceedingly bad idea.
https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS#Avoid_the_descendant_selector.21

Comment 59

[Ed Morley [:emorley]]

https://hg.mozilla.org/mozilla-central/rev/fc19d9b5a531
https://hg.mozilla.org/mozilla-central/rev/529608d3f3ff

Comment 60

[Chris Lee (:cleer)]

Attachment: Followup patch 2

Comment 61

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/3c39442f9f19