Bug 1062127 - Style the in-content preference dialogs. r=dao
authorRichard Marti <richard.marti@gmail.com>
Wed, 12 Nov 2014 10:15:42 +0100
changeset 215264 f68f95516633876c5a12e37d4b5c3facbc936010
parent 215263 3e5a8432885b8a46730f81d2fb96d9ed96eb5567
child 215265 68a30a046bc552e1daa83be98273a61ddfc286c3
push id51731
push userryanvm@gmail.com
push dateWed, 12 Nov 2014 20:52:34 +0000
treeherdermozilla-inbound@90731dbaab2d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1062127
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1062127 - Style the in-content preference dialogs. r=dao
browser/components/preferences/in-content/subdialogs.js
browser/themes/linux/jar.mn
browser/themes/linux/preferences/in-content/dialog.css
browser/themes/linux/preferences/in-content/preferences.css
browser/themes/osx/jar.mn
browser/themes/osx/preferences/in-content/dialog.css
browser/themes/osx/preferences/in-content/preferences.css
browser/themes/shared/incontentprefs/dialog.inc.css
browser/themes/shared/incontentprefs/preferences.css
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/jar.mn
browser/themes/windows/preferences/in-content/dialog.css
browser/themes/windows/preferences/in-content/preferences.css
--- a/browser/components/preferences/in-content/subdialogs.js
+++ b/browser/components/preferences/in-content/subdialogs.js
@@ -7,17 +7,18 @@
 let gSubDialog = {
   _closingCallback: null,
   _frame: null,
   _overlay: null,
   _box: null,
   _injectedStyleSheets: ["chrome://mozapps/content/preferences/preferences.css",
                          "chrome://browser/skin/preferences/preferences.css",
                          "chrome://global/skin/in-content/common.css",
-                         "chrome://browser/skin/preferences/in-content/preferences.css"],
+                         "chrome://browser/skin/preferences/in-content/preferences.css",
+                         "chrome://browser/skin/preferences/in-content/dialog.css"],
 
   init: function() {
     this._frame = document.getElementById("dialogFrame");
     this._overlay = document.getElementById("dialogOverlay");
     this._box = document.getElementById("dialogBox");
 
     // Make the close button work.
     let dialogClose = document.getElementById("dialogClose");
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -148,16 +148,17 @@ browser.jar:
   skin/classic/browser/preferences/alwaysAsk.png      (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/mail.png           (preferences/mail.png)
   skin/classic/browser/preferences/Options.png        (preferences/Options.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/preferences/Options-sync.png   (preferences/Options-sync.png)
 #endif
 * skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
+* skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/in-content/favicon.ico     (../shared/incontentprefs/favicon.ico)
   skin/classic/browser/preferences/in-content/icons.png       (../shared/incontentprefs/icons.png)
   skin/classic/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   skin/classic/browser/preferences/aboutPermissions.css (preferences/aboutPermissions.css)
   skin/classic/browser/social/services-16.png         (social/services-16.png)
   skin/classic/browser/social/services-64.png         (social/services-64.png)
   skin/classic/browser/social/share-button.png        (social/share-button.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/linux/preferences/in-content/dialog.css
@@ -0,0 +1,13 @@
+/* - 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/. */
+
+%include ../../../shared/incontentprefs/dialog.inc.css
+
+label,
+textbox,
+description,
+.tab-text,
+caption > label {
+  font-size: 1.2em;
+}
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -1,13 +1,13 @@
 /* - 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/. */
 
-%include ../../../shared/incontentprefs/preferences.css
+%include ../../../shared/incontentprefs/preferences.inc.css
 
 spinbuttons {
   -moz-appearance: none;
 }
 
 .treecol-sortdirection {
   /* override the Linux only toolkit rule */
   -moz-appearance: none;
@@ -34,16 +34,28 @@ menulist.actionsMenu > .menulist-dropmar
   margin-bottom: 11px;
 }
 
 textbox + button,
 filefield + button {
   -moz-margin-start: -4px;
 }
 
-#dialogTitle {
-  -moz-margin-start: 12px !important;
+/**
+ * Dialog
+ */
+
+#dialogBox {
+  padding: 20px;
 }
 
-.actionButtons {
-  margin-right: 8px !important;
-  margin-left: 8px !important;
+#dialogTitle {
+  font-size: 1em;
 }
+
+.titlebar {
+  margin-bottom: 12px;
+}
+
+.close-icon {
+  margin-top: -32px;
+  -moz-margin-end: -15px;
+}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -248,16 +248,17 @@ browser.jar:
   skin/classic/browser/preferences/application.png          (preferences/application.png)
   skin/classic/browser/preferences/Options.png              (preferences/Options.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/preferences/Options-sync.png         (preferences/Options-sync.png)
 #endif
   skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
 * skin/classic/browser/preferences/preferences.css          (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
+* skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/in-content/favicon.ico     (../shared/incontentprefs/favicon.ico)
   skin/classic/browser/preferences/in-content/icons.png       (../shared/incontentprefs/icons.png)
   skin/classic/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
   skin/classic/browser/preferences/applications.css         (preferences/applications.css)
   skin/classic/browser/preferences/aboutPermissions.css     (preferences/aboutPermissions.css)
   skin/classic/browser/social/services-16.png               (social/services-16.png)
   skin/classic/browser/social/services-16@2x.png            (social/services-16@2x.png)
   skin/classic/browser/social/services-64.png               (social/services-64.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/osx/preferences/in-content/dialog.css
@@ -0,0 +1,30 @@
+/* - 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/. */
+
+%include ../../../shared/incontentprefs/dialog.inc.css
+
+prefwindow,
+.windowDialog {
+  font: message-box !important;
+}
+
+label,
+textbox,
+description,
+.tab-text,
+caption > label {
+  font-size: 1.3em;
+}
+
+button {
+  font-size: 1em;
+}
+
+caption {
+  font: message-box;
+}
+
+.prefWindow-dlgbuttons {
+  margin: 0;
+}
--- a/browser/themes/osx/preferences/in-content/preferences.css
+++ b/browser/themes/osx/preferences/in-content/preferences.css
@@ -1,13 +1,13 @@
 /* - 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/. */
 
-%include ../../../shared/incontentprefs/preferences.css
+%include ../../../shared/incontentprefs/preferences.inc.css
 
 prefpane .groupbox-title {
   background: none;
   margin-bottom: 0;
 }
 
 spinbuttons {
   -moz-appearance: none;
@@ -45,19 +45,37 @@ spinbuttons {
 textbox + button {
   -moz-margin-start: -4px;
 }
 
 filefield + button {
   -moz-margin-start: -8px;
 }
 
-#dialogTitle {
-  -moz-margin-start: 6px !important;
-}
-
 #popupPolicyRow {
   /* Override styles from
      browser/themes/osx/preferences/preferences.css */
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
   border-bottom: none;
 }
+
+/**
+ * Dialog
+ */
+
+#dialogBox {
+  padding: 15px 20px 20px;
+}
+
+#dialogTitle {
+  font-size: 1.1em;
+}
+
+.titlebar {
+  margin-bottom: 9px;
+  -moz-padding-start: 0;
+}
+
+.close-icon {
+  margin-top: -29px;
+  -moz-margin-end: -14px;
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/incontentprefs/dialog.inc.css
@@ -0,0 +1,68 @@
+%if 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/. */
+%endif
+
+dialog,
+window,
+prefpane,
+prefwindow,
+.windowDialog {
+  -moz-appearance: none;
+  background-color: #fbfbfb;
+  color: #424e5a;
+  margin: 0;
+  padding: 0;
+}
+
+.contentPane {
+  margin: 0;
+}
+
+tabbox {
+  /* override the rule in certManager.xul */
+  margin: 0 0 5px !important;
+}
+
+tabpanels {
+  font-size: 1em;
+}
+
+tabs,
+label,
+description,
+#useDocumentColors {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+tree:not(#rejectsTree) {
+  min-height: 15em;
+}
+
+.actionButtons {
+  margin: 3px 0 0 !important;
+}
+
+caption {
+  -moz-padding-start: 0;
+}
+
+groupbox {
+  font-size: 1em;
+  margin-top: 0;
+  margin-right: 4px;
+  margin-left: 4px;
+  padding-top: 0;
+  padding-bottom: 5px;
+}
+
+prefpane .groupbox-body {
+  padding: 0 0 5px;
+}
+
+groupbox description {
+  margin-right: 0;
+  margin-left: 0;
+}
rename from browser/themes/shared/incontentprefs/preferences.css
rename to browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/themes/shared/incontentprefs/preferences.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -1,26 +1,16 @@
 %if 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/. */
 %endif
 @namespace html "http://www.w3.org/1999/xhtml";
 
-#dialogBox,
-dialog,
-window,
-prefwindow,
-.windowDialog {
-  -moz-appearance: none;
-  background-color: #f1f1f1;
-  color: #424E5A;
-}
-
-prefpane {
+#mainPrefPane {
   max-width: 800px;
   padding: 0;
   font: message-box;
   font-size: 1.25rem;
   line-height: 22px;
 }
 
 * {
@@ -303,39 +293,46 @@ description > html|a {
 
 @media (min-resolution: 2dppx) {
   #trackingProtectionImage {
     list-style-image: url(chrome://browser/skin/bad-content-blocked-16@2x.png);
   }
 }
 
 /**
- * Sub-dialog
+ * Dialog
  */
 
 #dialogOverlay {
   background-color: rgba(0,0,0,0.5);
   visibility: hidden;
 }
 
 #dialogBox {
-  border: 1px solid #666;
+  background-color: #fbfbfb;
+  color: #424e5a;
+  font-size: 14px;
+  border: 1px solid rgba(0,0,0,0.35);
+  border-radius: 2.5px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
   display: -moz-box;
   margin: 0;
-  padding-right: 6px;
-  padding-left: 6px;
 }
 
 #dialogBox[resizable="true"] {
   resize: both;
   overflow: hidden;
-  min-height: 30em;
+  min-height: 20em;
   min-width: 66ch;
 }
 
+.titlebar {
+  -moz-margin-start: 4px;
+}
+
 .close-icon {
   background-color: transparent !important;
   border: none;
   box-shadow: none;
   height: 18px;
   padding: 0;
   min-width: 18px;
 }
@@ -343,24 +340,15 @@ description > html|a {
 #dialogBox > .groupbox-body {
   -moz-appearance: none;
   padding: 0;
 }
 
 #dialogFrame {
   -moz-box-flex: 1;
   /* Default dialog dimensions */
-  height: 30em;
+  height: 20em;
   width: 66ch;
 }
 
-tree:not(#rejectsTree) {
-  min-height: 15em;
-}
-
-:-moz-any(dialog, window, prefwindow) groupbox {
-  -moz-margin-start: 8px;
-  -moz-margin-end: 8px;
-}
-
 /**
- * End sub-dialog
+ * End Dialog
  */
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -176,16 +176,17 @@ browser.jar:
         skin/classic/browser/preferences/mail.png                    (preferences/mail.png)
         skin/classic/browser/preferences/Options.png                 (preferences/Options.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/preferences/Options-sync.png            (preferences/Options-sync.png)
 #endif
         skin/classic/browser/preferences/saveFile.png                (preferences/saveFile.png)
 *       skin/classic/browser/preferences/preferences.css             (preferences/preferences.css)
 *       skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
+*       skin/classic/browser/preferences/in-content/dialog.css       (preferences/in-content/dialog.css)
         skin/classic/browser/preferences/in-content/favicon.ico      (../shared/incontentprefs/favicon.ico)
         skin/classic/browser/preferences/in-content/icons.png        (../shared/incontentprefs/icons.png)
         skin/classic/browser/preferences/in-content/icons@2x.png     (../shared/incontentprefs/icons@2x.png)
         skin/classic/browser/preferences/applications.css            (preferences/applications.css)
         skin/classic/browser/preferences/aboutPermissions.css        (preferences/aboutPermissions.css)
         skin/classic/browser/social/services-16.png                  (social/services-16.png)
         skin/classic/browser/social/services-64.png                  (social/services-64.png)
         skin/classic/browser/social/chat-icons.svg                   (../shared/social/chat-icons.svg)
@@ -613,17 +614,18 @@ browser.jar:
         skin/classic/aero/browser/preferences/mail.png               (preferences/mail-aero.png)
         skin/classic/aero/browser/preferences/Options.png            (preferences/Options-aero.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/preferences/Options-sync.png       (preferences/Options-sync.png)
 #endif
         skin/classic/aero/browser/preferences/saveFile.png           (preferences/saveFile-aero.png)
 *       skin/classic/aero/browser/preferences/preferences.css        (preferences/preferences.css)
 *       skin/classic/aero/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
-        skin/classic/aero/browser/preferences/in-content/favicon.ico      (../shared/incontentprefs/favicon.ico)
+*       skin/classic/aero/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
+        skin/classic/aero/browser/preferences/in-content/favicon.ico     (../shared/incontentprefs/favicon.ico)
         skin/classic/aero/browser/preferences/in-content/icons.png       (../shared/incontentprefs/icons.png)
         skin/classic/aero/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
         skin/classic/aero/browser/preferences/applications.css       (preferences/applications.css)
         skin/classic/aero/browser/preferences/aboutPermissions.css   (preferences/aboutPermissions.css)
         skin/classic/aero/browser/social/services-16.png             (social/services-16.png)
         skin/classic/aero/browser/social/services-64.png             (social/services-64.png)
         skin/classic/aero/browser/social/chat-icons.svg              (../shared/social/chat-icons.svg)
         skin/classic/aero/browser/social/gear_default.png            (../shared/social/gear_default.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/windows/preferences/in-content/dialog.css
@@ -0,0 +1,13 @@
+/* - 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/. */
+
+%include ../../../shared/incontentprefs/dialog.inc.css
+
+label,
+textbox,
+description,
+.tab-text,
+caption > label {
+  font-size: 1.2em;
+}
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -1,23 +1,35 @@
 /* - 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/. */
 
-%include ../../../shared/incontentprefs/preferences.css
+%include ../../../shared/incontentprefs/preferences.inc.css
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   -moz-margin-end: 9px;
 }
 
 textbox + button,
 filefield + button {
   -moz-margin-start: -4px;
 }
 
-#dialogTitle {
-  -moz-margin-start: 13px !important;
+/**
+ * Dialog
+ */
+
+#dialogBox {
+  padding: 18px 20px 20px;
 }
 
-.actionButtons {
-  margin-right: 8px !important;
-  margin-left: 8px !important;
+#dialogTitle {
+  font-size: 1em;
 }
+
+.titlebar {
+  margin-bottom: 12px;
+}
+
+.close-icon {
+  margin-top: -28px;
+  -moz-margin-end: -15px;
+}