Bug 1091241 - Make add-on details look like a page. r?Margaret
MozReview-Commit-ID: CrTHzKYrxU6
--- 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;
}