Bug 878065: [Australis] introduce the final, flat panel UI style. r=dao

browser/themes/osx/browser.css

@@ -382,7 +382,7 @@ toolbarbutton.bookmark-item > menupopup {
 
 /* ----- PRIMARY TOOLBAR BUTTONS ----- */
 
-.toolbarbutton-1:not([type="menu-button"]),
+toolbar .toolbarbutton-1:not([type="menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 #restore-button {
@@ -3942,17 +3942,6 @@ window > chatbox {
 
 /* End customization mode */
 
-panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="top"],
-panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-light-vertical.png");
-}
-@media (min-resolution: 2dppx) {
-  panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="top"],
-  panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-light-vertical@2x.png");
- }
-}
-
 #main-window[privatebrowsingmode=temporary] {
   background-image: url("chrome://browser/skin/privatebrowsing-mask.png");
   background-position: top right;

browser/themes/osx/customizableui/panelUIOverlay.css

@@ -4,6 +4,10 @@
 
 %include ../../shared/customizableui/panelUIOverlay.inc.css
 
+.panel-subviews {
+  background-color: #f5f5f5;
+}
+
 @media (min-resolution: 2dppx) {
   #customization-palette toolbarbutton > .toolbarbutton-icon,
   #PanelUI-contents toolbarbutton > .toolbarbutton-icon {

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -319,15 +319,11 @@ panelview toolbarbutton,
 #BMB_bookmarksPopup > menuitem {
   -moz-appearance: none;
   padding: 2px 6px;
-  background-color: hsla(210,32%,93%,0);
-  background-clip: padding-box;
+  background-color: hsla(210,4%,10%,0);
   border-radius: 2px;
   border: 1px solid;
-  border-color: hsla(210,54%,20%,0) hsla(210,54%,20%,0) hsla(210,54%,20%,0);
-  box-shadow: 0 1px hsla(0,0%,100%,0) inset,
-              0 1px hsla(210,54%,20%,0),
-              0 0 2px hsla(210,54%,20%,0);
-  transition-property: background-color, border-color, box-shadow;
+  border-color: hsla(210,4%,10%,0);
+  transition-property: background-color, border-color;
   transition-duration: 150ms;
 }
 
@@ -338,27 +334,18 @@ panelview toolbarbutton@buttonStateHover@,
 .customizationmode-button,
 #BMB_bookmarksPopup > menu@buttonStateHover@,
 #BMB_bookmarksPopup > menuitem@buttonStateHover@ {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
-  box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
-              0 1px hsla(210,54%,20%,.03),
-              0 0 2px hsla(210,54%,20%,.1);
+  background-color: hsla(210,4%,10%,.08);
+  border-color: hsla(210,4%,10%,.1);
 }
 
 panelview toolbarbutton@buttonStateActive@,
-.customizationmode-button:not([disabled]):hover:active,
+.customizationmode-button@buttonStateActive@,
 #widget-overflow-list > toolbarbutton@buttonStateActive@,
 #BMB_bookmarksPopup > menu@buttonStateActive@,
 #BMB_bookmarksPopup > menuitem@buttonStateActive@ {
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
-  background-color: hsla(210,54%,20%,.15);
-  border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
-  box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
-              0 0 1px hsla(210,54%,20%,.2) inset,
-              0 1px 0 hsla(210,54%,20%,0),
-              0 0 2px hsla(210,54%,20%,0);
-  text-shadow: none;
-  transition: none;
+  background-color: hsla(210,4%,10%,.15);
+  border-color: hsla(210,4%,10%,.15);
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
 }
 
 #BMB_bookmarksPopup > menu,

toolkit/themes/osx/global/jar.mn

@@ -81,8 +81,6 @@ toolkit.jar:
   skin/classic/global/arrow/panelarrow-horizontal@2x.png             (arrow/panelarrow-horizontal@2x.png)
   skin/classic/global/arrow/panelarrow-vertical.png                  (arrow/panelarrow-vertical.png)
   skin/classic/global/arrow/panelarrow-vertical@2x.png               (arrow/panelarrow-vertical@2x.png)
-  skin/classic/global/arrow/panelarrow-light-vertical.png            (arrow/panelarrow-light-vertical.png)
-  skin/classic/global/arrow/panelarrow-light-vertical@2x.png         (arrow/panelarrow-light-vertical@2x.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)

toolkit/themes/osx/global/popup.css

@@ -68,7 +68,7 @@ panel[type="arrow"][side="right"] {
 
 .panel-arrowcontent {
   -moz-appearance: none;
-  background: #ededed;
+  background: #f5f5f5;
   border-radius: 5px;
   box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset,
               0 1px 0 rgba(255,255,255,.05) inset,