Bug 1351255 - Align icons in webextension install dialog r=nhnt11
authorMark Striemer <mstriemer@mozilla.com>
Thu, 01 Jun 2017 15:20:29 -0500
changeset 411452 405e89243e0a88abf3982cddb4a2043ec3eef908
parent 411451 cad0db00e0b473bab9f7abae5b57074cd7e99865
child 411453 d9b245a92c6cf1e46a9fbbe559f57afff90f7fd4
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1351255
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
@@ -1986,32 +1986,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
@@ -1593,32 +1593,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 {