Bug 1145809 - Add the reading mode footer. ui-r=mmaslaney, r=Unfocused, a=sledru
authorBlake Winton <bwinton@latte.ca>
Mon, 30 Mar 2015 12:50:01 -0400
changeset 258272 537b5f078296
parent 258271 7d883361e554
child 258273 0e9a4f42d12a
push id4633
push userryanvm@gmail.com
push date2015-04-06 15:44 +0000
treeherdermozilla-beta@e749a39aaf5c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmmaslaney, Unfocused, sledru
bugs1145809
milestone38.0
Bug 1145809 - Add the reading mode footer. ui-r=mmaslaney, r=Unfocused, a=sledru
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/AboutReader.jsm
toolkit/components/reader/content/aboutReader.html
toolkit/themes/windows/global/aboutReader.css
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -454,17 +454,18 @@ body {
   color: #333333;
   background-color: #ffffff;
 }
 
 /*======= Toolbar icons =======*/
 
 /* desktop-only controls */
 .close-button,
-.list-button {
+.list-button,
+.footer {
   display: none;
 }
 
 .toggle-button.on {
   background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
 }
 
 .toggle-button {
--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -63,18 +63,21 @@ let AboutReader = function(mm, win, arti
   doc.addEventListener("visibilitychange", this, false);
 
   this._setupStyleDropdown();
   this._setupButton("close-button", this._onReaderClose.bind(this), "aboutReader.toolbar.close");
   this._setupButton("share-button", this._onShare.bind(this), "aboutReader.toolbar.share");
 
   try {
     if (Services.prefs.getBoolPref("browser.readinglist.enabled")) {
-      this._setupButton("toggle-button", this._onReaderToggle.bind(this), "aboutReader.toolbar.addToReadingList");
+      this._setupButton("toggle-button", this._onReaderToggle.bind(this, "button"), "aboutReader.toolbar.addToReadingList");
       this._setupButton("list-button", this._onList.bind(this), "aboutReader.toolbar.openReadingList");
+      this._setupButton("remove-button", this._onReaderToggle.bind(this, "footer"),
+        "aboutReader.footer.deleteThisArticle", "aboutReader.footer.deleteThisArticle");
+      this._doc.getElementById("reader-footer").setAttribute('readinglist-enabled', "true");
     }
   } catch (e) {
     // Pref doesn't exist.
   }
 
   let colorSchemeValues = JSON.parse(Services.prefs.getCharPref("reader.color_scheme.values"));
   let colorSchemeOptions = colorSchemeValues.map((value) => {
     return { name: gStrings.GetStringFromName("aboutReader.colorScheme." + value),
@@ -242,16 +245,17 @@ AboutReader.prototype = {
 
     if (this._isReadingListItem == 1) {
       button.classList.add("on");
       button.setAttribute("title", gStrings.GetStringFromName("aboutReader.toolbar.removeFromReadingList"));
     } else {
       button.classList.remove("on");
       button.setAttribute("title", gStrings.GetStringFromName("aboutReader.toolbar.addToReadingList"));
     }
+    this._updateFooter();
   },
 
   _requestReadingListStatus: function Reader_requestReadingListStatus() {
     let handleListStatusData = (message) => {
       this._mm.removeMessageListener("Reader:ListStatusData", handleListStatusData);
 
       let args = message.data;
       if (args.url == this._article.url) {
@@ -272,26 +276,26 @@ AboutReader.prototype = {
     this._mm.addMessageListener("Reader:ListStatusData", handleListStatusData);
     this._mm.sendAsyncMessage("Reader:ListStatusRequest", { url: this._article.url });
   },
 
   _onReaderClose: function Reader_onToggle() {
     this._win.location.href = this._getOriginalUrl();
   },
 
-  _onReaderToggle: function Reader_onToggle() {
+  _onReaderToggle: function Reader_onToggle(aMethod) {
     if (!this._article)
       return;
 
     if (this._isReadingListItem == 0) {
       this._mm.sendAsyncMessage("Reader:AddToList", { article: this._article });
-      UITelemetry.addEvent("save.1", "button", null, "reader");
+      UITelemetry.addEvent("save.1", aMethod, null, "reader");
     } else {
       this._mm.sendAsyncMessage("Reader:RemoveFromList", { url: this._article.url });
-      UITelemetry.addEvent("unsave.1", "button", null, "reader");
+      UITelemetry.addEvent("unsave.1", aMethod, null, "reader");
     }
   },
 
   _onShare: function Reader_onShare() {
     if (!this._article)
       return;
 
     this._mm.sendAsyncMessage("Reader:Share", {
@@ -416,16 +420,26 @@ AboutReader.prototype = {
       }
 
       currentSize--;
       updateControls();
       this._setFontSize(currentSize);
     }, true);
   },
 
+  _updateFooter: function RupdateFooter() {
+    let footer = this._doc.getElementById("reader-footer");
+    if (!this._article || this._isReadingListItem == 0 ||
+        footer.getAttribute("readinglist-enabled") != "true") {
+      footer.style.display = "none";
+      return;
+    }
+    footer.style.display = null;
+  },
+
   _handleDeviceLight: function Reader_handleDeviceLight(newLux) {
     // Desired size of the this._luxValues array.
     let luxValuesSize = 10;
     // Add new lux value at the front of the array.
     this._luxValues.unshift(newLux);
     // Add new lux value to this._totalLux for averaging later.
     this._totalLux += newLux;
 
@@ -555,16 +569,17 @@ AboutReader.prototype = {
     } else {
       this._toolbarElement.removeAttribute("visible");
     }
     this._setSystemUIVisibility(visible);
 
     if (!visible) {
       this._mm.sendAsyncMessage("Reader:ToolbarHidden");
     }
+    this._updateFooter();
   },
 
   _toggleToolbarVisibility: function Reader_toggleToolbarVisibility() {
     this._setToolbarVisibility(!this._getToolbarVisibility());
   },
 
   _setSystemUIVisibility: function Reader_setSystemUIVisibility(visible) {
     this._mm.sendAsyncMessage("Reader:SystemUIVisibility", { visible: visible });
@@ -816,20 +831,22 @@ AboutReader.prototype = {
         callback(option.value);
       }.bind(this), true);
 
       if (option.value === initialValue)
         item.classList.add("selected");
     }
   },
 
-  _setupButton: function(id, callback, titleEntity) {
+  _setupButton: function(id, callback, titleEntity, textEntity) {
     this._setButtonTip(id, titleEntity);
 
     let button = this._doc.getElementById(id);
+    if (textEntity)
+      button.textContent = gStrings.GetStringFromName(textEntity);
     button.removeAttribute("hidden");
     button.addEventListener("click", function(aEvent) {
       if (!aEvent.isTrusted)
         return;
 
       aEvent.stopPropagation();
       callback();
     }, true);
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -19,16 +19,20 @@
       <div id="reader-credits" class="credits"></div>
     </div>
 
     <div id="reader-content" class="content">
     </div>
 
     <div id="reader-message" class="message">
     </div>
+
+    <div id="reader-footer" class="footer">
+      <button id="remove-button" class="button remove-button"/>
+    </div>
   </div>
 
   <ul id="reader-toolbar" class="toolbar">
     <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 class="dropdown-popup">
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -1,17 +1,16 @@
 /* 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-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
 }
 
 body.loaded {
   transition: color 0.4s, background-color 0.4s;
 }
 
 .light,
 .light-button {
@@ -26,21 +25,23 @@ body.loaded {
 }
 
 .sepia,
 .sepia-button {
   color: #333333;
   background-color: #f0ece7;
 }
 
-.sans-serif {
+.sans-serif,
+.sans-serif .remove-button {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
-.serif {
+.serif,
+.serif .remove-button {
   font-family: "Charis SIL", Georgia, "Times New Roman", serif;
 }
 
 .font-size1 {
   font-size: 10px;
 }
 
 .font-size2 {
@@ -241,78 +242,81 @@ body.loaded {
 }
 
 /*======= Controls toolbar =======*/
 
 .toolbar {
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   position: fixed;
   height: 100%;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: #FBFBFB;
+  background-color: #fbfbfb;
   -moz-user-select: none;
-  border-right: 1px solid #B5B5B5;
+  border-right: 1px solid #b5b5b5;
 }
 
 .button {
-  color: white;
   display: block;
-  background-position: center;
   background-size: 24px 24px;
   background-repeat: no-repeat;
-  background-color: transparent;
   height: 40px;
+  padding: 0;
+}
+
+.toolbar .button {
+  color: white;
   width: 40px;
+  background-position: center;
+  background-color: #fbfbfb;
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid #c1c1c1;
-  padding: 0;
 }
 
 .button[hidden] {
   display: none;
 }
 
 .dropdown {
   text-align: center;
   list-style: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 .dropdown li {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 /*======= 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;
+  background-color: #fbfbfb;
   visibility: hidden;
   border-radius: 4px;
-  border: 1px 1px 0 1px solid #B5B5B5;
-  box-shadow: 0px 1px 12px #666;
+  border: 1px 1px 0 1px solid #b5b5b5;
+  box-shadow: 0 1px 12px #666;
 }
 
 .dropdown-popup > hr {
   width: 100%;
-  height: 0px;
-  border: 0px;
-  border-top: 1px solid #B5B5B5;
+  height: 0;
+  border: 0;
+  border-top: 1px solid #b5b5b5;
   margin: 0;
 }
 
 .open > .dropdown-popup {
   visibility: visible;
 }
 
 .dropdown-arrow {
@@ -344,17 +348,17 @@ body.loaded {
 #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-left: 1px solid #B5B5B5;
+  border-left: 1px solid #b5b5b5;
   border-right: 0;
   border-top: 0;
   border-bottom: 0;
   padding: 10px;
 }
 
 #font-type-buttons > button,
 #font-size-buttons > button {
@@ -365,47 +369,47 @@ body.loaded {
 #color-scheme-buttons > button {
   width: 33.33%;
   font-size: 14px;
 }
 
 #font-type-buttons > button:first-child,
 #font-size-buttons > button:first-child,
 #color-scheme-buttons > button:first-child {
-  border-left: 0px;
+  border-left: 0;
 }
 
 #font-type-buttons > button {
   display: inline-block;
   font-size: 48px;
 }
 
 #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;
+  box-shadow: inset 0 -3px 0 0 #fc6420;
 }
 
 #font-type-buttons > button > div {
   color: #666;
   font-size: 12px;
 }
 
 .button:hover,
 #font-size-buttons > button:hover,
 #font-type-buttons > button:hover {
-  background-color: #EBEBEB;
+  background-color: #ebebeb;
 }
 
 .dropdown.open,
 .button:active,
 #font-size-buttons > button:active,
 #font-size-buttons > button.selected {
-  background-color: #DADADA;
+  background-color: #dadada;
 }
 
 /* Only used on Android */
 #font-size-sample {
   display: none;
 }
 
 .serif-button {
@@ -417,16 +421,49 @@ body.loaded {
   background-color: transparent;
   border: 0;
   height: 50px;
   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 9px 9px -9px #c1c1c1 inset;
+}
+
+.sepia .footer {
+  background-color: #dedad4;
+}
+
+.dark .footer {
+  background-color: #777;
+}
+
+.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;
 }
 
 .close-button {
@@ -467,9 +504,12 @@ body.loaded {
 .plus-button {
   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 }
 
 @media print {
   .toolbar {
     display: none;
   }
+  .footer {
+    display: none;
+  }
 }