Bug 1091241 - Make add-on details look like a page. r=Margaret
authorRay Lin <ralin@mozilla.com>
Thu, 12 May 2016 14:43:50 +0800
changeset 298832 8df26f4aab26abe6c58a33e5afa90c18d590af84
parent 298831 5abd0e13a583180602f8318f88f240bfda3c002d
child 298833 e33952e456ea3a7371c66b1a702ef8a0e17efb8b
push id77335
push userryanvm@gmail.com
push dateWed, 25 May 2016 02:24:45 +0000
treeherdermozilla-inbound@8df26f4aab26 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMargaret
bugs1091241
milestone49.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 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;
 }