diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
index 46bb2ec3ab57..4b0c351c9185 100644
--- a/browser/components/preferences/preferences.xhtml
+++ b/browser/components/preferences/preferences.xhtml
@@ -155,16 +155,23 @@
-
+
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.js b/toolkit/mozapps/extensions/content/aboutaddons.js
index 6540a39f6a3d..33fd07e3f551 100644
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -1954,77 +1954,59 @@ class SidebarFooter extends HTMLElement {
let list = document.createElement("ul");
list.classList.add("sidebar-footer-list");
+ let prefsItem = document.createElement("li");
+ prefsItem.classList.add("sidebar-footer-item");
+ let prefsLink = document.createElement("a");
+ prefsLink.classList.add("sidebar-footer-link", "preferences-icon");
+ prefsLink.id = "preferencesButton";
+ prefsLink.href = "about:preferences";
+ document.l10n.setAttributes(prefsLink, "sidebar-preferences-button-title");
let systemPrincipal = Services.scriptSecurityManager.getSystemPrincipal();
- let prefsItem = this.createItem({
- icon: "chrome://global/skin/icons/settings.svg",
- createLinkElement: () => {
- let link = document.createElement("a");
- link.href = "about:preferences";
- return link;
- },
- titleL10nId: "sidebar-preferences-button-title",
- labelL10nId: "preferences",
- onClick: e => {
- e.preventDefault();
- AMTelemetry.recordLinkEvent({
- object: "aboutAddons",
- value: "about:preferences",
- extra: {
- view: getTelemetryViewName(this),
- },
- });
- windowRoot.ownerGlobal.switchToTabHavingURI("about:preferences", true, {
- ignoreFragment: "whenComparing",
- triggeringPrincipal: systemPrincipal,
- });
- },
+ prefsLink.addEventListener("click", e => {
+ e.preventDefault();
+ AMTelemetry.recordLinkEvent({
+ object: "aboutAddons",
+ value: "about:preferences",
+ extra: {
+ view: getTelemetryViewName(this),
+ },
+ });
+ windowRoot.ownerGlobal.switchToTabHavingURI("about:preferences", true, {
+ ignoreFragment: "whenComparing",
+ triggeringPrincipal: systemPrincipal,
+ });
});
+ let prefsText = document.createElement("span");
+ prefsText.classList.add("sidebar-footer-link-text");
+ document.l10n.setAttributes(prefsText, "preferences");
+ prefsLink.append(prefsText);
+ prefsItem.append(prefsLink);
- let supportItem = this.createItem({
- icon: "chrome://global/skin/icons/help.svg",
- createLinkElement: () => {
- let link = document.createElement("a", { is: "support-link" });
- link.setAttribute("support-page", "addons-help");
- link.id = "help-button";
- return link;
- },
- titleL10nId: "sidebar-help-button-title",
- labelL10nId: "help-button",
- onClick: e => {
- AMTelemetry.recordLinkEvent({
- object: "aboutAddons",
- value: "support",
- extra: {
- view: getTelemetryViewName(this),
- },
- });
- },
+ let supportItem = document.createElement("li");
+ supportItem.classList.add("sidebar-footer-item");
+ let supportLink = document.createElement("a", { is: "support-link" });
+ document.l10n.setAttributes(supportLink, "sidebar-help-button-title");
+ supportLink.classList.add("sidebar-footer-link", "help-icon");
+ supportLink.id = "help-button";
+ supportLink.setAttribute("support-page", "addons-help");
+ supportLink.addEventListener("click", e => {
+ AMTelemetry.recordLinkEvent({
+ object: "aboutAddons",
+ value: "support",
+ extra: {
+ view: getTelemetryViewName(this),
+ },
+ });
});
+ let supportText = document.createElement("span");
+ supportText.classList.add("sidebar-footer-link-text");
+ document.l10n.setAttributes(supportText, "help-button");
+ supportLink.append(supportText);
+ supportItem.append(supportLink);
list.append(prefsItem, supportItem);
this.append(list);
}
-
- createItem({ onClick, titleL10nId, labelL10nId, icon, createLinkElement }) {
- let listItem = document.createElement("li");
-
- let link = createLinkElement();
- link.classList.add("sidebar-footer-link");
- link.addEventListener("click", onClick);
- document.l10n.setAttributes(link, titleL10nId);
-
- let img = document.createElement("img");
- img.src = icon;
- img.className = "sidebar-footer-icon";
-
- let label = document.createElement("span");
- label.className = "sidebar-footer-label";
- document.l10n.setAttributes(label, labelL10nId);
-
- link.append(img, label);
- listItem.append(link);
- return listItem;
- }
}
customElements.define("sidebar-footer", SidebarFooter, { extends: "footer" });
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index 260bb853cf0e..39ab261ba811 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -1097,8 +1097,6 @@ input[type="text"][warning]:enabled:not(:focus) {
box-shadow: 0 0 0 1px var(--yellow-60), 0 0 0 4px var(--yellow-60-a30);
}
-/* Cards */
-
.card {
background: var(--in-content-box-background);
/* Needed for high-contrast where the border will appear. */
@@ -1125,8 +1123,6 @@ input[type="text"][warning]:enabled:not(:focus) {
transform: scaleX(-1);
}
-/* Sidebar footer links */
-
.sidebar-footer-list {
list-style-type: none;
margin-block: 0 36px;
@@ -1134,32 +1130,61 @@ input[type="text"][warning]:enabled:not(:focus) {
padding: 0;
}
-.sidebar-footer-link {
+.sidebar-footer-link,
+.sidebar-footer-button > .text-link {
+ -moz-box-flex: 1;
+ margin-inline: 34px 0;
+ text-decoration: none;
+ color: currentColor;
+ width: 36px;
height: 36px;
cursor: default;
- border-radius: 2px;
+}
+
+.sidebar-footer-link {
display: flex;
align-items: center;
+ background-size: 16px;
+ background-repeat: no-repeat;
+ background-position-x: 13px;
+ background-position-y: 10px;
+ cursor: default;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ padding-inline-start: 43px;
- /* Override link style for :hover and :hover:active states */
- text-decoration: none !important;
- color: inherit !important;
+ /* These override the common styles. */
+ margin: 0;
+ font-size: .9em;
+ width: auto;
}
-xul|*.sidebar-footer-link {
- display: -moz-box;
- -moz-box-align: center;
+.sidebar-footer-link:dir(rtl) {
+ background-position-x: right 13px;
}
-.sidebar-footer-link:hover {
+.sidebar-footer-link,
+.sidebar-footer-link:hover,
+.sidebar-footer-link:hover:active,
+.sidebar-footer-link:visited {
+ text-decoration: none;
+ color: currentColor;
+}
+
+.sidebar-footer-link:hover,
+.sidebar-footer-button > .text-link:hover {
background-color: var(--in-content-category-background-hover);
+ border-radius: 2px;
}
-.sidebar-footer-link:hover:active:not([disabled]) {
+.sidebar-footer-link:hover:active:not([disabled]),
+.sidebar-footer-button > .text-link:hover:active:not([disabled]) {
background-color: var(--in-content-category-background-active);
+ color: currentColor;
}
-.sidebar-footer-link:-moz-focusring {
+.sidebar-footer-link:-moz-focusring,
+.sidebar-footer-button > .text-link:-moz-focusring {
outline: var(--in-content-category-outline-focus);
outline-offset: -1px;
}
@@ -1171,18 +1196,61 @@ xul|*.sidebar-footer-link {
height: 16px;
margin: 10px;
margin-inline-start: 13px;
+ vertical-align: middle;
+}
+
+.sidebar-footer-icon:hover {
+ fill: currentColor !important;
+}
+
+.sidebar-footer-button:last-of-type {
+ margin-bottom: 36px;
+}
+
+xul|*.help-icon {
+ list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+html|*.help-icon {
+ background-image: url("chrome://global/skin/icons/help.svg");
+}
+
+.preferences-icon {
+ background-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+.addons-icon {
+ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+ /* The add-ons icon doesn't have much (any?) margin, so make it a bit smaller. */
+ width: 14px;
+ height: 14px;
+ margin-inline-start: 15px;
}
.sidebar-footer-label {
- font-size: .9em;
margin: 0 4px;
+ font-size: .9em;
user-select: none;
}
@media (max-width: 830px) {
+ .sidebar-footer-button > .text-link {
+ -moz-box-flex: 0;
+ width: 36px;
+ height: 36px;
+ margin-inline-start: 0;
+ }
+
+ .sidebar-footer-icon {
+ margin: 10px;
+ }
+
+ .sidebar-footer-label {
+ display: none;
+ }
+
.sidebar-footer-list {
margin-inline-start: 40px;
- -moz-box-align: start;
}
.sidebar-footer-link {
@@ -1192,30 +1260,17 @@ xul|*.sidebar-footer-link {
margin-inline-start: 1px;
}
- .sidebar-footer-icon {
- margin-inline-start: 10px;
+ .sidebar-footer-link,
+ /* We need to override the full-width RTL rule, so explicitly specify RTL. */
+ .sidebar-footer-link:dir(rtl) {
+ background-position: center;
}
- .sidebar-footer-label {
+ .sidebar-footer-link-text {
display: none;
}
}
-/* Icon helper classes */
-
-xul|*.help-icon {
- list-style-image: url("chrome://global/skin/icons/help.svg");
-}
-
-xul|*.addons-icon {
- list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
- /* The add-ons icon doesn't have much (any?) margin, so make it a bit smaller. */
- scale: 87.5%;
- translate: 6.25%;
-}
-
-/* Back button */
-
.back-button {
-moz-context-properties: fill;
fill: currentColor;