Bug 1120004 - Update styles of Reader View controls on mobile. r=bnicholson

--HG--
extra : rebase_source : b50005d5f99151a0ea9d6c2b022791198db8b846

mobile/android/app/mobile.js

@@ -854,7 +854,7 @@ pref("media.gmp-provider.enabled", true);
 pref("reader.color_scheme", "auto");
 
 // Color scheme values available in reader mode UI.
-pref("reader.color_scheme.values", "[\"light\",\"dark\",\"auto\"]");
+pref("reader.color_scheme.values", "[\"dark\",\"auto\",\"light\"]");
 
 // Whether to use a vertical or horizontal toolbar.
 pref("reader.toolbar.vertical", false);

mobile/android/themes/core/aboutReader.css

@@ -21,7 +21,7 @@ body {
 }
 
 .dark {
-  background-color: #000000;
+  background-color: #222222;
   color: #eeeeee;
 }
 
@@ -284,6 +284,8 @@ body {
   list-style: decimal !important;
 }
 
+/*======= Controls toolbar =======*/
+
 .toolbar {
   font-family: "Clear Sans",sans-serif;
   transition-property: visibility, opacity;
@@ -298,7 +300,7 @@ body {
   padding: 0;
   list-style: none;
   background-color: #EBEBF0;
-  -moz-user-select: none;
+  border-top: 1px solid #D7D9DB;
 }
 
 .toolbar-hidden {
@@ -314,23 +316,27 @@ body {
 }
 
 .button {
-  color: white;
   display: block;
   background-position: center;
-  background-size: 30px 24px;
+  background-size: 30px 28px;
   background-repeat: no-repeat;
   background-color: transparent;
   border: 0;
   width: 100%;
 }
 
+.button:active {
+  background-color: #D7D7DC;
+}
+
 /* Remove dotted border when button is focused */
 .button::-moz-focus-inner,
-#font-size-buttons > button::-moz-focus-inner {
+.dropdown-popup > div > button::-moz-focus-inner {
   border: 0;
 }
 
 .dropdown {
+  left: 0;
   text-align: center;
   display: inline-block;
   list-style: none;
@@ -348,135 +354,77 @@ body {
   padding: 0px;
 }
 
+/*======= Font style popup =======*/
+
 .dropdown-popup {
-  text-align: start;
   position: absolute;
-  left: 0px;
+  left: 0;
+  width: 100%;
   z-index: 1000;
-  float: left;
   background: #EBEBF0;
-  margin-top: 12px;
-  margin-bottom: 10px;
-  padding-top: 4px;
-  padding-bottom: 8px;
-  font-size: 14px;
-  box-shadow: 0px -1px 12px #333;
-  border-radius: 3px;
   visibility: hidden;
+  border-top: 1px solid #D7D9DB;
 }
 
-.dropdown-popup > hr {
+/* Only used on desktop */
-  width: 100%;
+.dropdown-popup > hr,
-  height: 0px;
+.dropdown-arrow,
-  border: 0px;
+#font-type-buttons > button > span {
-  border-top: 1px solid #B5B5B5;
+  display: none;
-  margin: 0;
 }
 
 .open > .dropdown-popup {
-  margin-top: 0px;
-  margin-bottom: 6px;
-  bottom: 100%;
   visibility: visible;
-}
+  bottom: 100%;
-
-.dropdown-arrow {
-  position: absolute;
-  width: 40px;
-  height: 18px;
-  bottom: -18px;
-  background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
-  background-size: 40px 18px;
-  background-position: center;
-  display: block;
 }
 
 #font-type-buttons,
 #font-size-buttons,
-.segmented-button {
+#color-scheme-buttons {
   display: flex;
   flex-direction: row;
-  list-style: none;
-  padding: 10px 5px;
-  white-space: nowrap;
 }
 
-#font-type-buttons > li,
+#font-type-buttons > button,
-#font-size-buttons > button,
+#color-scheme-buttons > button {
-.segmented-button > li {
-  flex: 1 0 auto;
   text-align: center;
-  line-height: 20px;
 }
 
-#font-type-buttons > li,
+#font-type-buttons > button,
 #font-size-buttons > button {
-  width: 100px; /* combined with flex, this acts as a minimum width */
+  width: 50%;
+  background-color: transparent;
+  border: 0;
 }
 
-.segmented-button > li {
+#font-type-buttons > button {
-  width: 50px; /* combined with flex, this acts as a minimum width */
+  font-size: 24px;
+  color: #AFB1B3;
+  padding: 15px 0;
 }
 
-#font-type-buttons > li {
+#font-type-buttons > button:active,
-  padding: 10px 0;
+#font-type-buttons > button.selected {
+  color: #222222;
 }
 
-.segmented-button > li {
+#font-size-sample {
-  border-left: 1px solid #B5B5B5;
+  flex: 0;
+  font-size: 24px;
+  color: #000000;
+  margin-left: -20px;
+  margin-right: -20px;
 }
 
-#font-size-buttons > button:first-child,
+.serif-button {
-.segmented-button > li:first-child {
+  font-family: serif;
-  border-left: 0px;
-}
-
-#font-type-buttons > li > a,
-.segmented-button > li > a {
-  vertical-align: middle;
-  text-decoration: none;
-  color: black;
-}
-
-#font-type-buttons > li > a {
-  display: inline-block;
-  font-size: 48px;
-  line-height: 50px;
-  margin-bottom: 5px;
-  border-bottom: 3px solid transparent;
-}
-
-.segmented-button > li > a {
-  display: block;
-  padding: 5px 0;
-  font-family: "Clear Sans",sans-serif;
-  font-weight: lighter;
-}
-
-#font-type-buttons > li > a:active,
-#font-type-buttons > li.selected > a {
-  border-color: #ff9400;
-}
-
-.segmented-button > li > a:active,
-.segmented-button > li.selected > a {
-  font-weight: bold;
-}
-
-#font-type-buttons > li > .sans-serif {
-  font-weight: lighter;
-}
-
-#font-type-buttons > li > div {
-  color: #666;
-  font-size: 12px;
 }
 
 .minus-button,
 .plus-button {
   background-color: transparent;
   border: 0;
-  height: 30px;
+  height: 60px;
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
@@ -490,7 +438,38 @@ body {
   background-size: 24px 24px;
 }
 
- /* desktop-only controls */
+#color-scheme-buttons > button {
+  width: 33%;
+  border-radius: 4px;
+  border: 1px solid #BFBFBF;
+  padding: 10px;
+  margin: 15px 10px;
+  font-size: 14px;
+}
+
+#color-scheme-buttons > button:active,
+#color-scheme-buttons > button.selected {
+  border: 2px solid #FF9500;
+}
+
+.dark-button {
+  color: #eeeeee;
+  background-color: #333333;
+}
+
+.auto-button {
+  color: #000000;
+  background-color: transparent;
+}
+
+.light-button {
+  color: #333333;
+  background-color: #ffffff;
+}
+
+/*======= Toolbar icons =======*/
+
+/* desktop-only controls */
 .close-button,
 .list-button {
   display: none;
@@ -512,6 +491,10 @@ body {
   background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
 }
 
+.open .style-button {
+  background-image: url('chrome://browser/skin/images/reader-style-icon-active-mdpi.png');
+}
+
 .minus-button {
   background-image: url('chrome://browser/skin/images/reader-minus-mdpi.png');
 }
@@ -521,10 +504,6 @@ body {
 }
 
 @media screen and (min-resolution: 1.25dppx) {
-  .dropdown-arrow {
-    background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
-  }
-
   .toggle-button.on {
     background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-hdpi.png');
   }
@@ -541,6 +520,10 @@ body {
     background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
   }
 
+  .open .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-active-hdpi.png');
+  }
+
   .minus-button {
     background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
   }
@@ -551,10 +534,6 @@ body {
 }
 
 @media screen and (min-resolution: 2dppx) {
-  .dropdown-arrow {
-    background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-xhdpi.png');
-  }
-
   .toggle-button.on {
     background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xhdpi.png');
   }
@@ -571,6 +550,10 @@ body {
     background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
   }
 
+  .open .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-active-xhdpi.png');
+  }
+
   .minus-button {
     background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
   }
@@ -580,9 +563,39 @@ body {
   }
 }
 
+@media screen and (min-resolution: 3dppx) {
+  .toggle-button.on {
+    background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xxhdpi.png');
+  }
+
+  .toggle-button {
+    background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-xxhdpi.png');
+  }
+
+  .share-button {
+    background-image: url('chrome://browser/skin/images/reader-share-icon-xhdpi.png');
+  }
+
+  .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
+  }
+
+  .open .style-button {
+    background-image: url('chrome://browser/skin/images/reader-style-icon-active-xxhdpi.png');
+  }
+
+  .minus-button {
+    background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
+  }
+
+  .plus-button {
+    background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
+  }
+}
+
 @media screen and (orientation: portrait) {
   .button {
-    height: 48px;
+    height: 56px;
   }
 }
 
@@ -601,4 +614,17 @@ body {
   .toolbar > * {
     width: 56px;
   }
+
+  .dropdown-popup {
+    position: absolute;
+    width: 350px;
+    left: auto;
+    right: 15px;
+    bottom: -12px;
+    z-index: 1000;
+    background: #EBEBF0;
+    border: 1px solid #D7D9DB;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px 2px #BFBFBF;
+  }
 }

mobile/android/themes/core/jar.mn

@@ -86,27 +86,34 @@ chrome.jar:
   skin/images/logo-hdpi.png                 (images/logo-hdpi.png)
   skin/images/wordmark-hdpi.png             (images/wordmark-hdpi.png)
   skin/images/config-plus.png               (images/config-plus.png)
-  skin/images/reader-dropdown-arrow-mdpi.png     (images/reader-dropdown-arrow-mdpi.png)
-  skin/images/reader-dropdown-arrow-hdpi.png     (images/reader-dropdown-arrow-hdpi.png)
-  skin/images/reader-dropdown-arrow-xhdpi.png    (images/reader-dropdown-arrow-xhdpi.png)
   skin/images/reader-minus-mdpi.png              (images/reader-minus-mdpi.png)
   skin/images/reader-minus-hdpi.png              (images/reader-minus-hdpi.png)
   skin/images/reader-minus-xhdpi.png             (images/reader-minus-xhdpi.png)
+  skin/images/reader-minus-xxhdpi.png            (images/reader-minus-xxhdpi.png)
   skin/images/reader-plus-mdpi.png               (images/reader-plus-mdpi.png)
   skin/images/reader-plus-hdpi.png               (images/reader-plus-hdpi.png)
   skin/images/reader-plus-xhdpi.png              (images/reader-plus-xhdpi.png)
+  skin/images/reader-plus-xxhdpi.png             (images/reader-plus-xxhdpi.png)
   skin/images/reader-toggle-on-icon-mdpi.png     (images/reader-toggle-on-icon-mdpi.png)
   skin/images/reader-toggle-on-icon-hdpi.png     (images/reader-toggle-on-icon-hdpi.png)
   skin/images/reader-toggle-on-icon-xhdpi.png    (images/reader-toggle-on-icon-xhdpi.png)
+  skin/images/reader-toggle-on-icon-xxhdpi.png   (images/reader-toggle-on-icon-xxhdpi.png)
   skin/images/reader-toggle-off-icon-mdpi.png    (images/reader-toggle-off-icon-mdpi.png)
   skin/images/reader-toggle-off-icon-hdpi.png    (images/reader-toggle-off-icon-hdpi.png)
   skin/images/reader-toggle-off-icon-xhdpi.png   (images/reader-toggle-off-icon-xhdpi.png)
+  skin/images/reader-toggle-off-icon-xxhdpi.png  (images/reader-toggle-off-icon-xxhdpi.png)
   skin/images/reader-share-icon-mdpi.png         (images/reader-share-icon-mdpi.png)
   skin/images/reader-share-icon-hdpi.png         (images/reader-share-icon-hdpi.png)
   skin/images/reader-share-icon-xhdpi.png        (images/reader-share-icon-xhdpi.png)
+  skin/images/reader-share-icon-xxhdpi.png       (images/reader-share-icon-xxhdpi.png)
+  skin/images/reader-style-icon-active-mdpi.png  (images/reader-style-icon-active-mdpi.png)
+  skin/images/reader-style-icon-active-hdpi.png  (images/reader-style-icon-active-hdpi.png)
+  skin/images/reader-style-icon-active-xhdpi.png (images/reader-style-icon-active-xhdpi.png)
+  skin/images/reader-style-icon-active-xxhdpi.png (images/reader-style-icon-active-xxhdpi.png)
   skin/images/reader-style-icon-mdpi.png         (images/reader-style-icon-mdpi.png)
   skin/images/reader-style-icon-hdpi.png         (images/reader-style-icon-hdpi.png)
   skin/images/reader-style-icon-xhdpi.png        (images/reader-style-icon-xhdpi.png)
+  skin/images/reader-style-icon-xxhdpi.png       (images/reader-style-icon-xxhdpi.png)
   skin/images/privatebrowsing-mask.png           (images/privatebrowsing-mask.png)
   skin/images/update.png                         (images/update.png)
   skin/images/icon_floaty_hdpi.png               (images/icon_floaty_hdpi.png)

toolkit/components/reader/AboutReader.jsm

@@ -49,9 +49,7 @@ let AboutReader = function(mm, win) {
 
   this._scrollOffset = win.pageYOffset;
 
-  let body = doc.body;
+  doc.getElementById("container").addEventListener("click", this, false);
-  body.addEventListener("touchstart", this, false);
-  body.addEventListener("click", this, false);
 
   win.addEventListener("unload", this, false);
   win.addEventListener("scroll", this, false);
@@ -88,12 +86,12 @@ let AboutReader = function(mm, win) {
     { name: fontTypeSample,
       description: gStrings.GetStringFromName("aboutReader.fontType.sans-serif"),
       value: "sans-serif",
-      linkClass: "sans-serif"
+      itemClass: "sans-serif-button"
     },
     { name: fontTypeSample,
       description: gStrings.GetStringFromName("aboutReader.fontType.serif"),
       value: "serif",
-      linkClass: "serif" },
+      itemClass: "serif-button" },
   ];
 
   let fontType = Services.prefs.getCharPref("reader.font_type");
@@ -205,7 +203,6 @@ AboutReader.prototype = {
 
     switch (aEvent.type) {
       case "click":
-        // XXX: Don't toggle the toolbar on double click. (See the "Gesture:DoubleTap" handler in Reader.js)
         this._toggleToolbarVisibility();
         break;
       case "scroll":
@@ -352,6 +349,10 @@ AboutReader.prototype = {
     const FONT_SIZE_MIN = 1;
     const FONT_SIZE_MAX = 9;
 
+    // Sample text shown in Android UI.
+    let sampleText = this._doc.getElementById("font-size-sample");
+    sampleText.textContent = gStrings.GetStringFromName("aboutReader.fontTypeSample");
+
     let currentSize = Services.prefs.getIntPref("reader.font_size");
     currentSize = Math.max(FONT_SIZE_MIN, Math.min(FONT_SIZE_MAX, currentSize));
 
@@ -756,24 +757,22 @@ AboutReader.prototype = {
     for (let i = 0; i < options.length; i++) {
       let option = options[i];
 
-      let item = doc.createElement("li");
+      let item = doc.createElement("button");
-      let link = doc.createElement("a");
+
-      link.textContent = option.name;
+      // We make this extra span so that we can hide it if necessary.
-      item.appendChild(link);
+      let span = doc.createElement("span");
+      span.textContent = option.name;
+      item.appendChild(span);
 
       if (option.itemClass !== undefined)
         item.classList.add(option.itemClass);
 
-      if (option.linkClass !== undefined)
-        link.classList.add(option.linkClass);
-
       if (option.description !== undefined) {
         let description = doc.createElement("div");
         description.textContent = option.description;
         item.appendChild(description);
       }
 
-      link.style.MozUserSelect = 'none';
       segmentedButton.appendChild(item);
 
       item.addEventListener("click", function(aEvent) {
@@ -831,30 +830,17 @@ AboutReader.prototype = {
     let dropdown = doc.getElementById("style-dropdown");
     let dropdownToggle = dropdown.querySelector(".dropdown-toggle");
     let dropdownPopup = dropdown.querySelector(".dropdown-popup");
-    let dropdownArrow = dropdown.querySelector(".dropdown-arrow");
 
-    let updatePopupPosition = () => {
+    // Helper function used to position the popup on desktop,
-      if (this._isToolbarVertical) {
+    // where there is a vertical toolbar.
+    function updatePopupPosition() {
       let toggleHeight = dropdownToggle.offsetHeight;
       let toggleTop = dropdownToggle.offsetTop;
       let popupTop = toggleTop - toggleHeight / 2;
       dropdownPopup.style.top = popupTop + "px";
-      } else {
-        let popupWidth = dropdownPopup.offsetWidth + 30;
-        let arrowWidth = dropdownArrow.offsetWidth;
-        let toggleWidth = dropdownToggle.offsetWidth;
-        let toggleLeft = dropdownToggle.offsetLeft;
-
-        let popupShift = (toggleWidth - popupWidth) / 2;
-        let popupLeft = Math.max(0, Math.min(win.innerWidth - popupWidth, toggleLeft + popupShift));
-        dropdownPopup.style.left = popupLeft + "px";
-
-        let arrowShift = (toggleWidth - arrowWidth) / 2;
-        let arrowLeft = toggleLeft - popupLeft + arrowShift;
-        dropdownArrow.style.left = arrowLeft + "px";
     }
-    };
 
+    if (this._isToolbarVertical) {
       win.addEventListener("resize", event => {
         if (!event.isTrusted)
           return;
@@ -862,6 +848,7 @@ AboutReader.prototype = {
         // Wait for reflow before calculating the new position of the popup.
         win.setTimeout(updatePopupPosition, 0);
       }, true);
+    }
 
     dropdownToggle.setAttribute("title", gStrings.GetStringFromName("aboutReader.toolbar.typeControls"));
     dropdownToggle.addEventListener("click", event => {
@@ -874,8 +861,10 @@ AboutReader.prototype = {
         dropdown.classList.remove("open");
       } else {
         dropdown.classList.add("open");
+        if (this._isToolbarVertical) {
           updatePopupPosition();
         }
+      }
     }, true);
   },
 };

toolkit/components/reader/content/aboutReader.html

@@ -11,6 +11,7 @@
 </head>
 
 <body>
+  <div id="container">
     <div id="reader-header" class="header">
       <a id="reader-domain" class="domain"></a>
       <div class="domain-border"></div>
@@ -23,6 +24,7 @@
 
     <div id="reader-message" class="message">
     </div>
+  </div>
 
   <ul id="reader-toolbar" class="toolbar toolbar-hidden">
     <li><button id="close-button" class="button close-button"/></li>
@@ -30,14 +32,15 @@
     <ul id="style-dropdown" class="dropdown">
       <li><button class="dropdown-toggle button style-button"/></li>
       <li class="dropdown-popup">
-        <ul id="font-type-buttons"></ul>
+        <div id="font-type-buttons"></div>
         <hr></hr>
         <div id="font-size-buttons">
           <button id="font-size-minus" class="minus-button"/>
+          <button id="font-size-sample"/>
           <button id="font-size-plus" class="plus-button"/>
         </div>
         <hr></hr>
-        <ul id="color-scheme-buttons" class="segmented-button"></ul>
+        <div id="color-scheme-buttons"></div>
         <div class="dropdown-arrow"/>
       </li>
     </ul>

toolkit/themes/windows/global/aboutReader.css

@@ -228,7 +228,7 @@ body {
   list-style: decimal;
 }
 
-/* Toolbar */
+/*======= Controls toolbar =======*/
 
 .toolbar {
   font-family: sans-serif;
@@ -275,18 +275,19 @@ body {
   padding: 0px;
 }
 
+/*======= Font style popup =======*/
+
 .dropdown-popup {
+  min-width: 250px;
   text-align: start;
   position: absolute;
   left: 48px; /* offset to account for toolbar width */
   z-index: 1000;
   background-color: #FBFBFB;
-  font-size: 14px;
   visibility: hidden;
   border-radius: 4px;
   border: 1px solid #B5B5B5;
   box-shadow: 0px 1px 12px #666;
-  color: black;
 }
 
 .dropdown-popup > hr {
@@ -313,81 +314,74 @@ body {
 
 #font-type-buttons,
 #font-size-buttons,
-.segmented-button {
+#color-scheme-buttons {
   display: flex;
   flex-direction: row;
-  list-style: none;
-  white-space: nowrap;
-  padding: 0;
 }
 
-#font-type-buttons > li,
+#font-type-buttons > button,
 #font-size-buttons > button,
-.segmented-button > li {
+#color-scheme-buttons > button {
-  flex: 1 0 auto;
   text-align: center;
   border-left: 1px solid #B5B5B5;
+  border-right: 0;
+  border-top: 0;
+  border-bottom: 0;
   padding: 10px;
 }
 
-#font-type-buttons > li,
+#font-type-buttons > button,
 #font-size-buttons > button {
-  width: 100px; /* combined with flex, this acts as a minimum width */
+  width: 50%;
+  background-color: transparent;
 }
 
-.segmented-button > li {
+#color-scheme-buttons > button {
-  width: 30px; /* combined with flex, this acts as a minimum width */
+  width: 33%;
-  line-height: 20px;
+  font-size: 14px;
 }
 
-#font-type-buttons > li:first-child,
+#font-type-buttons > button:first-child,
 #font-size-buttons > button:first-child,
-.segmented-button > li:first-child {
+#color-scheme-buttons > button:first-child {
   border-left: 0px;
 }
 
-#font-type-buttons > li > a,
+#font-type-buttons > button {
-.segmented-button > li > a {
-  vertical-align: middle;
-  text-decoration: none;
-}
-
-#font-type-buttons > li > a {
   display: inline-block;
   font-size: 48px;
-  line-height: 50px;
+  border-bottom: 3px solid transparent;
 }
 
-.segmented-button > li > a {
+#font-type-buttons > button:active:hover,
-  display: block;
+#font-type-buttons > button.selected {
-  font-family: sans-serif;
-  font-weight: lighter;
-}
-
-#font-type-buttons > li:active:hover,
-#font-type-buttons > li.selected {
   border-bottom: 3px solid #FC6420;
 }
 
+#font-type-buttons > button > div {
+  color: #666;
+  font-size: 12px;
+}
+
 .button:hover,
-#font-size-buttons > li:hover {
+#font-size-buttons > button:hover {
   background-color: #EBEBEB;
 }
 
 .dropdown.open,
 .button:active,
-#font-size-buttons > li:active,
+#font-size-buttons > button:active,
-#font-size-buttons > li.selected {
+#font-size-buttons > button.selected {
   background-color: #DADADA;
 }
 
-#font-type-buttons > li > .sans-serif {
+/* Only used on Android */
-  font-weight: lighter;
+#font-size-sample {
+  display: none;
 }
 
-#font-type-buttons > li > div {
+.serif-button {
-  color: #666;
+  font-family: serif;
-  font-size: 12px;
 }
 
 .minus-button,
@@ -400,6 +394,8 @@ body {
   background-position: center;
 }
 
+/*======= Toolbar icons =======*/
+
 /* Android-only controls */
 .share-button {
   display: none;