Bug 1445916 - Use svg icons headerPane's email button and in edit contacts panel. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Fri, 16 Mar 2018 06:56:34 +0100
changeset 23524 0ab0740d69692760ad652a45c84e27f755935368
parent 23523 08a841e8b1af77cffce8eefa0eeced022d36d63a
child 23525 fd4fc0651becf6a0c0982fa34adc12e4a6b09d68
push id14203
push usermozilla@jorgk.com
push dateFri, 16 Mar 2018 08:29:21 +0000
treeherdercomm-central@0ab0740d6969 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1445916
Bug 1445916 - Use svg icons headerPane's email button and in edit contacts panel. r=jorgk
mail/base/content/editContactOverlay.xul
mail/base/content/mailWidgets.xml
mail/themes/linux/jar.mn
mail/themes/linux/mail/contactStarred.png
mail/themes/linux/mail/editContactOverlay.css
mail/themes/linux/mail/messageHeader.css
mail/themes/linux/mail/starContact.png
mail/themes/linux/mail/starred48.png
mail/themes/osx/jar.mn
mail/themes/osx/mail/editContactOverlay.css
mail/themes/osx/mail/messageHeader.css
mail/themes/osx/mail/starIcons.png
mail/themes/osx/mail/starIcons@2x.png
mail/themes/osx/mail/starred48.png
mail/themes/shared/jar.inc.mn
mail/themes/shared/mail/icons/starred.svg
mail/themes/shared/mail/messageHeader.css
mail/themes/windows/jar.mn
mail/themes/windows/mail/contactStarred.png
mail/themes/windows/mail/editContactOverlay.css
mail/themes/windows/mail/messageHeader.css
mail/themes/windows/mail/starContact.png
mail/themes/windows/mail/starred48.png
--- a/mail/base/content/editContactOverlay.xul
+++ b/mail/base/content/editContactOverlay.xul
@@ -22,17 +22,17 @@
          type="arrow"
          orient="vertical"
          ignorekeys="true"
          hidden="true"
          aria-labelledby="editContactPanelTitle"
          onpopuphidden="editContactInlineUI.onPopupHidden(event);"
          onpopupshown="editContactInlineUI.onPopupShown(event);"
          onkeypress="editContactInlineUI.onKeyPress(event, true);">
-    <hbox flex="1" align="top">
+    <hbox flex="1" align="center">
       <image id="editContactPanelIcon"/>
       <label id="editContactPanelTitle" flex="1"/>
       <button id="editContactPanelDeleteContactButton"
               label="&editContactPanelDeleteContact.label;"
               accesskey="&editContactPanelDeleteContact.accesskey;"
               oncommand="editContactInlineUI.deleteContact();"
               onkeypress="editContactInlineUI.onKeyPress(event, false);"/>
     </hbox>
--- a/mail/base/content/mailWidgets.xml
+++ b/mail/base/content/mailWidgets.xml
@@ -975,32 +975,32 @@
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="mail-emailaddress">
     <content>
-      <xul:description anonid="emailValue" class="emailDisplayButton"
-                       xbl:inherits="hascard,aria-label"
-                       context="emailAddressPopup" popup="emailAddressPopup"
-                       flex="1" role="textbox" aria-readonly="true">
+      <xul:hbox anonid="emailValue" class="emailDisplayButton"
+                xbl:inherits="hascard,aria-label" align="center"
+                context="emailAddressPopup" popup="emailAddressPopup"
+                flex="1" role="textbox" aria-readonly="true">
         <xul:label class="emaillabel" anonid="emaillabel"
                    xbl:inherits="value=label,crop"/>
         <xul:image class="emailStar" anonid="emailStar"
                    context="emailAddressPopup"
                    onmousedown="event.preventDefault();"
                    onclick="onClickEmailStar(event, this.parentNode.parentNode);"
                    xbl:inherits="hascard,tooltiptext=tooltipstar,chatStatus"/>
         <xul:image class="emailPresence" anonid="emailPresence"
                    onmousedown="event.preventDefault();"
                    onclick="onClickEmailPresence(event, this.parentNode.parentNode);"
                    xbl:inherits="chatStatus,tooltiptext=presenceTooltip"/>
-      </xul:description>
+      </xul:hbox>
     </content>
 
     <implementation>
       <property name="label"      onset="this.getPart('emailValue').setAttribute('label',val); return val;"
                                   onget="return this.getPart('emailValue').getAttribute('label');"/>
       <property name="crop"       onset="this.getPart('emailValue').setAttribute('crop',val); return val;"
                                   onget="return this.getPart('emailValue').getAttribute('crop');"/>
       <property name="disabled"   onset="this.getPart('emailValue').setAttribute('disabled',val); return val;"
@@ -1014,23 +1014,23 @@
       </method>
     </implementation>
   </binding>
 
   <!-- a single newsgroup as displayed in the message header with a drop-down
        menu for various actions -->
   <binding id="mail-newsgroup">
     <content>
-      <xul:description anonid="newsgroupValue" class="emailDisplayButton"
-                       context="newsgroupPopup" popup="newsgroupPopup"
-                       flex="1">
+      <xul:hbox anonid="newsgroupValue" class="emailDisplayButton"
+                context="newsgroupPopup" popup="newsgroupPopup"
+                flex="1" align="center">
         <xul:label class="newsgrouplabel" anonid="newsgrouplabel"
                    role="textbox" aria-readonly="true"
                    xbl:inherits="value=label,crop"/>
-      </xul:description>
+      </xul:hbox>
     </content>
 
     <implementation>
       <property name="label"      onset="this.getPart('newsgroupValue').setAttribute('label',val); return val;"
                                   onget="return this.getPart('newsgroupValue').getAttribute('label');"/>
     </implementation>
   </binding>
 
--- a/mail/themes/linux/jar.mn
+++ b/mail/themes/linux/jar.mn
@@ -51,19 +51,16 @@ classic.jar:
   skin/classic/messenger/icons/zoomout.png                    (mail/icons/zoomout.png)
   skin/classic/messenger/icons/zoomout-hover.png              (mail/icons/zoomout-hover.png)
   skin/classic/messenger/dialogs.css                          (mail/dialogs.css)
   skin/classic/messenger/filefield.css                        (mail/filefield.css)
   skin/classic/messenger/newmailalert.css                     (mail/newmailalert.css)
   skin/classic/messenger/tabmail.css                          (mail/tabmail.css)
   skin/classic/messenger/editContactOverlay.css               (mail/editContactOverlay.css)
   skin/classic/messenger/quickFilterBar.css                   (mail/quickFilterBar.css)
-  skin/classic/messenger/starred48.png                        (mail/starred48.png)
-  skin/classic/messenger/contactStarred.png                   (mail/contactStarred.png)
-  skin/classic/messenger/starContact.png                      (mail/starContact.png)
   skin/classic/messenger/activity/activity.css                (mail/activity/activity.css)
   skin/classic/messenger/activity/buttons.png                 (mail/activity/buttons.png)
   skin/classic/messenger/activity/defaultProcessIcon.png      (mail/activity/defaultProcessIcon.png)
   skin/classic/messenger/activity/defaultEventIcon.png        (mail/activity/defaultEventIcon.png)
   skin/classic/messenger/activity/defaultWarningIcon.png      (mail/activity/defaultWarningIcon.png)
   skin/classic/messenger/activity/undoIcon.png                (mail/activity/undoIcon.png)
   skin/classic/messenger/activity/syncMailIcon.png            (mail/activity/syncMailIcon.png)
   skin/classic/messenger/activity/sendMailIcon.png            (mail/activity/sendMailIcon.png)
deleted file mode 100644
index 91aefceef89650b2385c32092ce4ef668aad885c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/mail/themes/linux/mail/editContactOverlay.css
+++ b/mail/themes/linux/mail/editContactOverlay.css
@@ -5,40 +5,51 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 .editContactPanel_rowLabel {
   text-align: end;
 }
 
 #editContactPanel {
-  margin-inline-start: 0px;
+  margin-inline-start: 0;
 }
 
 #editContactPanelIcon {
-  list-style-image: url("chrome://messenger/skin/starred48.png");
-  width: 48px;
-  height: 48px;
-  min-height: 48px;
+  list-style-image: url("chrome://messenger/skin/icons/starred.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin: 4px;
 }
 
 #editContactPanelTitle {
   font-size: 130%;
   font-weight: bold;
-  margin-top: 8px;
-  margin-bottom: 0px;
   margin-inline-start: 9px;
   margin-inline-end: 12px;
 }
 
+#editContactContent {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 #editContactEmail {
   min-width: 20em;
 }
 
 #contactMoveDisabledText {
   margin-top: 8px;
   margin-bottom: 5px;
   width: 20em;
 }
 
 #editContactAddressBookList[disabled="true"] {
   color: GrayText !important;
 }
+
+/* align with textbox and menulist */
+button {
+  margin-inline-end: 4px;
+}
--- a/mail/themes/linux/mail/messageHeader.css
+++ b/mail/themes/linux/mail/messageHeader.css
@@ -306,78 +306,27 @@ toolbar[mode="icons"] > #otherActionsBut
   padding-inline-start: 2px;
   -moz-box-pack: end;
 }
 
 
 /* ::::: msg header email addresses ::::: */
 
 .emailDisplayButton {
-  margin: 0;
-  padding-inline-start: 2px !important;
-  padding-inline-end: 2px !important;
-  background-color: transparent;
   border-radius: 2px;
   border: 1px dotted transparent;
 }
 
-.emailDisplayButton:hover {
-  cursor: pointer;
-  color: HighlightText;
-  background-color: Highlight;
-}
-
-mail-emailaddress[selected="true"] .emailDisplayButton{
-  /* when an email address context menu is selected,
-    make sure that the email bubble stays displayed, and
-    tweak the bottom to blend in more w/ the menu */
-  cursor: pointer;
-  border-radius: 3px;
-  color: HighlightText;
-  background-color: Highlight;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emailSeparator {
-  /* this is for the comma in between email addresses/newsgroups */
-  margin-inline-start: -3px; /* squeeze it inside the bubble, by the star */
-}
-
 .emailDisplayButton:focus {
-  border: 1px dotted Highlight;
-}
-
-.emailStar {
-  max-width: 1em;
-  max-height: 1em;
-  -moz-appearance: none;
-  -moz-box-orient: vertical;
-  padding: 0px;
-  margin-inline-start: -2px !important;
-  list-style-image: url("chrome://messenger/skin/starContact.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-.emailStar:hover {
-  -moz-image-region:rect(0px 32px 16px 16px);
-}
-
-.emailStar:hover:active {
-  -moz-image-region:rect(0px 48px 16px 32px);
-}
-
-.emailStar[hascard="true"] {
-  list-style-image: url("chrome://messenger/skin/contactStarred.png");
+  border-color: Highlight;
 }
 
 .emailPresence {
-  padding: 0px;
-  margin-inline-start: -2px !important;
-  -moz-image-region: rect(6px, 16px, 16px, 6px);
+  margin-inline-start: 2px;
+  -moz-image-region: rect(6px 16px 16px 6px);
 }
 
 .emailPopup {
   font-size: inherit;
   max-height: 7px; /* the height of the image */
   margin: 0.2em 2px 0px; /* 0.2em just to move it off the top of the text */
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-grey.png");
 }
deleted file mode 100644
index b8197d87f232dd9b46786c4de7bdd4d3465568c8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index bfa14599a1975cfff55b9e3eee899221bb5605c7..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/mail/themes/osx/jar.mn
+++ b/mail/themes/osx/jar.mn
@@ -45,19 +45,16 @@ classic.jar:
   skin/classic/messenger/folderPane.css                          (mail/folderPane.css)
   skin/classic/messenger/subscribe.css                           (mail/subscribe.css)
   skin/classic/messenger/virtualFolderListDialog.css             (mail/virtualFolderListDialog.css)
   skin/classic/messenger/searchDialog.css                        (mail/searchDialog.css)
   skin/classic/messenger/filterDialog.css                        (mail/filterDialog.css)
   skin/classic/messenger/tabmail.css                             (mail/tabmail.css)
   skin/classic/messenger/editContactOverlay.css                  (mail/editContactOverlay.css)
   skin/classic/messenger/quickFilterBar.css                      (mail/quickFilterBar.css)
-  skin/classic/messenger/starred48.png                           (mail/starred48.png)
-  skin/classic/messenger/starIcons.png                           (mail/starIcons.png)
-  skin/classic/messenger/starIcons@2x.png                        (mail/starIcons@2x.png)
   skin/classic/messenger/activity/activity.css                   (mail/activity/activity.css)
   skin/classic/messenger/activity/buttons.png                    (mail/activity/buttons.png)
   skin/classic/messenger/activity/defaultProcessIcon.png         (mail/activity/defaultProcessIcon.png)
   skin/classic/messenger/activity/defaultEventIcon.png           (mail/activity/defaultEventIcon.png)
   skin/classic/messenger/activity/error.png                      (mail/activity/error.png)
   skin/classic/messenger/activity/undoIcon.png                   (mail/activity/undoIcon.png)
   skin/classic/messenger/activity/syncMailIcon.png               (mail/activity/syncMailIcon.png)
   skin/classic/messenger/activity/sendMailIcon.png               (mail/activity/sendMailIcon.png)
--- a/mail/themes/osx/mail/editContactOverlay.css
+++ b/mail/themes/osx/mail/editContactOverlay.css
@@ -13,27 +13,28 @@
   margin-inline-start: 0px;
 }
 
 #editContactPanel > #editContactContent {
   margin-top: 6px;
 }
 
 #editContactPanelIcon {
-  list-style-image: url("chrome://messenger/skin/starred48.png");
-  width: 48px;
-  height: 48px;
-  min-height: 48px;
+  list-style-image: url("chrome://messenger/skin/icons/starred.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin: 4px;
 }
 
 #editContactPanelTitle {
   font-size: 130%;
   font-weight: bold;
-  margin-top: 8px;
-  margin-bottom: 2px;
   margin-inline-start: 9px;
   margin-inline-end: 12px;
 }
 
 #editContactEmail {
   min-width: 20em;
 }
 
--- a/mail/themes/osx/mail/messageHeader.css
+++ b/mail/themes/osx/mail/messageHeader.css
@@ -372,128 +372,62 @@ toolbar[mode="icons"] > #otherActionsBut
   text-decoration: underline;
   color: -moz-hyperlinktext;
   background: url("chrome://messenger/skin/icons/arrow-dn-black.png") no-repeat center right;
 }
 
 /* ::::: msg header email addresses ::::: */
 
 .emailDisplayButton {
-  margin: 0 -1px;
-  padding-inline-start: 3px !important;
-  padding-inline-end: 3px !important;
-  background-color: transparent;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
-.emailDisplayButton:hover {
-  cursor: pointer;
-  color: HighlightText;
-  background-color: Highlight;
-  background: linear-gradient(#6bb0fa, #167bff);
-}
-
-mail-emailaddress[selected="true"] .emailDisplayButton {
-  /* when an email address context menu is selected,
-    make sure that the email bubble stays displayed, and
-    tweak the bottom to blend in more w/ the menu */
-  cursor: pointer;
-  color: HighlightText;
-  background: linear-gradient(#6bb0fa, #167bff);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.emailDisplayButton:hover,
+mail-emailaddress[selected="true"] > .emailDisplayButton {
+  background-image: linear-gradient(#6bb0fa, #167bff);
 }
 
 @media (-moz-mac-graphite-theme) {
   .emailDisplayButton:hover,
   mail-emailaddress[selected="true"] .emailDisplayButton {
-    background: linear-gradient(#b1b1b6, #929297);
+    background-image: linear-gradient(#b1b1b6, #929297);
   }
 }
 
-/* this is for the comma in between email addresses */
-.emailSeparator {
-  margin-inline-start: -5px; /* squeeze it inside the bubble, by the star */
-}
-
 .emailDisplayButton:focus {
   outline: 1px dotted;
   outline-offset: -2px;
 }
 
-.emailStar {
-  max-width: 1em;
-  max-height: 1em;
-  -moz-appearance: none;
-  -moz-box-orient: vertical;
-  margin: 0 2px;
-  margin-inline-start: -1px;
-  padding: 0;
-  list-style-image: url("chrome://messenger/skin/starIcons.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.emailDisplayButton:hover .emailStar {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
-.emailStar[hascard="true"] {
-  -moz-image-region: rect(16px, 16px, 32px, 0);
-}
-
-.emailDisplayButton:hover .emailStar[hascard="true"] {
-  -moz-image-region: rect(16px, 32px, 32px, 16px);
-}
-
 .emailPresence {
-  padding: 0px;
-  margin: 0px 2px;
-  -moz-image-region: rect(6px, 16px, 16px, 6px);
+  margin-inline-start: 2px;
+  -moz-image-region: rect(6px 16px 16px 6px);
 }
 
 @media (min-resolution: 2dppx) {
-  .emailStar {
-    width: 16px;
-    height: 16px;
-    list-style-image: url("chrome://messenger/skin/starIcons@2x.png");
-    -moz-image-region: rect(0px 32px 32px 0px);
-  }
-
-  .emailDisplayButton:hover .emailStar {
-    -moz-image-region: rect(0px 64px 32px 32px);
-  }
-
-  .emailStar[hascard="true"] {
-    -moz-image-region: rect(32px 32px 64px 0px);
-  }
-
-  .emailDisplayButton:hover .emailStar[hascard="true"] {
-    -moz-image-region: rect(32px 64px 64px 32px);
-  }
-
   .emailPresence {
     width: 10px;
     height: 10px;
   }
 
   .emailPresence[chatStatus="available"] {
     list-style-image: url("chrome://messenger/skin/icons/status-small@2x.png");
-    -moz-image-region: rect(0px 20px 20px 0px);
+    -moz-image-region: rect(0 20px 20px 0);
   }
 
   .emailPresence[chatStatus="away"] {
     list-style-image: url("chrome://messenger/skin/icons/status-small@2x.png");
-    -moz-image-region: rect(0px 80px 20px 60px);
+    -moz-image-region: rect(0 80px 20px 60px);
   }
 }
 
 .emailPopup {
   font-size: inherit;
   max-height: 7px; /* the height of the image */
-  margin: 0.2em 2px 0px; /* 0.2em just to move it off the top of the text */
+  margin: 0.2em 2px 0; /* 0.2em just to move it off the top of the text */
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-7.png");
 }
 
 /* ::::: view expand and collapse twisties  ::::: */
 
 .expandHeaderViewButton {
   list-style-image:url("chrome://messenger/skin/icons/twisty-open.gif");
 }
deleted file mode 100644
index af23515e6be3ccb3cd8811b9e59e71c7973a5b68..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 472e80d1516d1a6501b9978d442ce776ae7b0df8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 51cc8c0090af2bcb8413f8a59ee915d4486f7e4f..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@@ -63,16 +63,17 @@
   skin/classic/messenger/icons/replylist.svg                  (../shared/mail/icons/replylist.svg)
   skin/classic/messenger/icons/search-glass.svg               (../shared/mail/icons/search-glass.svg)
   skin/classic/messenger/icons/save.svg                       (../shared/mail/icons/save.svg)
   skin/classic/messenger/icons/security.svg                   (../shared/mail/icons/security.svg)
   skin/classic/messenger/icons/send.svg                       (../shared/mail/icons/send.svg)
   skin/classic/messenger/icons/sort.svg                       (../shared/mail/icons/sort.svg)
   skin/classic/messenger/icons/spelling.svg                   (../shared/mail/icons/spelling.svg)
   skin/classic/messenger/icons/star.svg                       (../shared/mail/icons/star.svg)
+  skin/classic/messenger/icons/starred.svg                    (../shared/mail/icons/starred.svg)
   skin/classic/messenger/icons/sticky.svg                     (../shared/mail/icons/sticky.svg)
   skin/classic/messenger/icons/stop.svg                       (../shared/mail/icons/stop.svg)
   skin/classic/messenger/icons/tag.svg                        (../shared/mail/icons/tag.svg)
   skin/classic/messenger/icons/timeline.svg                   (../shared/mail/icons/timeline.svg)
   skin/classic/messenger/icons/toolbarbutton-arrow.svg        (../shared/mail/icons/toolbarbutton-arrow.svg)
   skin/classic/messenger/shared/accountProvisioner.css        (../shared/mail/accountProvisioner.css)
   skin/classic/messenger/shared/addressbook.css               (../shared/mail/addressbook.css)
   skin/classic/messenger/shared/in-content/dialog.css         (../shared/mail/incontentprefs/dialog.css)
new file mode 100644
--- /dev/null
+++ b/mail/themes/shared/mail/icons/starred.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.845 6.064A1.1 1.1 0 0 0 15 5.331L10.911 4.6 8.985.735a1.1 1.1 0 0 0-1.969 0L5.089 4.6l-4.081.729a1.1 1.1 0 0 0-.615 1.834L3.32 10.31l-.609 4.36a1.1 1.1 0 0 0 1.6 1.127L8 13.873l3.69 1.927a1.1 1.1 0 0 0 1.6-1.127l-.61-4.363 2.926-3.146a1.1 1.1 0 0 0 .239-1.1z"/>
+</svg>
--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -126,53 +126,100 @@ toolbarpaletteitem #hdrDummyReplyButton 
   border-width: 0.5px;
   border-style: outset;
   text-shadow: 0 1px 0 rgba(238, 238, 236, 0.4); /* Tango Alumninum 1 */
   color: #111111;
 }
 
 /* ::::: msg header email addresses ::::: */
 
+.emailDisplayButton {
+  padding-inline-start: 2px;
+  padding-inline-end: 2px;
+}
+
+.emailDisplayButton:hover {
+  cursor: pointer;
+  color: HighlightText;
+  background-color: Highlight;
+}
+
+mail-emailaddress[selected="true"] > .emailDisplayButton {
+  /* when an email address context menu is selected,
+   * make sure that the email menupopup stays displayed,
+   * and tweak the bottom to blend in more w/ the menu
+   */
+  cursor: pointer;
+  color: HighlightText;
+  background-color: Highlight;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* this is for the comma in between email addresses */
+.emailSeparator {
+  margin-inline-start: -3px; /* squeeze it inside the bubble, by the star */
+}
+
 /* Because there's no star for newsgroups like there is for email addresses,
  * pushing it back the same number of pixels as emailSeparator causes
  * the comma to be drawn too close to the last letter, which looks bad, so
  * using a separate rule here.
  */
 .newsgroupSeparator {
   margin-inline-start: -2px;
 }
 
+.emailStar {
+  width: 1em;
+  height: 1em;
+  margin-inline-start: 2px;
+  list-style-image: url("chrome://messenger/skin/icons/star.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.emailStar[hascard="true"] {
+  list-style-image: url("chrome://messenger/skin/icons/starred.svg");
+  fill: var(--toolbarbutton-icon-fill-attention);
+}
+
+.emailDisplayButton:hover > .emailStar,
+mail-emailaddress[selected="true"] > .emailDisplayButton > .emailStar {
+  fill: HighlightText;
+}
+
 .emailStar:focus {
   outline: 1px dotted;
 }
 
 .emaillabel {
   max-width: 60vw; /* for very long email fields */
 }
 
 .emaillabel,
 .newsgrouplabel {
-  padding: 0px !important;  /* override <label> defaults */
-  margin: 0px !important;  /* override <label> defaults */
+  padding: 0;  /* override <label> defaults */
+  margin: 0;  /* override <label> defaults */
   overflow: hidden;
 }
 
 .emailStar[chatStatus],
 .emailPresence:not([chatStatus]) {
   display: none;
 }
 
 .emailPresence[chatStatus="available"] {
   list-style-image: url("chrome://messenger/skin/icons/status-small.png");
-  -moz-image-region: rect(0px 10px 10px 0px);
+  -moz-image-region: rect(0 10px 10px 0);
 }
 
 .emailPresence[chatStatus="away"] {
   list-style-image: url("chrome://messenger/skin/icons/status-small.png");
-  -moz-image-region: rect(0px 40px 10px 30px);
+  -moz-image-region: rect(0 40px 10px 30px);
 }
 
 .emailPopup:hover {
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-blue.png");
 }
 
 /* ::::: email address twisty ::::: */
 
--- a/mail/themes/windows/jar.mn
+++ b/mail/themes/windows/jar.mn
@@ -48,19 +48,16 @@ classic.jar:
   skin/classic/messenger/multimessageview.css                 (mail/multimessageview.css)
   skin/classic/messenger/glodaFacetView.css                   (mail/glodaFacetView.css)
   skin/classic/messenger/icons/exclude.png                    (mail/icons/exclude.png)
   skin/classic/messenger/icons/exclude-selected.png           (mail/icons/exclude-selected.png)
   skin/classic/messenger/newmailalert.css                     (mail/newmailalert.css)
   skin/classic/messenger/tabmail.css                          (mail/tabmail.css)
   skin/classic/messenger/editContactOverlay.css               (mail/editContactOverlay.css)
   skin/classic/messenger/quickFilterBar.css                   (mail/quickFilterBar.css)
-  skin/classic/messenger/starred48.png                        (mail/starred48.png)
-  skin/classic/messenger/contactStarred.png                   (mail/contactStarred.png)
-  skin/classic/messenger/starContact.png                      (mail/starContact.png)
   skin/classic/messenger/activity/activity.css                (mail/activity/activity.css)
   skin/classic/messenger/activity/addItemIcon.png             (mail/activity/addItemIcon.png)
   skin/classic/messenger/activity/buttons.png                 (mail/activity/buttons.png)
   skin/classic/messenger/activity/compactMailIcon.png         (mail/activity/compactMailIcon.png)
   skin/classic/messenger/activity/copyMailIcon.png            (mail/activity/copyMailIcon.png)
   skin/classic/messenger/activity/defaultEventIcon.png        (mail/activity/defaultEventIcon.png)
   skin/classic/messenger/activity/defaultProcessIcon.png      (mail/activity/defaultProcessIcon.png)
   skin/classic/messenger/activity/deleteMailIcon.png          (mail/activity/deleteMailIcon.png)
deleted file mode 100644
index 91aefceef89650b2385c32092ce4ef668aad885c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/mail/themes/windows/mail/editContactOverlay.css
+++ b/mail/themes/windows/mail/editContactOverlay.css
@@ -5,35 +5,41 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 .editContactPanel_rowLabel {
   text-align: end;
 }
 
 #editContactPanel {
-  margin-inline-start: 0px;
+  margin-inline-start: 0;
 }
 
 #editContactPanelIcon {
-  list-style-image: url("chrome://messenger/skin/starred48.png");
-  width: 48px;
-  height: 48px;
-  min-height: 48px;
+  list-style-image: url("chrome://messenger/skin/icons/starred.svg");
+  -moz-context-properties: fill;
+  fill: var(--toolbarbutton-icon-fill-attention);
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin: 4px;
 }
 
 #editContactPanelTitle {
   font-size: 130%;
   font-weight: bold;
-  margin-top: 8px;
-  margin-bottom: 0px;
   margin-inline-start: 9px;
   margin-inline-end: 12px;
 }
 
+#editContactContent {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 #editContactEmail {
   min-width: 20em;
 }
 
 .editContactTextbox[readonly="true"] {
   -moz-appearance: none;
   margin: 4px 7px;
   border: none;
@@ -42,8 +48,13 @@
 
 #editContactAddressBookList[disabled="true"] {
   color: grey !important;
 }
 
 #contactMoveDisabledText {
   width: 20em;
 }
+
+/* align with textbox and menulist */
+button {
+  margin-inline-end: 4px;
+}
--- a/mail/themes/windows/mail/messageHeader.css
+++ b/mail/themes/windows/mail/messageHeader.css
@@ -184,78 +184,32 @@ window[inlinetoolbox] #newtoolbar {
   padding-inline-start: 2px;
   -moz-box-pack: end;
 }
 
 
 /* ::::: msg header email addresses ::::: */
 
 .emailDisplayButton {
-  margin: 0;
-  padding-inline-start: 2px !important;
-  padding-inline-end: 2px !important;
-  background-color: transparent;
-  border-radius: 2px;
   border: 1px dotted transparent;
 }
 
-.emailDisplayButton:hover {
-  cursor: pointer;
-  color: HighlightText;
-  background-color: Highlight;
-}
-
-mail-emailaddress[selected="true"] .emailDisplayButton{
-  /* when an email address context menu is selected,
-    make sure that the email bubble stays displayed, and
-    tweak the bottom to blend in more w/ the menu */
-  cursor: pointer;
-  border-radius: 3px;
-  color: HighlightText;
-  background-color: Highlight;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emailSeparator {
-  /* this is for the comma in between email addresses/newsgroups */
-  margin-inline-start: -3px; /* squeeze it inside the bubble, by the star */
+.emailDisplayButton:focus {
+  border-color: Highlight;
 }
 
-.emailDisplayButton:focus {
-  border: 1px dotted Highlight;
-}
-
-.emailStar {
-  max-width: 1em;
-  max-height: 1em;
-  -moz-appearance: none;
-  -moz-box-orient: vertical;
-  padding: 0;
-  margin-inline-start: -2px !important;
-  list-style-image: url("chrome://messenger/skin/starContact.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.emailStar:hover {
-  -moz-image-region:rect(0 32px 16px 16px);
-}
-
-.emailStar:hover:active {
-  -moz-image-region:rect(0 48px 16px 32px);
-}
-
-.emailStar[hascard="true"] {
-  list-style-image: url("chrome://messenger/skin/contactStarred.png");
+@media (-moz-os-version: windows-win7) {
+  .emailDisplayButton {
+    border-radius: 2px;
+  }
 }
 
 .emailPresence {
-  padding: 0px;
-  margin-inline-start: -2px !important;
-  -moz-image-region: rect(6px, 16px, 16px, 6px);
+  margin-inline-start: 2px;
+  -moz-image-region: rect(6px 16px 16px 6px);
 }
 
 .emailPopup {
   font-size: inherit;
   max-height: 7px; /* the height of the image */
   margin: 0.2em 2px 0; /* 0.2em just to move it off the top of the text */
   list-style-image: url("chrome://messenger/skin/icons/arrow-dn-grey.png");
 }
deleted file mode 100644
index b8197d87f232dd9b46786c4de7bdd4d3465568c8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index bfa14599a1975cfff55b9e3eee899221bb5605c7..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001