Bug 1351255 - Align icons in webextension install dialog r?nhnt11 draft
authorMark Striemer <mstriemer@mozilla.com>
Thu, 01 Jun 2017 15:20:29 -0500
changeset 591948 215bc80625c4733e2f65e39873b1a4fe55321c09
parent 587764 3b2d0ff5f9a365be1e57e1c8b11d11f43ea169d0
child 591998 898f67e3e694f848bc1ccb58a67cc2f6b3ab728c
push id63214
push userbmo:mstriemer@mozilla.com
push dateFri, 09 Jun 2017 17:51:31 +0000
reviewersnhnt11
bugs1351255
milestone55.0a1
Bug 1351255 - Align icons in webextension install dialog r?nhnt11 MozReview-Commit-ID: 43KngOirCkJ
browser/base/content/popup-notifications.inc
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
--- 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 {