Bug 764755 - Remove the aero glass style border of arrow panels and reduce the arrow size. r=enndeakin

browser/themes/winstripe/browser.css

@@ -1676,18 +1676,18 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
 }
 
 .panel-promo-box {
-  margin: 16px 0 -2px;
+  margin: 10px -10px -10px;
+  padding: 8px 10px;
+  border-top: 1px solid ThreeDShadow;
+  background-image: -moz-linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 @media (-moz-windows-default-theme) {
   .panel-promo-box {
-    margin: 8px -16px -16px;
-    padding: 8px 16px;
-%ifndef WINSTRIPE_AERO
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-%endif
-    background-color: #f1f5fb;
+    border-top-style: none;
+    background: #f1f5fb;
     color: GrayText;
     box-shadow: 0px 1px 2px rgb(204,214,234) inset;
   }

browser/themes/winstripe/downloads/downloads-aero.css

@@ -6,10 +6,6 @@
 %include downloads.css
 %undef WINSTRIPE_AERO
 
-#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent > .panel-inner-arrowcontent {
-  padding: 0;
-}
-
 @media (-moz-windows-default-theme) {
   #downloadsPanel[hasdownloads] > #downloadsHistory {
     background-color: #f1f5fb;

browser/themes/winstripe/downloads/downloads.css

@@ -16,11 +16,6 @@
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
-
-#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
-  /* Avoid that the arrow overlaps the selection on first item */
-  padding-top: 5px;
-}
 %endif
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {

toolkit/content/widgets/popup.xml

@@ -310,11 +310,9 @@
         <xul:box anonid="arrowbox" class="panel-arrowbox">
           <xul:image anonid="arrow" class="panel-arrow"/>
         </xul:box>
-        <xul:box class="panel-arrowcontent" flex="1">
-          <xul:box class="panel-inner-arrowcontent" xbl:inherits="align,dir,orient,pack" flex="1">
-            <children/>
-            <xul:box class="panel-inner-arrowcontentfooter" xbl:inherits="footertype" hidden="true"/>
-          </xul:box>
+        <xul:box class="panel-arrowcontent" xbl:inherits="side,align,dir,orient,pack" flex="1">
+          <children/>
+          <xul:box class="panel-inner-arrowcontentfooter" xbl:inherits="footertype" hidden="true"/>
         </xul:box>
       </xul:box>
     </content>

toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg

@@ -4,10 +4,10 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <svg xmlns="http://www.w3.org/2000/svg"
-     width="17"
-     height="34">
-  <path d="M 17,0 L 0,17 17,34 z"
+     width="10"
+     height="20">
+  <path d="M 10,0 L 0,10 10,20 z"
         fill="ThreeDShadow"/>
-  <path d="M 17,1 L 1,17 17,33 z"
+  <path d="M 10,1 L 1,10 10,19 z"
         fill="-moz-Dialog"/>
 </svg>

toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg

@@ -4,10 +4,10 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <svg xmlns="http://www.w3.org/2000/svg"
-     width="34"
-     height="17">
-  <path d="M 0,17 L 17,0 34,17 z"
+     width="20"
+     height="10">
+  <path d="M 0,10 L 10,0 20,10 z"
         fill="ThreeDShadow"/>
-  <path d="M 1,17 L 17,1 33,17 z"
+  <path d="M 1,10 L 10,1 19,10 z"
         fill="-moz-Dialog"/>
 </svg>

toolkit/themes/winstripe/global/jar.mn

@@ -82,11 +82,10 @@ toolkit.jar:
         skin/classic/global/arrow/arrow-up-dis.gif               (arrow/arrow-up-dis.gif)
         skin/classic/global/arrow/arrow-up-hov.gif               (arrow/arrow-up-hov.gif)
         skin/classic/global/arrow/arrow-up-sharp.gif             (arrow/arrow-up-sharp.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.svg      (arrow/panelarrow-horizontal.svg)
+        skin/classic/global/arrow/panelarrow-horizontal-white.png (arrow/panelarrow-horizontal-white.png)
         skin/classic/global/arrow/panelarrow-vertical.svg        (arrow/panelarrow-vertical.svg)
+        skin/classic/global/arrow/panelarrow-vertical-white.png  (arrow/panelarrow-vertical-white.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.css                  (console/console.css)
@@ -217,7 +216,7 @@ toolkit.jar:
         skin/classic/aero/global/numberbox.css
 *       skin/classic/aero/global/notification.css                        (notification-aero.css)
         skin/classic/aero/global/passwordmgr.css
-*       skin/classic/aero/global/popup.css                               (popup-aero.css)
+*       skin/classic/aero/global/popup.css
         skin/classic/aero/global/preferences.css
         skin/classic/aero/global/printPageSetup.css
         skin/classic/aero/global/printPreview.css
@@ -259,11 +258,10 @@ toolkit.jar:
         skin/classic/aero/global/arrow/arrow-up-dis.gif                  (arrow/arrow-up-dis.gif)
         skin/classic/aero/global/arrow/arrow-up-hov.gif                  (arrow/arrow-up-hov.gif)
         skin/classic/aero/global/arrow/arrow-up-sharp.gif                (arrow/arrow-up-sharp.gif)
-        skin/classic/aero/global/arrow/panelarrow-up.png                 (arrow/panelarrow-up-aero.png)
-        skin/classic/aero/global/arrow/panelarrow-down.png               (arrow/panelarrow-down-aero.png)
-        skin/classic/aero/global/arrow/panelarrow-horiz.png              (arrow/panelarrow-horiz-aero.png)
         skin/classic/aero/global/arrow/panelarrow-horizontal.svg         (arrow/panelarrow-horizontal.svg)
+        skin/classic/aero/global/arrow/panelarrow-horizontal-white.png   (arrow/panelarrow-horizontal-white.png)
         skin/classic/aero/global/arrow/panelarrow-vertical.svg           (arrow/panelarrow-vertical.svg)
+        skin/classic/aero/global/arrow/panelarrow-vertical-white.png     (arrow/panelarrow-vertical-white.png)
         skin/classic/aero/global/checkbox/cbox-check.gif                 (checkbox/cbox-check.gif)
         skin/classic/aero/global/checkbox/cbox-check-dis.gif             (checkbox/cbox-check-dis.gif)
 *       skin/classic/aero/global/console/console.css                     (console/console-aero.css)

toolkit/themes/winstripe/global/popup-aero.css

@@ -1,7 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-%define WINSTRIPE_AERO
-%include popup.css
-%undef WINSTRIPE_AERO

toolkit/themes/winstripe/global/popup.css

@@ -36,166 +36,93 @@ panel[type="arrow"] {
   -moz-transition: opacity 300ms;
 }
 
+panel[type="arrow"][side="top"],
+panel[type="arrow"][side="bottom"] {
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+panel[type="arrow"][side="left"],
+panel[type="arrow"][side="right"] {
+  margin-top: -20px;
+  margin-bottom: -20px;
+}
+
+.panel-arrowcontent {
+  border-radius: 4px;
+  padding: 10px;
+  color: -moz-DialogText;
+  background: -moz-Dialog;
+  background-clip: padding-box;
+  border: 1px solid ThreeDShadow;
+  margin: 4px;
+}
+
+.panel-arrow[side="top"],
+.panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
+  position: relative;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.panel-arrow[side="top"] {
+  margin-bottom: -5px;
+}
+
+.panel-arrow[side="bottom"] {
+  -moz-transform: scaleY(-1);
+  margin-top: -5px;
+}
+
+.panel-arrow[side="left"],
+.panel-arrow[side="right"] {
+  list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
+  position: relative;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.panel-arrow[side="left"] {
+  margin-right: -5px;
+}
+
+.panel-arrow[side="right"] {
+  -moz-transform: scaleX(-1);
+  margin-left: -5px;
+}
+
 %ifdef XP_WIN
-@media not all and (-moz-windows-default-theme) {
-%endif
-  panel[type="arrow"][side="top"],
-  panel[type="arrow"][side="bottom"] {
-    margin-left: -23px;
-    margin-right: -23px;
-  }
-
-  panel[type="arrow"][side="left"],
-  panel[type="arrow"][side="right"] {
-    margin-top: -23px;
-    margin-bottom: -23px;
-  }
-
+@media (-moz-windows-default-theme) {
   .panel-arrowcontent {
-    border-radius: 6px;
-    padding: 10px;
-    color: -moz-DialogText;
-    background: -moz-Dialog;
-    border: 1px solid ThreeDShadow;
+    border-color: rgba(0,0,0,.3);
+    box-shadow: 0 0 4px rgba(0,0,0,.3);
+  }
+
+  .panel-arrowcontent[side="top"] {
+    background-image: -moz-linear-gradient(top, white 1px, rgba(255,255,255,0) 15px);
+  }
+
+  .panel-arrowcontent[side="bottom"] {
+    background-image: -moz-linear-gradient(bottom, white 1px, rgba(255,255,255,0) 15px);
+  }
+
+  .panel-arrowcontent[side="left"] {
+    background-image: -moz-linear-gradient(left, white 1px, rgba(255,255,255,0) 15px);
+  }
+
+  .panel-arrowcontent[side="right"] {
+    background-image: -moz-linear-gradient(right, white 1px, rgba(255,255,255,0) 15px);
   }
 
   .panel-arrow[side="top"],
   .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
-    position: relative;
-    margin-left: 6px;
-    margin-right: 6px;
-  }
-
-  .panel-arrow[side="top"] {
-    margin-bottom: -1px;
-  }
-
-  .panel-arrow[side="bottom"] {
-    -moz-transform: scaleY(-1);
-    margin-top: -1px;
+    list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical-white.png");
   }
 
   .panel-arrow[side="left"],
   .panel-arrow[side="right"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal.svg");
-    position: relative;
-    margin-top: 6px;
-    margin-bottom: 6px;
-  }
-
-  .panel-arrow[side="left"] {
-    margin-right: -1px;
-  }
-
-  .panel-arrow[side="right"] {
-    -moz-transform: scaleX(-1);
-    margin-left: -1px;
-  }
-%ifdef XP_WIN
-}
-%endif
-
-%ifdef XP_WIN
-@media (-moz-windows-default-theme) {
-  panel[type="arrow"][side="top"],
-  panel[type="arrow"][side="bottom"] {
-    margin-left: -25px;
-    margin-right: -25px;
-  }
-
-  panel[type="arrow"][side="left"],
-  panel[type="arrow"][side="right"] {
-    margin-top: -25px;
-    margin-bottom: -25px;
-  }
-
-  .panel-arrowcontent {
-    border-radius: 6px;
-%ifdef WINSTRIPE_AERO
-    background-color: rgba(179,230,255,.35);
-    background-image: -moz-linear-gradient(rgba(250,253,255,.9), rgba(250,253,255,.75) 20px, rgba(250,253,255,.70) 39px, rgba(250,253,255,0) 41px, rgba(250,253,255,0));
-    margin: 5px;
-    box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset,
-                0 1px 0 rgba(255,255,255,.3) inset,
-                0 0 0 1px rgba(0,0,0,.75),
-                0 1px 3px 2px rgba(0,0,0,.65);
-%else
-    background: rgb(250,251,253);
-    padding: 16px;
-    margin: 3px;
-    box-shadow: 0 0 5px 1px rgba(184,205,232,1) inset,
-                0 0 0 1px rgba(0,0,0,.25),
-                0 1px 5px rgba(0,0,0,.5);
-%endif
-  }
-
-%ifdef WINSTRIPE_AERO
-  .panel-inner-arrowcontent {
-    background-color: rgb(250,250,250);
-    background-clip: padding-box;
-    margin: 4px;
-    border: 2px solid;
-    border-radius: 2px;
-    -moz-border-top-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
-    -moz-border-left-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
-    -moz-border-bottom-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
-    -moz-border-right-colors: rgba(255,255,255,.6) rgba(0,0,0,.7);
-    padding: 16px;
-  }
-%endif
-
-  .panel-arrow[side="top"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png");
-%ifdef WINSTRIPE_AERO
-    margin-bottom: -5px;
-    margin-top: -5px;
-%else
-    margin-left: 6px;
-    margin-right: 6px;
-    margin-bottom: -13px;
-    margin-top: -4px;
-%endif
-  }
-
-  .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png");
-%ifdef WINSTRIPE_AERO
-    margin-top: -5px;
-    margin-bottom: -5px;
-%else
-    margin-left: 6px;
-    margin-right: 6px;
-    margin-top: -12px;
-    margin-bottom: -4px;
-%endif
-  }
-
-  .panel-arrow[side="left"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
-%ifdef WINSTRIPE_AERO
-    margin-right: -5px;
-    margin-left: -5px;
-%else
-    margin-top: 6px;
-    margin-bottom: 6px;
-    margin-right: -12px;
-    margin-left: -4px;
-%endif
-  }
-
-  .panel-arrow[side="right"] {
-    list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
-    -moz-transform: scaleX(-1);
-%ifdef WINSTRIPE_AERO
-    margin-left: -5px;
-    margin-right: -5px;
-%else
-    margin-top: 6px;
-    margin-bottom: 6px;
-    margin-left: -12px;
-    margin-right: -4px;
-%endif
+    list-style-image: url("chrome://global/skin/arrow/panelarrow-horizontal-white.png");
   }
 }
 %endif