Bug 658431 - Move generic page styling into separate stylesheet for reuse in other in-content UIs. r=dao,dtownsend

--HG--
rename : toolkit/themes/pinstripe/mozapps/extensions/background-texture.png => toolkit/themes/pinstripe/global/inContentUI/background-texture.png
rename : toolkit/themes/winstripe/mozapps/extensions/background-texture.png => toolkit/themes/winstripe/global/inContentUI/background-texture.png

toolkit/mozapps/extensions/content/extensions.xul

@@ -228,7 +228,7 @@
                     tooltiptext="&view.recentUpdates.label;" disabled="true"/>
     </richlistbox>
 
-    <box id="view-port-container" flex="1">
+    <box id="view-port-container" class="main-content" flex="1">
 
       <!-- view port -->
       <deck id="view-port" flex="1" selectedIndex="0">

toolkit/themes/gnomestripe/global/inContentUI.css

@@ -0,0 +1,61 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is In-Content UI.
+ *
+ * The Initial Developer of the Original Code is
+ * the Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Blair McBride <bmcbride@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+
+/* Page background */
+:root {
+  -moz-appearance: none;
+  padding: 18px;
+  background-color: Window;
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 160px),
+                    -moz-linear-gradient(-moz-dialog, Window 160px);
+  color: WindowText;
+}
+
+/* Content */
+.main-content {
+  /* Needed to allow the radius to clip the inner content, see bug 595656 */
+  /* Disabled because of bug 623615
+  overflow: hidden;
+  */
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  border: 1px solid ThreeDShadow;
+  border-radius: 5px;
+}

toolkit/themes/gnomestripe/global/jar.mn

@@ -11,6 +11,7 @@ toolkit.jar:
 +  skin/classic/global/findBar.css
 +  skin/classic/global/global.css
 +  skin/classic/global/groupbox.css
++  skin/classic/global/inContentUI.css
 +  skin/classic/global/listbox.css
 +  skin/classic/global/menu.css
 +  skin/classic/global/menulist.css

toolkit/themes/gnomestripe/mozapps/extensions/extensions.css

@@ -35,25 +35,7 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-#addons-page {
-  -moz-appearance: none;
-  padding: 18px;
-  background-color: Window;  
-  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 160px),
-                    -moz-linear-gradient(-moz-dialog, Window 160px);
-  color: WindowText;
-}
-
-#view-port-container {
-  /* Needed to allow the radius to clip the inner content, see bug 595656 */
-  /* Disabled because of bug 623615
-  overflow: hidden;
-  */
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  border: 1px solid ThreeDShadow;
-  border-radius: 5px;
-}
+@import url("chrome://global/skin/inContentUI.css");
 
 
 /*** global warnings ***/

toolkit/themes/pinstripe/global/inContentUI.css

@@ -0,0 +1,62 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is In-Content UI.
+ *
+ * The Initial Developer of the Original Code is
+ * the Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Blair McBride <bmcbride@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+%include shared.inc
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Page background */
+:root {
+  -moz-appearance: none;
+  padding: 18px;
+  background-image: /* Texture */
+                    url("chrome://global/skin/inContentUI/background-texture.png"),
+                    /* Gradient */
+                    -moz-linear-gradient(top, #ADB5C2, #BFC6D1);
+}
+
+/* Content */
+.main-content {
+  /* Needed to allow the radius to clip the inner content, see bug 595656 */
+  /* Disabled because of bug 623615
+  overflow: hidden;
+  */
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05));
+  border: 1px solid rgba(50, 65, 92, 0.4);
+  border-radius: 5px;
+}

toolkit/themes/pinstripe/global/jar.mn

@@ -24,6 +24,7 @@ toolkit.jar:
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/groupbox.css
+* skin/classic/global/inContentUI.css
   skin/classic/global/linkTree.css
   skin/classic/global/listbox.css
   skin/classic/global/menu.css
@@ -130,6 +131,7 @@ toolkit.jar:
   skin/classic/global/icons/question-large.png                       (icons/question-large.png)
   skin/classic/global/icons/sslWarning.png                           (icons/sslWarning.png)
   skin/classic/global/icons/webconsole.png                           (icons/webconsole.png)
+  skin/classic/global/inContentUI/background-texture.png            (inContentUI/background-texture.png)
   skin/classic/global/notification/close.png                         (notification/close.png)
   skin/classic/global/notification/critical-bar-background.png       (notification/critical-bar-background.png)
   skin/classic/global/notification/error-icon.png                    (notification/error-icon.png)

toolkit/themes/pinstripe/mozapps/extensions/extensions.css

@@ -35,30 +35,13 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+@import url("chrome://global/skin/inContentUI.css");
+
 %include ../../global/shared.inc
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
-#addons-page {
-  -moz-appearance: none;
-  padding: 18px;
-  background-image: /* Texture */
-                    url("chrome://mozapps/skin/extensions/background-texture.png"),
-                    /* Gradient */
-                    -moz-linear-gradient(top, #ADB5C2, #BFC6D1);
-}
-
-#view-port-container {
-  /* Needed to allow the radius to clip the inner content, see bug 595656 */
-  /* Disabled because of bug 623615
-  overflow: hidden;
-  */
-  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05));
-  border: 1px solid rgba(50, 65, 92, 0.4);
-  border-radius: 5px;
-}
-
 
 /*** global warnings ***/
 

toolkit/themes/pinstripe/mozapps/jar.mn

@@ -35,7 +35,6 @@ toolkit.jar:
   skin/classic/mozapps/extensions/alerticon-error.png             (extensions/alerticon-error.png)
   skin/classic/mozapps/extensions/alerticon-info-positive.png     (extensions/alerticon-info-positive.png)
   skin/classic/mozapps/extensions/alerticon-info-negative.png     (extensions/alerticon-info-negative.png)
-  skin/classic/mozapps/extensions/background-texture.png          (extensions/background-texture.png)
   skin/classic/mozapps/extensions/search.png                      (extensions/search.png)
   skin/classic/mozapps/extensions/about.css                       (extensions/about.css)
 * skin/classic/mozapps/extensions/extensions.css                  (extensions/extensions.css)

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

@@ -0,0 +1,3 @@
+%define WINSTRIPE_AERO
+%include inContentUI.css
+%undef WINSTRIPE_AERO

toolkit/themes/winstripe/global/inContentUI.css

@@ -0,0 +1,107 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is In-Content UI.
+ *
+ * The Initial Developer of the Original Code is
+ * the Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Blair McBride <bmcbride@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+/* Page background */
+:root {
+  -moz-appearance: none;
+  padding: 18px;
+  background-repeat: repeat;
+  color: -moz-dialogText;
+  background-color: -moz-dialog;
+  background-image: /* Fade-out texture at the top, and blend with browser tab */
+                    -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0) 30%),
+                    /* Texture */
+                    url("chrome://global/skin/inContentUI/background-texture.png");
+}
+
+%ifdef WINSTRIPE_AERO
+@media all and (-moz-windows-default-theme) {
+  :root {
+    color: #000;
+    background-color: #CCD9EA;
+    background-image: /* Fade-out texture at the top */
+                      -moz-linear-gradient(top, rgb(231,237,246), rgba(231,237,246,0) 156px),
+                      /* Texture */
+                      url("chrome://global/skin/inContentUI/background-texture.png");
+  }
+}
+
+@media all and (-moz-windows-compositor) {
+  :root {
+    color: #000;
+    /* Blame shorlander for this monstrosity. */
+    background-image: /* Fade-out texture and light beams at the top */
+                      -moz-linear-gradient(top, rgb(231,237,246) 3px, rgba(231,237,246,0) 156px),
+                      /* Side gradients */
+                      -moz-linear-gradient(left,
+                                           rgba(255,255,255,0.2), rgba(255,255,255,0) 40%,
+                                           rgba(255,255,255,0) 60%, rgba(255,255,255,0.2)),
+                      /* Aero-style light beams */
+                      -moz-linear-gradient(left 32deg,
+                                           /* First light beam */
+                                           rgba(255,255,255,0) 19.5%, rgba(255,255,255,0.1) 20%,
+                                           rgba(255,255,255,0.1) 21.5%, rgba(255,255,255,0.2) 22%,
+                                           rgba(255,255,255,0.2) 25.5%, rgba(255,255,255,0.1) 26%,
+                                           rgba(255,255,255,0.1) 27.5%, rgba(255,255,255,0) 28%,
+                                           /* Second light beam */
+                                           rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.1) 50%,
+                                           rgba(255,255,255,0.1) 52.5%, rgba(255,255,255,0.2) 53%,
+                                           rgba(255,255,255,0.2) 54.5%, rgba(255,255,255,0.1) 55%,
+                                           rgba(255,255,255,0.1) 57.5%, rgba(255,255,255,0) 58%,
+                                           /* Third light beam */
+                                           rgba(255,255,255,0) 87%, rgba(255,255,255,0.2) 90%),
+                      /* Texture */
+                      url("chrome://global/skin/inContentUI/background-texture.png");
+  }
+}
+%endif
+
+/* Content */
+.main-content {
+  /* Needed to allow the radius to clip the inner content, see bug 595656 */
+  /* Disabled because of bug 623615
+  overflow: hidden;
+  */
+  background-color: rgba(255, 255, 255, 0.35);
+  background-image: -moz-linear-gradient(top,
+                                         rgba(255, 255, 255, 0),
+                                         rgba(255, 255, 255, 0.75));
+  border: 1px solid #C3CEDF;
+  border-radius: 5px;
+}

toolkit/themes/winstripe/global/jar.mn

@@ -27,6 +27,7 @@ toolkit.jar:
 *       skin/classic/global/global.css
         skin/classic/global/globalBindings.xml
         skin/classic/global/groupbox.css
+*       skin/classic/global/inContentUI.css
         skin/classic/global/linkTree.css
         skin/classic/global/listbox.css
 *       skin/classic/global/menu.css
@@ -145,6 +146,7 @@ toolkit.jar:
         skin/classic/global/icons/webconsole.png                 (icons/webconsole.png)
         skin/classic/global/icons/windowControls.png             (icons/windowControls.png)
         skin/classic/global/icons/wrap.png                       (icons/wrap.png)
+        skin/classic/global/inContentUI/background-texture.png  (inContentUI/background-texture.png)
         skin/classic/global/media/videocontrols.css              (media/videocontrols.css)
         skin/classic/global/media/pauseButton.png                (media/pauseButton.png)
         skin/classic/global/media/playButton.png                 (media/playButton.png)
@@ -204,6 +206,7 @@ toolkit.jar:
 *       skin/classic/aero/global/global.css
         skin/classic/aero/global/globalBindings.xml
         skin/classic/aero/global/groupbox.css
+*       skin/classic/aero/global/inContentUI.css                        (inContentUI-aero.css)
         skin/classic/aero/global/linkTree.css
         skin/classic/aero/global/listbox.css
 *       skin/classic/aero/global/menu.css                                (menu-aero.css)
@@ -322,6 +325,7 @@ toolkit.jar:
         skin/classic/aero/global/icons/webconsole.png                    (icons/webconsole.png)
         skin/classic/aero/global/icons/windowControls.png                (icons/windowControls-aero.png)
         skin/classic/aero/global/icons/wrap.png                          (icons/wrap-aero.png)
+        skin/classic/aero/global/inContentUI/background-texture.png     (inContentUI/background-texture.png)
         skin/classic/aero/global/media/videocontrols.css                 (media/videocontrols.css)
         skin/classic/aero/global/media/pauseButton.png                   (media/pauseButton.png)
         skin/classic/aero/global/media/playButton.png                    (media/playButton.png)

toolkit/themes/winstripe/mozapps/extensions/extensions.css

@@ -35,73 +35,10 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
+@import url("chrome://global/skin/inContentUI.css");
+
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-#addons-page {
-  -moz-appearance: none;
-  padding: 18px;
-  background-repeat: repeat;
-  color: -moz-dialogText;
-  background-color: -moz-dialog;
-  background-image: /* Fade-out texture at the top, and blend with browser tab */
-                    -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0) 30%),
-                    /* Texture */
-                    url("chrome://mozapps/skin/extensions/background-texture.png");
-}
-
-%ifdef WINSTRIPE_AERO
-@media all and (-moz-windows-default-theme) {
-  #addons-page {
-    color: #000;
-    background-color: #CCD9EA;
-    background-image: /* Fade-out texture at the top */
-                      -moz-linear-gradient(top, rgb(231,237,246), rgba(231,237,246,0) 156px),
-                      /* Texture */
-                      url("chrome://mozapps/skin/extensions/background-texture.png");
-  }
-}
-@media all and (-moz-windows-compositor) {
-  #addons-page {
-    color: #000;
-    /* Blame shorlander for this monstrosity. */
-    background-image: /* Fade-out texture and light beams at the top */
-                      -moz-linear-gradient(top, rgb(231,237,246) 3px, rgba(231,237,246,0) 156px),
-                      /* Side gradients */
-                      -moz-linear-gradient(left,
-                                           rgba(255,255,255,0.2), rgba(255,255,255,0) 40%,
-                                           rgba(255,255,255,0) 60%, rgba(255,255,255,0.2)),
-                      /* Aero-style light beams */
-                      -moz-linear-gradient(left 32deg,
-                                           /* First light beam */
-                                           rgba(255,255,255,0) 19.5%, rgba(255,255,255,0.1) 20%,
-                                           rgba(255,255,255,0.1) 21.5%, rgba(255,255,255,0.2) 22%,
-                                           rgba(255,255,255,0.2) 25.5%, rgba(255,255,255,0.1) 26%,
-                                           rgba(255,255,255,0.1) 27.5%, rgba(255,255,255,0) 28%,
-                                           /* Second light beam */
-                                           rgba(255,255,255,0) 49.5%, rgba(255,255,255,0.1) 50%,
-                                           rgba(255,255,255,0.1) 52.5%, rgba(255,255,255,0.2) 53%,
-                                           rgba(255,255,255,0.2) 54.5%, rgba(255,255,255,0.1) 55%,
-                                           rgba(255,255,255,0.1) 57.5%, rgba(255,255,255,0) 58%,
-                                           /* Third light beam */
-                                           rgba(255,255,255,0) 87%, rgba(255,255,255,0.2) 90%),
-                      /* Texture */
-                      url("chrome://mozapps/skin/extensions/background-texture.png");
-  }
-}
-%endif
-
-#view-port-container {
-  /* Needed to allow the radius to clip the inner content, see bug 595656 */
-  /* Disabled because of bug 623615
-  overflow: hidden;
-  */
-  background-color: rgba(255, 255, 255, 0.35);
-  background-image: -moz-linear-gradient(top,
-                                         rgba(255, 255, 255, 0),
-                                         rgba(255, 255, 255, 0.75));
-  border: 1px solid #C3CEDF;
-  border-radius: 5px;
-}
 
 .nav-button {
   list-style-image: url(chrome://mozapps/skin/extensions/navigation.png);

toolkit/themes/winstripe/mozapps/jar.mn

@@ -41,7 +41,6 @@ toolkit.jar:
         skin/classic/mozapps/extensions/alerticon-error.png        (extensions/alerticon-error.png)
         skin/classic/mozapps/extensions/alerticon-info-positive.png (extensions/alerticon-info-positive.png)
         skin/classic/mozapps/extensions/alerticon-info-negative.png (extensions/alerticon-info-negative.png)
-        skin/classic/mozapps/extensions/background-texture.png     (extensions/background-texture.png)
         skin/classic/mozapps/extensions/eula.css                   (extensions/eula.css)
         skin/classic/mozapps/handling/handling.css                 (handling/handling.css)
         skin/classic/mozapps/passwordmgr/key.png                   (passwordmgr/key.png)
@@ -117,7 +116,6 @@ toolkit.jar:
         skin/classic/aero/mozapps/extensions/alerticon-error.png           (extensions/alerticon-error.png)
         skin/classic/aero/mozapps/extensions/alerticon-info-positive.png   (extensions/alerticon-info-positive.png)
         skin/classic/aero/mozapps/extensions/alerticon-info-negative.png   (extensions/alerticon-info-negative.png)
-        skin/classic/aero/mozapps/extensions/background-texture.png        (extensions/background-texture.png)
         skin/classic/aero/mozapps/extensions/eula.css                      (extensions/eula.css)
         skin/classic/aero/mozapps/handling/handling.css                    (handling/handling.css)
         skin/classic/aero/mozapps/passwordmgr/key.png                      (passwordmgr/key.png)