From e084e2d68faddd1c90f4b064cda7c2bc845f2cc5 Mon Sep 17 00:00:00 2001
From: Ray Lin <ralin@mozilla.com>
Date: Thu, 12 May 2016 14:43:50 +0800
Subject: [PATCH] Bug 1091241 - Make add-on details look like a page.
 r=Margaret

MozReview-Commit-ID: CrTHzKYrxU6

--HG--
extra : rebase_source : 074cf6cc004811f389c02efcb314e9972e0791d4
---
 mobile/android/chrome/content/aboutAddons.js |  2 ++
 mobile/android/themes/core/aboutAddons.css   | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/mobile/android/chrome/content/aboutAddons.js b/mobile/android/chrome/content/aboutAddons.js
index 9291cda5aedf..2b837c533bc7 100644
--- a/mobile/android/chrome/content/aboutAddons.js
+++ b/mobile/android/chrome/content/aboutAddons.js
@@ -136,6 +136,7 @@ function showList() {
   details.style.display = "none";
   let list = document.querySelector("#addons-list");
   list.style.display = "block";
+  document.documentElement.removeAttribute("details");
 }
 
 var Addons = {
@@ -385,6 +386,7 @@ var Addons = {
     list.style.display = "none";
     let details = document.querySelector("#addons-details");
     details.style.display = "block";
+    document.documentElement.setAttribute("details", "true");
   },
 
   setEnabled: function setEnabled(aValue, aAddon) {
diff --git a/mobile/android/themes/core/aboutAddons.css b/mobile/android/themes/core/aboutAddons.css
index 02297a456206..c3713ab0ee1f 100644
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/mobile/android/themes/core/aboutAddons.css
@@ -4,6 +4,10 @@
 
 @import "defines.css";
 
+html[details] {
+  background-color: var(--color_about_item);
+}
+
 a {
   text-decoration: none;
   color: #0096DD;
@@ -68,6 +72,11 @@ a:active {
   display: none;
 }
 
+#addons-details > .list-item {
+  margin-bottom: 42px;
+  border-bottom: none;
+}
+
 #addons-details > .list-item:active {
   background-color: #fff;
 }
@@ -78,12 +87,20 @@ a:active {
   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);