Bug 1091241 - Make add-on details look like a page. r?Margaret draft
authorRay Lin <ralin@mozilla.com>
Thu, 12 May 2016 14:43:50 +0800
changeset 367706 826847b24b4af6e7e1a34f0469e3ea6870cc932b
parent 367573 a884b96685aa13b65601feddb24e5f85ba861561
child 521087 000aa24a7a1a700ea48e1f58d10d9309ad1f568b
push id18329
push userbmo:ralin@mozilla.com
push dateTue, 17 May 2016 09:03:41 +0000
reviewersMargaret
bugs1091241
milestone49.0a1
Bug 1091241 - Make add-on details look like a page. r?Margaret MozReview-Commit-ID: CrTHzKYrxU6
mobile/android/chrome/content/aboutAddons.js
mobile/android/themes/core/aboutAddons.css
--- a/mobile/android/chrome/content/aboutAddons.js
+++ b/mobile/android/chrome/content/aboutAddons.js
@@ -131,16 +131,17 @@ function onPopState(aEvent) {
 }
 
 function showList() {
   // Hide the detail page and show the list
   let details = document.querySelector("#addons-details");
   details.style.display = "none";
   let list = document.querySelector("#addons-list");
   list.style.display = "block";
+  document.documentElement.removeAttribute("details");
 }
 
 var Addons = {
   _restartCount: 0,
 
   _createItem: function _createItem(aAddon) {
     let outer = document.createElement("div");
     outer.setAttribute("addonID", aAddon.id);
@@ -380,16 +381,17 @@ var Addons = {
       }
       xhr.send(null);
     } catch (e) { }
 
     let list = document.querySelector("#addons-list");
     list.style.display = "none";
     let details = document.querySelector("#addons-details");
     details.style.display = "block";
+    document.documentElement.setAttribute("details", "true");
   },
 
   setEnabled: function setEnabled(aValue, aAddon) {
     let detailItem = document.querySelector("#addons-details > .addon-item");
     let addon = aAddon || detailItem.addon;
     if (!addon)
       return;
 
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/mobile/android/themes/core/aboutAddons.css
@@ -1,14 +1,18 @@
 /* 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/. */
 
 @import "defines.css";
 
+html[details] {
+  background-color: var(--color_about_item);
+}
+
 a {
   text-decoration: none;
   color: #0096DD;
 }
 
 a:active {
   color: #0082C6;
 }
@@ -63,32 +67,45 @@ a:active {
 
 .addon-item[isDisabled="true"] .options-header,
 .addon-item[optionsURL=""] .options-header,
 .addon-item[isDisabled="true"] .options-box,
 .addon-item[optionsURL=""] .options-box {
   display: none;
 }
 
+#addons-details > .list-item {
+  margin-bottom: 42px;
+  border-bottom: none;
+}
+
 #addons-details > .list-item:active {
   background-color: #fff;
 }
 
 /* Buttons */
 
 .buttons {
   display: flex;
   flex-direction: row;
   width: 100%;
+  position: fixed;
+  bottom: 0px;
+}
+
+.buttons::after {
+  content: "";
+  border-right: 1px solid var(--color_about_item_border);
 }
 
 .buttons > button {
   -moz-appearance: none;
   font-size: 1em;
   border: 1px solid transparent;
+  border-right: none;
   border-top-color: var(--color_about_item_border);
   border-inline-start-color: var(--color_about_item_border);
   background-color: var(--color_about_item);
   flex: 1;
   padding: 0.75em 0.5em;
   border-radius: 0;
 }