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

@@ -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) {

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);