Bug 590073 - Classic specific styling of arrow panels. r=neil a=b
authorDão Gottwald <dao@mozilla.com>
Tue, 21 Dec 2010 00:02:09 +0100
changeset 59550 fb629ae545102d1613bf598f0e3f9d333e40f553
parent 59549 0489b54d5ce8370d6e24e73585430957457a33e0
child 59551 aeeb631c6d433cecc56d5cc8a615da002c5bedd9
push id17658
push userdgottwald@mozilla.com
push dateTue, 21 Dec 2010 09:50:38 +0000
treeherdermozilla-central@fb629ae54510 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersneil, b
bugs590073
milestone2.0b9pre
first release with
nightly linux32
fb629ae54510 / 4.0b9pre / 20101221030401 / files
nightly linux64
fb629ae54510 / 4.0b9pre / 20101221030401 / files
nightly mac
fb629ae54510 / 4.0b9pre / 20101221030401 / files
nightly win32
fb629ae54510 / 4.0b9pre / 20101221030401 / files
nightly win64
fb629ae54510 / 4.0b9pre / 20101221045029 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 590073 - Classic specific styling of arrow panels. r=neil a=b
browser/themes/gnomestripe/browser/browser.css
toolkit/themes/gnomestripe/global/icons/panelarrow-horizontal.svg
toolkit/themes/gnomestripe/global/icons/panelarrow-vertical.svg
toolkit/themes/gnomestripe/global/jar.mn
toolkit/themes/gnomestripe/global/popup.css
toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg
toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg
toolkit/themes/winstripe/global/jar.mn
toolkit/themes/winstripe/global/popup.css
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@@ -1116,19 +1116,17 @@ toolbar[iconsize="small"] #feed-button {
   -moz-appearance: none;
   background-color: #fffcd6;
   border: 1px solid #dad8b6;
   font-weight: bold;
 }
 
 /* Notification popup */
 #notification-popup {
-  margin: 4px 0;
   min-width: 280px;
-  padding: 10px;
 }
 
 .popup-notification-icon {
   width: 64px;
   height: 64px;
   -moz-margin-end: 10px;
 }
 
@@ -1325,20 +1323,16 @@ richlistitem[type~="action"][actiontype=
   list-style-image: url("chrome://browser/skin/places/starPage.png");
 }
 
 #star-button[starred="true"] {
   list-style-image: url("chrome://browser/skin/places/pageStarred.png");
 }
 
 /* Bookmarking panel */
-#editBookmarkPanel {
-  padding: 4px;
-}
-
 #editBookmarkPanelStarIcon {
   list-style-image: url("chrome://browser/skin/places/starred48.png");
   width: 48px;
   height: 48px;
 }
 
 #editBookmarkPanelStarIcon[unstarred] {
   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/gnomestripe/global/icons/panelarrow-horizontal.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="17"
+     height="34">
+  <path d="M 17,0 L 0,17 17,34 z"
+        fill="-moz-Dialog"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/gnomestripe/global/icons/panelarrow-vertical.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="34"
+     height="17">
+  <path d="M 0,17 L 17,0 34,17 z"
+        fill="-moz-Dialog"/>
+</svg>
--- a/toolkit/themes/gnomestripe/global/jar.mn
+++ b/toolkit/themes/gnomestripe/global/jar.mn
@@ -38,13 +38,15 @@ toolkit.jar:
 +  skin/classic/global/icons/Authentication.png                (icons/Authentication.png)
 +  skin/classic/global/icons/autoscroll.png                    (icons/autoscroll.png)
 +  skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
 +  skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
 +  skin/classic/global/icons/find.png                          (icons/find.png)
 +  skin/classic/global/icons/folder-item.png                   (icons/folder-item.png)
 +  skin/classic/global/icons/loading_16.png                    (icons/loading_16.png)
 +  skin/classic/global/icons/notloading_16.png                 (icons/notloading_16.png)
++  skin/classic/global/icons/panelarrow-horizontal.svg         (icons/panelarrow-horizontal.svg)
++  skin/classic/global/icons/panelarrow-vertical.svg           (icons/panelarrow-vertical.svg)
 +  skin/classic/global/icons/resizer.png                       (icons/resizer.png)
 +  skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 +  skin/classic/global/icons/webconsole.png                    (icons/webconsole.png)
 +  skin/classic/global/icons/wrap.png                          (icons/wrap.png)
 +  skin/classic/global/toolbar/spring.png                      (toolbar/spring.png)
--- a/toolkit/themes/gnomestripe/global/popup.css
+++ b/toolkit/themes/gnomestripe/global/popup.css
@@ -44,21 +44,70 @@ menupopup,
 panel {
   -moz-appearance: menupopup;
   min-width: 1px;
   color: MenuText;
 }
 
 panel[type="arrow"] {
   -moz-transition: opacity 300ms;
+  -moz-appearance: none;
+}
+
+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;
+}
+
+.panel-arrowcontent {
+  padding: 10px;
+  color: -moz-DialogText;
+  background: -moz-Dialog;
+  border: 1px solid ThreeDShadow;
 }
 
-.panel-arrowbox {
-  /* the arrows don't display properly on Linux so disable for now */
-  display: none;
+.panel-arrow[side="top"],
+.panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://global/skin/icons/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;
+}
+
+.panel-arrow[side="left"],
+.panel-arrow[side="right"] {
+  list-style-image: url("chrome://global/skin/icons/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;
 }
 
 /* ::::: tooltip ::::: */
 
 tooltip {
   -moz-appearance: tooltip;
   margin-top: 21px;
   /* GTK hardcodes this to 4px */
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/winstripe/global/arrow/panelarrow-horizontal.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="17"
+     height="34">
+  <path d="M 17,0 L 0,17 17,34 z"
+        fill="ThreeDShadow"/>
+  <path d="M 17,1 L 1,17 17,33 z"
+        fill="-moz-Dialog"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/winstripe/global/arrow/panelarrow-vertical.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="34"
+     height="17">
+  <path d="M 0,17 L 17,0 34,17 z"
+        fill="ThreeDShadow"/>
+  <path d="M 1,17 L 17,1 33,17 z"
+        fill="-moz-Dialog"/>
+</svg>
--- a/toolkit/themes/winstripe/global/jar.mn
+++ b/toolkit/themes/winstripe/global/jar.mn
@@ -75,16 +75,18 @@ toolkit.jar:
         skin/classic/global/arrow/arrow-rit-sharp-end.gif        (arrow/arrow-rit-sharp-end.gif)
         skin/classic/global/arrow/arrow-up.gif                   (arrow/arrow-up.gif)
         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-vertical.svg        (arrow/panelarrow-vertical.svg)
         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)
         skin/classic/global/console/console-toolbar.png          (console/console-toolbar.png)
         skin/classic/global/console/bullet-error.png             (console/bullet-error.png)
         skin/classic/global/console/bullet-question.png          (console/bullet-question.png)
         skin/classic/global/console/bullet-warning.png           (console/bullet-warning.png)
         skin/classic/global/console/console-error-caret.gif      (console/console-error-caret.gif)
@@ -252,16 +254,18 @@ toolkit.jar:
         skin/classic/aero/global/arrow/arrow-rit-sharp-end.gif           (arrow/arrow-rit-sharp-end.gif)
         skin/classic/aero/global/arrow/arrow-up.gif                      (arrow/arrow-up.gif)
         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-vertical.svg           (arrow/panelarrow-vertical.svg)
         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)
         skin/classic/aero/global/console/console-toolbar.png             (console/console-toolbar-aero.png)
         skin/classic/aero/global/console/bullet-error.png                (console/bullet-error-aero.png)
         skin/classic/aero/global/console/bullet-question.png             (console/bullet-question-aero.png)
         skin/classic/aero/global/console/bullet-warning.png              (console/bullet-warning-aero.png)
         skin/classic/aero/global/console/console-error-caret.gif         (console/console-error-caret.gif)
--- a/toolkit/themes/winstripe/global/popup.css
+++ b/toolkit/themes/winstripe/global/popup.css
@@ -65,115 +65,179 @@ menupopup > menu > menupopup {
 
 panel[type="arrow"] {
   -moz-appearance: none;
   background: transparent;
   border: none;
   -moz-transition: opacity 300ms;
 }
 
-panel[type="arrow"][side="top"],
-panel[type="arrow"][side="bottom"] {
-  margin-left: -25px;
-  margin-right: -25px;
-}
+%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: -25px;
-  margin-bottom: -25px;
-}
+  panel[type="arrow"][side="left"],
+  panel[type="arrow"][side="right"] {
+    margin-top: -23px;
+    margin-bottom: -23px;
+  }
+
+  .panel-arrowcontent {
+    border-radius: 6px;
+    padding: 10px;
+    color: -moz-DialogText;
+    background: -moz-Dialog;
+    border: 1px solid ThreeDShadow;
+  }
 
-.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: -moz-linear-gradient(rgba(250,251,253,.95), rgba(250,251,253,.95) 20px, rgba(250,251,253,.95));
-  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
-}
+  .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;
+  }
 
-%ifdef WINSTRIPE_AERO
-.panel-inner-arrowcontent {
-  background-color: rgba(250,250,250,.95);
-  background-clip: padding-box;
-  margin: 4px;
-  border: 2px solid;
-  -moz-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;
+  .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
 
-.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
-}
+%ifdef XP_WIN
+@media all and (-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-arrow[side="bottom"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-down.png");
+  .panel-arrowcontent {
+    border-radius: 6px;
 %ifdef WINSTRIPE_AERO
-  margin-top: -5px;
-  margin-bottom: -5px;
+    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
-  margin-left: 6px;
-  margin-right: 6px;
-  margin-top: -12px;
-  margin-bottom: -4px;
+    background: -moz-linear-gradient(rgba(250,251,253,.95), rgba(250,251,253,.95) 20px, rgba(250,251,253,.95));
+    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: rgba(250,250,250,.95);
+    background-clip: padding-box;
+    margin: 4px;
+    border: 2px solid;
+    -moz-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="left"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
+  .panel-arrow[side="top"] {
+    list-style-image: url("chrome://global/skin/arrow/panelarrow-up.png");
 %ifdef WINSTRIPE_AERO
-  margin-right: -5px;
-  margin-left: -5px;
+    margin-bottom: -5px;
+    margin-top: -5px;
 %else
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-right: -12px;
-  margin-left: -4px;
+    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="right"] {
-  list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
-  -moz-transform: scaleX(-1);
+  .panel-arrow[side="left"] {
+    list-style-image: url("chrome://global/skin/arrow/panelarrow-horiz.png");
 %ifdef WINSTRIPE_AERO
-  margin-left: -5px;
-  margin-right: -5px;
+    margin-right: -5px;
+    margin-left: -5px;
 %else
-  margin-top: 6px;
-  margin-bottom: 6px;
-  margin-left: -12px;
-  margin-right: -4px;
+    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
+  }
 }
+%endif
 
 /* ::::: tooltip ::::: */
 
 tooltip {
   -moz-appearance: tooltip;
   margin-top: 21px;
   border: 1px solid InfoText;
   padding: 2px 3px;