Bug 1351255 - Align icons in webextension install dialog r?nhnt11
MozReview-Commit-ID: 43KngOirCkJ
--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -76,13 +76,13 @@
<popupnotificationcontent orient="vertical">
<description id="addon-webext-perm-text" class="addon-webext-perm-text"/>
<label id="addon-webext-perm-intro" class="addon-webext-perm-text"/>
<html:ul id="addon-webext-perm-list" class="addon-webext-perm-list"/>
</popupnotificationcontent>
</popupnotification>
<popupnotification id="addon-installed-notification" hidden="true">
- <popupnotificationcontent orient="vertical">
+ <popupnotificationcontent class="addon-installed-notification-content" orient="vertical">
<description id="addon-installed-notification-header"/>
<description id="addon-installed-notification-message"/>
</popupnotificationcontent>
</popupnotification>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -495,32 +495,49 @@ html|*.addon-webext-perm-list {
margin-inline-start: 0;
}
.popup-notification-description[popupid="addon-webext-permissions"] {
margin: 0;
padding: 0;
}
+.popup-notification-description[popupid="addon-installed"] {
+ display: none;
+}
+
+.addon-installed-notification-content {
+ margin-top: 0;
+}
+
+#addon-installed-notification-header {
+ /* Align the text more closely with the icon by clearing some top line height. */
+ margin-top: -1px;
+}
+
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
-.addon-addon-icon {
+.addon-addon-icon,
+.addon-toolbar-icon {
width: 14px;
height: 14px;
+ vertical-align: bottom;
+ margin-bottom: 1px;
+}
+
+.addon-addon-icon {
list-style-image: url("chrome://browser/skin/menuPanel.svg");
-moz-image-region: rect(0px, 288px, 32px, 256px);
}
.addon-toolbar-icon {
- width: 14px;
- height: 14px;
list-style-image: url("chrome://browser/skin/menu.svg");
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill);
}
/* Notification icon box */
.notification-anchor-icon:-moz-focusring {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1973,32 +1973,49 @@ html|*.addon-webext-perm-list {
margin-inline-start: 0;
}
.popup-notification-description[popupid="addon-webext-permissions"] {
margin: 0;
padding: 0;
}
+.popup-notification-description[popupid="addon-installed"] {
+ display: none;
+}
+
+.addon-installed-notification-content {
+ margin-top: 0;
+}
+
+#addon-installed-notification-header {
+ /* Align the text more closely with the icon by clearing some top line height. */
+ margin-top: -1px;
+}
+
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
-.addon-addon-icon {
+.addon-addon-icon,
+.addon-toolbar-icon {
width: 14px;
height: 14px;
+ vertical-align: bottom;
+ margin-bottom: 1px;
+}
+
+.addon-addon-icon {
list-style-image: url("chrome://browser/skin/menuPanel.svg");
-moz-image-region: rect(0px, 288px, 32px, 256px);
}
.addon-toolbar-icon {
- width: 14px;
- height: 14px;
list-style-image: url("chrome://browser/skin/menu.svg");
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill);
}
/* Status panel */
.statuspanel-label {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1595,32 +1595,49 @@ html|*.addon-webext-perm-list {
margin-inline-start: 0;
}
.popup-notification-description[popupid="addon-webext-permissions"] {
margin: 0;
padding: 0;
}
+.popup-notification-description[popupid="addon-installed"] {
+ display: none;
+}
+
+.addon-installed-notification-content {
+ margin-top: 0;
+}
+
+#addon-installed-notification-header {
+ /* Align the text more closely with the icon by clearing some top line height. */
+ margin-top: -1px;
+}
+
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
-.addon-addon-icon {
+.addon-addon-icon,
+.addon-toolbar-icon {
width: 14px;
height: 14px;
+ vertical-align: bottom;
+ margin-bottom: 1px;
+}
+
+.addon-addon-icon {
list-style-image: url("chrome://browser/skin/menuPanel.svg");
-moz-image-region: rect(0px, 288px, 32px, 256px);
}
.addon-toolbar-icon {
- width: 14px;
- height: 14px;
list-style-image: url("chrome://browser/skin/menu.svg");
-moz-context-properties: fill;
fill: var(--toolbarbutton-icon-fill);
}
/* Notification icon box */
.notification-anchor-icon:-moz-focusring {