Bug 1154028 - Move reader controls styles to scoped style sheet. r=Gijs
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Thu, 23 Apr 2015 10:59:03 -0700
changeset 241138 d8e9d0c53615f9c8736af5f938c2535f491aa84b
parent 241137 63669a3ca6c3e929de37238542f6a0d669caaf8e
child 241139 e988560a90534240265f65b29b89ee06a0fd4c10
push id59036
push usercbook@mozilla.com
push dateMon, 27 Apr 2015 10:37:48 +0000
treeherdermozilla-inbound@ad388474898c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1154028
milestone40.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 1154028 - Move reader controls styles to scoped style sheet. r=Gijs
mobile/android/themes/core/aboutReaderControls.css
mobile/android/themes/core/jar.mn
toolkit/components/reader/content/aboutReader.html
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/aboutReader.css
toolkit/themes/shared/aboutReaderContent.css
toolkit/themes/shared/aboutReaderControls.css
toolkit/themes/windows/global/jar.mn
new file mode 100644
--- /dev/null
+++ b/mobile/android/themes/core/aboutReaderControls.css
@@ -0,0 +1,5 @@
+/* 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/. */
+
+/* TODO: Move reader view controls styles out of aboutReader.css */
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -18,26 +18,28 @@ chrome.jar:
   skin/aboutFeedback.css                    (aboutFeedback.css)
 #ifdef MOZ_SERVICES_HEALTHREPORT
   skin/aboutHealthReport.css                (aboutHealthReport.css)
 #endif
   skin/aboutMemory.css                      (aboutMemory.css)
   skin/aboutPrivateBrowsing.css             (aboutPrivateBrowsing.css)
   skin/aboutReader.css                      (aboutReader.css)
   skin/aboutReaderContent.css               (aboutReaderContent.css)
+  skin/aboutReaderControls.css              (aboutReaderControls.css)
   skin/aboutSupport.css                     (aboutSupport.css)
   skin/browser.css                          (browser.css)
 * skin/content.css                          (content.css)
   skin/config.css                           (config.css)
   skin/touchcontrols.css                    (touchcontrols.css)
   skin/netError.css                         (netError.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/aboutMemory.css chrome://browser/skin/aboutMemory.css
 % override chrome://global/skin/aboutReader.css chrome://browser/skin/aboutReader.css
 % override chrome://global/skin/aboutReaderContent.css chrome://browser/skin/aboutReaderContent.css
+% override chrome://global/skin/aboutReaderControls.css chrome://browser/skin/aboutReaderControls.css
 % override chrome://global/skin/aboutSupport.css chrome://browser/skin/aboutSupport.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
 #ifdef MOZ_PAY
   skin/payment.css                         (payment.css)
 #endif
 #
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -8,38 +8,51 @@
   <link rel="stylesheet" href="chrome://global/skin/aboutReader.css" type="text/css"/>
 
   <script type="text/javascript;version=1.8" src="chrome://global/content/reader/aboutReader.js"></script>
 </head>
 
 <body>
   <div id="container" class="container">
     <div id="reader-header" class="header">
+      <style scoped>
+        @import url("chrome://global/skin/aboutReaderControls.css");
+      </style>
       <a id="reader-domain" class="domain"></a>
       <div class="domain-border"></div>
       <h1 id="reader-title"></h1>
       <div id="reader-credits" class="credits"></div>
     </div>
 
     <div class="content">
       <style scoped>
         @import url("chrome://global/skin/aboutReaderContent.css");
       </style>
       <div id="moz-reader-content"></div>
     </div>
 
-    <div id="reader-message" class="message">
+    <div class="message">
+      <style scoped>
+        @import url("chrome://global/skin/aboutReaderControls.css");
+      </style>
+      <div id="reader-message"></div>
     </div>
 
     <div id="reader-footer" class="footer">
+      <style scoped>
+        @import url("chrome://global/skin/aboutReaderControls.css");
+      </style>
       <button id="remove-button" class="button remove-button"/>
     </div>
   </div>
 
   <ul id="reader-toolbar" class="toolbar">
+    <style scoped>
+      @import url("chrome://global/skin/aboutReaderControls.css");
+    </style>
     <li><button id="close-button" class="button close-button"/></li>
     <li><button id="share-button" class="button share-button"/></li>
     <ul id="style-dropdown" class="dropdown">
       <li><button class="dropdown-toggle button style-button"/></li>
       <li id="reader-popup" class="dropdown-popup">
         <div id="font-type-buttons"></div>
         <hr></hr>
         <div id="font-size-buttons">
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -5,18 +5,19 @@
 toolkit.jar:
 % skin global classic/1.0 %skin/classic/global/
   skin/classic/global/10pct_transparent_grey.png
   skin/classic/global/50pct_transparent_grey.png
   skin/classic/global/about.css                                      (../../shared/about.css)
   skin/classic/global/aboutCache.css                                 (../../shared/aboutCache.css)
   skin/classic/global/aboutCacheEntry.css                            (../../shared/aboutCacheEntry.css)
   skin/classic/global/aboutMemory.css                                (../../shared/aboutMemory.css)
-* skin/classic/global/aboutReader.css                                (../../shared/aboutReader.css)
+  skin/classic/global/aboutReader.css                                (../../shared/aboutReader.css)
   skin/classic/global/aboutReaderContent.css                         (../../shared/aboutReaderContent.css)
+* skin/classic/global/aboutReaderControls.css                        (../../shared/aboutReaderControls.css)
   skin/classic/global/aboutSupport.css                               (../../shared/aboutSupport.css)
   skin/classic/global/appPicker.css                                  (../../shared/appPicker.css)
   skin/classic/global/arrow.css
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
   skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -16,458 +16,100 @@ body {
     -moz-padding-start: 51px;
   }
 }
 
 body.loaded {
   transition: color 0.4s, background-color 0.4s;
 }
 
-.light,
-.light-button {
+body.light {
   color: #333333;
   background-color: #ffffff;
 }
 
-.dark,
-.dark-button {
+body.dark {
   color: #eeeeee;
   background-color: #333333;
 }
 
-.dark *::-moz-selection {
+body.dark *::-moz-selection {
   background-color: #FFFFFF;
   color: #0095DD;
 }
-.dark a::-moz-selection {
+body.dark a::-moz-selection {
   color: #DD4800;
 }
 
-.sepia,
-.sepia-button {
+body.sepia {
   color: #333333;
   background-color: #f0ece7;
 }
 
-.sans-serif,
-.sans-serif-button,
-.sans-serif .remove-button {
+body.sans-serif,
+body.sans-serif .remove-button {
   font-family: Helvetica, Arial, sans-serif;
 }
 
-.serif,
-.serif-button,
-.serif .remove-button {
+body.serif,
+body.serif .remove-button  {
   font-family: Georgia, "Times New Roman", serif;
 }
 
-.font-size1 {
+body.font-size1 {
   font-size: 10px;
 }
 
-.font-size2 {
+body.font-size2 {
   font-size: 12px;
 }
 
-.font-size3 {
+body.font-size3 {
   font-size: 14px;
 }
 
-.font-size4  {
+body.font-size4  {
   font-size: 16px;
 }
 
-.font-size5 {
+body.font-size5 {
   font-size: 18px;
 }
 
-.font-size6 {
+body.font-size6 {
   font-size: 20px;
 }
 
-.font-size7 {
+body.font-size7 {
   font-size: 22px;
 }
 
-.font-size8 {
+body.font-size8 {
   font-size: 24px;
 }
 
-.font-size9 {
+body.font-size9 {
   font-size: 26px;
 }
 
-
-/* Loading/error message */
-
-.message {
-  margin-top: 40px;
-  display: none;
-  text-align: center;
-  width: 100%;
-  font-size: 0.9em;
-}
-
-/* Header */
-
-.header {
-  text-align: start;
-  display: none;
-}
-
-.domain {
-  font-size: 0.9em;
-  line-height: 1.48em;
-  padding-bottom: 4px;
-  font-family: Helvetica, Arial, sans-serif;
-  text-decoration: none;
-  border-bottom: 1px solid;
-  color: #0095dd;
-}
-
-.light > .container > .header > .domain,
-.sepia > .container > .header > .domain {
-  border-bottom-color: #333333;
-}
-
-.dark > .container > .header > .domain {
-  border-bottom-color: #eeeeee;
-}
+/* Override some controls and content styles based on color scheme */
 
-.header > h1 {
-  font-size: 1.33em;
-  line-height: 1.25em;
-  width: 100%;
-  margin: 30px 0;
-  padding: 0;
-}
-
-.header > .credits {
-  font-size: 0.9em;
-  line-height: 1.48em;
-  margin: 0 0 30px 0;
-  padding: 0;
-  font-style: italic;
-}
-
-/*======= Controls toolbar =======*/
-
-.toolbar {
-  font-family: Helvetica, Arial, sans-serif;
-  position: fixed;
-  height: 100%;
-  top: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  background-color: #fbfbfb;
-  -moz-user-select: none;
-  border-right: 1px solid #b5b5b5;
-}
-
-.button {
-  display: block;
-  background-size: 24px 24px;
-  background-repeat: no-repeat;
-  color: #333;
-  background-color: #fbfbfb;
-  height: 40px;
-  padding: 0;
-}
-
-.toolbar .button {
-  width: 40px;
-  background-position: center;
-  margin-right: -1px;
-  border-top: 0;
-  border-left: 0;
-  border-right: 1px solid #b5b5b5;
-  border-bottom: 1px solid #c1c1c1;
+body.light > .container > .header > .domain,
+body.sepia > .container > .header > .domain {
+  border-bottom-color: #333333 !important;
 }
 
-.button[hidden] {
-  display: none;
-}
-
-.dropdown {
-  text-align: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.dropdown li {
-  margin: 0;
-  padding: 0;
-}
-
-/*======= Font style popup =======*/
-
-.dropdown-popup {
-  min-width: 300px;
-  text-align: start;
-  position: absolute;
-  left: 48px; /* offset to account for toolbar width */
-  z-index: 1000;
-  background-color: #fbfbfb;
-  visibility: hidden;
-  border-radius: 4px;
-  border: 1px solid #b5b5b5;
-  border-bottom-width: 0;
-  box-shadow: 0 1px 12px #666;
-}
-
-.dropdown-popup > hr {
-  display: none;
-}
-
-.open > .dropdown-popup {
-  visibility: visible;
-}
-
-.dropdown-arrow {
-  position: absolute;
-  top: 30px; /* offset arrow from top of popup */
-  left: -16px;
-  width: 24px;
-  height: 24px;
-  background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
-  display: block;
-}
-
-#font-type-buttons,
-#font-size-buttons,
-#color-scheme-buttons {
-  display: flex;
-  flex-direction: row;
-}
-
-#font-type-buttons > button:first-child {
-  border-top-left-radius: 3px;
-}
-#font-type-buttons > button:last-child {
-  border-top-right-radius: 3px;
-}
-#color-scheme-buttons > button:first-child {
-  border-bottom-left-radius: 3px;
-}
-#color-scheme-buttons > button:last-child {
-  border-bottom-right-radius: 3px;
-}
-
-#font-type-buttons > button,
-#font-size-buttons > button,
-#color-scheme-buttons > button {
-  text-align: center;
-  border: 0;
-}
-
-#font-type-buttons > button,
-#font-size-buttons > button {
-  width: 50%;
-  background-color: transparent;
-  border-left: 1px solid #B5B5B5;
-  border-bottom: 1px solid #B5B5B5;
-}
-
-#color-scheme-buttons > button {
-  width: 33.33%;
-  font-size: 14px;
-}
-
-#color-scheme-buttons > .dark-button {
-  margin-top: -1px;
-  height: 61px;
+body.dark > .container > .header > .domain {
+  border-bottom-color: #eeeeee !important;
 }
 
-#font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child {
-  border-left: 0;
-}
-
-#font-type-buttons > button {
-  display: inline-block;
-  font-size: 62px;
-  height: 100px;
-}
-
-#font-size-buttons > button,
-#color-scheme-buttons > button {
-  height: 60px;
-}
-
-#font-type-buttons > button:active:hover,
-#font-type-buttons > button.selected,
-#color-scheme-buttons > button:active:hover,
-#color-scheme-buttons > button.selected {
-  box-shadow: inset 0 -3px 0 0 #fc6420;
-}
-
-#font-type-buttons > button:active:hover,
-#font-type-buttons > button.selected {
-  border-bottom: 1px solid #FC6420;
-}
-
-/* Make the serif button content the same size as the sans-serif button content. */
-#font-type-buttons > button > .description {
-  color: #666;
-  font-size: 12px;
-  margin-top: -5px;
-}
-
-/* Font sizes are different per-platform, so we need custom CSS to line them up. */
-%ifdef XP_MACOSX
-#font-type-buttons > .sans-serif-button > .name {
-  margin-top: 10px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
-  margin-top: -4px;
-}
-
-#font-type-buttons > .serif-button > .name {
-  font-size: 63px;
-}
-%elifdef XP_WIN
-#font-type-buttons > .sans-serif-button > .name {
-  margin-top: 2px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
-  margin-top: -4px;
-}
-
-#font-type-buttons > .serif-button > .name {
-  font-size: 63px;
-}
-%else
-#font-type-buttons > .sans-serif-button > .name {
-  margin-top: 5px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
-  margin-top: -8px;
-}
-
-#font-type-buttons > .serif-button > .name {
-  font-size: 70px;
-}
-%endif
-
-.button:hover,
-#font-size-buttons > button:hover,
-#font-type-buttons > button:hover {
-  background-color: #ebebeb;
-}
-
-.dropdown.open,
-.button:active,
-#font-size-buttons > button:active,
-#font-size-buttons > button.selected {
-  background-color: #dadada;
-}
-
-/* Only used on Android */
-#font-size-sample {
-  display: none;
+body.sepia > .container > .footer {
+  background-color: #dedad4 !important;
 }
 
-.minus-button,
-.plus-button {
-  background-color: transparent;
-  border: 0;
-  background-size: 18px 18px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.footer {
-  height: 64px;
-  background-color: #ebebeb;
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-  padding: 12px 0;
-  box-sizing: border-box;
-  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
-}
-
-.sepia .footer {
-  background-color: #dedad4;
-}
-
-.remove-button {
-  background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
-  margin: 0 auto;
-  border: 1px solid #c1c1c1;
-  background-position: 10px 7px;
-  padding-left: 42px;
-  padding-right: 10px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  font-size: 18px;
-}
-
-
-/*======= Toolbar icons =======*/
-
-/* Android-only controls */
-.share-button {
-  display: none;
+body.light blockquote,
+body.sepia blockquote {
+  -moz-border-start: 2px solid #333333 !important;
 }
 
-.close-button {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
-  height: 68px;
-  background-position: center 8px;
-}
-
-.close-button:hover {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
-  background-color: #d94141;
-  border-bottom: 1px solid #d94141;
-  border-right: 1px solid #d94141;
-}
-
-.close-button:hover:active {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
-  background-color: #AE2325;
-  border-bottom: 1px solid #AE2325;
-  border-right: 1px solid #AE2325;
-}
-
-.style-button {
-  background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
-}
-
-.toggle-button.on {
-  background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
+body.dark blockquote {
+  -moz-border-start: 2px solid #eeeeee !important;
 }
-
-.toggle-button {
-  background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
-}
-
-.list-button {
-  background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
-}
-.list-button.on {
-  background-color: #d9d9d9;
-}
-
-.minus-button {
-  background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
-}
-
-.plus-button {
-  background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
-}
-
-@media print {
-  .toolbar {
-    display: none;
-  }
-  .footer {
-    display: none;
-  }
-}
--- a/toolkit/themes/shared/aboutReaderContent.css
+++ b/toolkit/themes/shared/aboutReaderContent.css
@@ -83,25 +83,16 @@ pre {
   white-space: pre-wrap;
 }
 
 blockquote {
   padding: 0;
   -moz-padding-start: 16px;
 }
 
-.light blockquote,
-.sepia blockquote {
-  -moz-border-start: 2px solid #333333;
-}
-
-.dark blockquote {
-  -moz-border-start: 2px solid #eeeeee;
-}
-
 ul,
 ol {
   padding: 0;
 }
 
 ul {
   -moz-padding-start: 30px;
   list-style: disc;
copy from toolkit/themes/shared/aboutReader.css
copy to toolkit/themes/shared/aboutReaderControls.css
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReaderControls.css
@@ -1,106 +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/. */
 
-body {
-  padding: 64px 0;
-  max-width: 660px;
-  margin: 0 auto;
-}
-
-@media (max-width: 785px) {
-  body {
-    padding-top: 64px;
-    -moz-padding-end: 0;
-    padding-bottom: 64px;
-    -moz-padding-start: 51px;
-  }
-}
-
-body.loaded {
-  transition: color 0.4s, background-color 0.4s;
-}
-
-.light,
 .light-button {
   color: #333333;
   background-color: #ffffff;
 }
 
-.dark,
 .dark-button {
   color: #eeeeee;
   background-color: #333333;
 }
 
-.dark *::-moz-selection {
-  background-color: #FFFFFF;
-  color: #0095DD;
-}
-.dark a::-moz-selection {
-  color: #DD4800;
-}
-
-.sepia,
 .sepia-button {
   color: #333333;
   background-color: #f0ece7;
 }
 
-.sans-serif,
-.sans-serif-button,
-.sans-serif .remove-button {
+.sans-serif-button {
   font-family: Helvetica, Arial, sans-serif;
 }
 
-.serif,
-.serif-button,
-.serif .remove-button {
+.serif-button {
   font-family: Georgia, "Times New Roman", serif;
 }
 
-.font-size1 {
-  font-size: 10px;
-}
-
-.font-size2 {
-  font-size: 12px;
-}
-
-.font-size3 {
-  font-size: 14px;
-}
-
-.font-size4  {
-  font-size: 16px;
-}
-
-.font-size5 {
-  font-size: 18px;
-}
-
-.font-size6 {
-  font-size: 20px;
-}
-
-.font-size7 {
-  font-size: 22px;
-}
-
-.font-size8 {
-  font-size: 24px;
-}
-
-.font-size9 {
-  font-size: 26px;
-}
-
-
 /* Loading/error message */
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
   font-size: 0.9em;
@@ -118,25 +47,16 @@ body.loaded {
   line-height: 1.48em;
   padding-bottom: 4px;
   font-family: Helvetica, Arial, sans-serif;
   text-decoration: none;
   border-bottom: 1px solid;
   color: #0095dd;
 }
 
-.light > .container > .header > .domain,
-.sepia > .container > .header > .domain {
-  border-bottom-color: #333333;
-}
-
-.dark > .container > .header > .domain {
-  border-bottom-color: #eeeeee;
-}
-
 .header > h1 {
   font-size: 1.33em;
   line-height: 1.25em;
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
@@ -387,20 +307,16 @@ body.loaded {
   left: 0;
   width: 100%;
   text-align: center;
   padding: 12px 0;
   box-sizing: border-box;
   box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
 }
 
-.sepia .footer {
-  background-color: #dedad4;
-}
-
 .remove-button {
   background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
   margin: 0 auto;
   border: 1px solid #c1c1c1;
   background-position: 10px 7px;
   padding-left: 42px;
   padding-right: 10px;
   border-radius: 2px;
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -3,18 +3,19 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 toolkit.jar:
 % skin global classic/1.0 %skin/classic/global/
         skin/classic/global/about.css                            (../../shared/about.css)
         skin/classic/global/aboutCache.css                       (../../shared/aboutCache.css)
         skin/classic/global/aboutCacheEntry.css                  (../../shared/aboutCacheEntry.css)
         skin/classic/global/aboutMemory.css                      (../../shared/aboutMemory.css)
-*       skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
+        skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
         skin/classic/global/aboutReaderContent.css               (../../shared/aboutReaderContent.css)
+*       skin/classic/global/aboutReaderControls.css              (../../shared/aboutReaderControls.css)
         skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
         skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
         skin/classic/global/arrow.css
 *       skin/classic/global/autocomplete.css
         skin/classic/global/button.css
         skin/classic/global/checkbox.css
         skin/classic/global/colorpicker.css
         skin/classic/global/commonDialog.css