Bug 1351255 - Align add-on install notification r?nhnt11
MozReview-Commit-ID: GbXjSOv5K6Q
--- 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
@@ -802,34 +802,58 @@ 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,
+#addon-installed-notification-header {
+ margin-top: 0;
+}
+
+#addon-installed-notification-message {
+ margin-top: 0.5em;
+}
+
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
.addon-addon-icon {
width: 14px;
height: 14px;
list-style-image: url("chrome://browser/skin/menuPanel.svg");
-moz-image-region: rect(0px, 288px, 32px, 256px);
+ vertical-align: bottom;
+ margin-bottom: 2px;
}
.addon-toolbar-icon {
width: 14px;
height: 14px;
list-style-image: url("chrome://browser/skin/Toolbar.png");
-moz-image-region: rect(0, 486px, 18px, 468px);
+ vertical-align: bottom;
+ margin-bottom: 2px;
+}
+
+@media (min-resolution: 1.1dppx) {
+ .addon-toolbar-icon {
+ list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
+ -moz-image-region: rect(0, 972px, 36px, 936px);
+ }
}
/* Notification icon box */
.notification-anchor-icon:-moz-focusring {
outline: 1px dotted -moz-DialogText;
}
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3050,34 +3050,55 @@ 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,
+#addon-installed-notification-header {
+ margin-top: 0;
+}
+
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
.addon-addon-icon {
- width: 14px;
- height: 14px;
+ /* The add-on icon goes right to the edge of its bounds. Make it smaller and
+ * move it up with bottom margin to match the menu icon more closely. */
+ width: 13px;
+ height: 13px;
list-style-image: url("chrome://browser/skin/menuPanel.svg");
-moz-image-region: rect(0px, 288px, 32px, 256px);
+ vertical-align: bottom;
+ margin-bottom: 2px;
}
.addon-toolbar-icon {
width: 14px;
height: 14px;
list-style-image: url("chrome://browser/skin/Toolbar.png");
-moz-image-region: rect(0, 486px, 18px, 468px);
+ vertical-align: bottom;
+}
+
+@media (min-resolution: 1.1dppx) {
+ .addon-toolbar-icon {
+ list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
+ -moz-image-region: rect(0, 972px, 36px, 936px);
+ }
}
/* Status panel */
.statuspanel-label {
margin: 0;
padding: 2px 4px;
background: linear-gradient(#fff, #ddd);
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2093,34 +2093,55 @@ 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,
+#addon-installed-notification-header {
+ margin-top: 0;
+}
+
.addon-webext-name {
display: inline;
font-weight: bold;
margin: 0;
}
.addon-addon-icon {
+ /* The add-on icon goes right to the edge of its bounds. Make it smaller and
+ * move it up with bottom margin to match the menu icon more closely. */
width: 14px;
height: 14px;
list-style-image: url("chrome://browser/skin/menuPanel.svg");
-moz-image-region: rect(0px, 288px, 32px, 256px);
+ vertical-align: bottom;
+ margin-bottom: 2px;
}
.addon-toolbar-icon {
width: 14px;
height: 14px;
list-style-image: url("chrome://browser/skin/Toolbar.png");
-moz-image-region: rect(0, 486px, 18px, 468px);
+ vertical-align: bottom;
+}
+
+@media (min-resolution: 1.1dppx) {
+ .addon-toolbar-icon {
+ list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
+ -moz-image-region: rect(0, 972px, 36px, 936px);
+ }
}
/* Notification icon box */
.notification-anchor-icon:-moz-focusring {
outline: 1px dotted -moz-DialogText;
}