Bug 1100103 - Add a delete button in front of the recipient row in the composer. r=aceman,jorgk a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Wed, 21 Feb 2018 21:04:24 +0100
changeset 30477 01c6b254c2037c36de2fe15a1cc4bc335f34713e
parent 30476 43daf17883d1e37688af61ed84f0a1a87ad85324
child 30478 3f6164d3285b9737c65a916e8bf8c7ef71f8f4c2
push id2146
push usermozilla@jorgk.com
push dateMon, 19 Mar 2018 08:34:14 +0000
treeherdercomm-beta@3f6164d3285b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaceman, jorgk, jorgk
bugs1100103
Bug 1100103 - Add a delete button in front of the recipient row in the composer. r=aceman,jorgk a=jorgk
mail/components/compose/content/messengercompose.xul
mail/themes/linux/mail/compose/messengercompose.css
mail/themes/osx/mail/compose/messengercompose.css
mail/themes/windows/mail/compose/messengercompose.css
--- a/mail/components/compose/content/messengercompose.xul
+++ b/mail/components/compose/content/messengercompose.xul
@@ -1157,29 +1157,31 @@
                    onkeydown="awKeyDown(event, this)"
                    onclick="awClickEmptySpace(event.originalTarget, true)"
                    disableonsend="true">
             <listcols>
               <listcol id="typecol-addressingWidget" style="&headersSpace.style;"/>
               <listcol id="textcol-addressingWidget" flex="1"/>
             </listcols>
             <listitem class="addressingWidgetItem" allowevents="true">
-              <listcell class="addressingWidgetCell" align="stretch">
+              <listcell class="addressingWidgetCell">
                 <menulist id="addressCol1#1" disableonsend="true"
                           class="aw-menulist" flex="1"
                           oncommand="onAddressColCommand(this.id);">
                   <menupopup>
                     <menuitem value="addr_to" label="&toAddr.label;"/>
                     <menuitem value="addr_cc" label="&ccAddr.label;"/>
                     <menuitem value="addr_bcc" label="&bccAddr.label;"/>
                     <menuitem value="addr_reply" label="&replyAddr.label;"/>
                     <menuitem value="addr_newsgroups" label="&newsgroupsAddr.label;"/>
                     <menuitem value="addr_followup" label="&followupAddr.label;"/>
                   </menupopup>
                 </menulist>
+                <image class="deleteAddress close-icon"
+                       onclick="awDeleteHit(this);"/>
               </listcell>
               <listcell class="addressingWidgetCell">
                 <textbox id="addressCol2#1" class="plain textbox-addressingWidget uri-element"
                          aria-labelledby="addressCol1#1"
                          type="autocomplete" flex="1"
                          autocompletesearch="mydomain addrbook ldap news"
                          autocompletesearchparam="{}"
                          timeout="300"
--- a/mail/themes/linux/mail/compose/messengercompose.css
+++ b/mail/themes/linux/mail/compose/messengercompose.css
@@ -355,16 +355,33 @@ html|span.ac-emphasize-text {
 }
 
 .textbox-addressingWidget[focused="true"],
 .textbox-addressingWidget:hover {
   background-color: -moz-field;
   border-color: var(--toolbarbutton-hover-bordercolor) !important;
 }
 
+.deleteAddress {
+  -moz-box-ordinal-group: 0;
+  cursor: default;
+  margin-inline-start: 0;
+  margin-bottom: 1px;
+  width: 0;
+  height: 18px;
+  transition-property: width, margin-inline-start;
+  transition-duration: 50ms, 50ms;
+  transition-timing-function: ease-in-out, ease-in-out;
+}
+
+.addressingWidgetCell:hover > .aw-menulist:not([open="true"]) + .deleteAddress {
+  margin-inline-start: 5px;
+  width: 18px;
+}
+
 .aw-menulist {
   font: inherit;
   margin: 0;
   margin-inline-start: 5px;
   margin-inline-end: 7px;
   padding-inline-end: 0;
   outline: 1px solid transparent;
   outline-offset: -3px;
--- a/mail/themes/osx/mail/compose/messengercompose.css
+++ b/mail/themes/osx/mail/compose/messengercompose.css
@@ -302,16 +302,17 @@ toolbar[nowindowdrag="true"] {
   margin-bottom: 4px;
   margin-inline-end: 6px;
 }
 
 #msgSubject {
   margin-top: 0;
   margin-inline-start: 0;
   margin-inline-end: 1px;
+  min-height: 20px;
   background-color: inherit;
   -moz-appearance: none;
   border: 1px solid transparent;
   border-bottom-color: #C6C6C6;
   border-radius: 2px;
   padding: 1px 2px;
   padding-inline-start: 5px;
   transition: border .2s, background-color .2s;
@@ -417,35 +418,51 @@ html|span.ac-emphasize-text {
 }
 
 .textbox-addressingWidget,
 .dummy-row-cell:not(:first-child) {
   border: 1px solid transparent !important;
   border-bottom-color: #C6C6C6 !important;
   border-top-left-radius: 2px;
   border-bottom-right-radius: 2px;
+  min-height: 20px;
   margin-top: 1px !important;
   margin-bottom: 1px !important;
   padding: 1px 3px !important;
   padding-inline-start: 6px !important;
   transition: border .2s, background-color .2s;
 }
 
 .textbox-addressingWidget[focused="true"],
 .textbox-addressingWidget:hover {
   background-color: white;
   background-image: none;
   border-color: #C6C6C6 !important;
 }
 
+.deleteAddress {
+  -moz-box-ordinal-group: 0;
+  cursor: default;
+  margin-inline-end: 0;
+  width: 0;
+  height: 18px;
+  transition-property: width, margin-inline-end;
+  transition-duration: 50ms, 50ms;
+  transition-timing-function: ease-in-out, ease-in-out;
+}
+
+.addressingWidgetCell:hover > .aw-menulist:not([open="true"]) + .deleteAddress {
+  margin-inline-end: 3px;
+  width: 18px;
+}
+
 .aw-menulist {
   -moz-appearance: none;
   -moz-box-align: center;
   -moz-box-pack: center;
-  min-height: 18px;
   margin: 1px;
   margin-inline-end: 4px;
   background-color: rgba(200, 200, 200, .4) !important;
   border: rgba(149, 165, 166, .3) 1px solid;
   border-radius: 2px;
   background-repeat: no-repeat;
   background-position: 3px center;
   background-size: 9px 7px;
@@ -468,19 +485,17 @@ html|span.ac-emphasize-text {
 }
 
 .aw-menulist:focus {
   border-color: -moz-mac-focusring;
   box-shadow: 0 0 1.5px 1px -moz-mac-focusring;
 }
 
 .aw-menulist  > .menulist-label-box > .menulist-label {
-  font: icon;
   margin: 1px 1px 0 !important;
-  font-size: 10px;
   text-align: end;
 }
 
 .aw-menulist > .menulist-dropmarker {
   display: none;
 }
 
 /* ::::: compose toolbar sizer ::::: */
--- a/mail/themes/windows/mail/compose/messengercompose.css
+++ b/mail/themes/windows/mail/compose/messengercompose.css
@@ -242,16 +242,33 @@
   }
 }
 
 .addressingWidgetCell:first-child,
 .dummy-row-cell:first-child {
   border-bottom-color: transparent;
 }
 
+.deleteAddress {
+  -moz-box-ordinal-group: 0;
+  cursor: default;
+  margin-inline-end: 0;
+  margin-bottom: 1px;
+  width: 0;
+  height: 18px;
+  transition-property: width, margin-inline-end;
+  transition-duration: 50ms, 50ms;
+  transition-timing-function: ease-in-out, ease-in-out;
+}
+
+.addressingWidgetCell:hover > .aw-menulist:not([open="true"]) + .deleteAddress {
+  margin-inline-end: 3px;
+  width: 18px;
+}
+
 .aw-menulist {
   -moz-appearance: none;
   -moz-box-align: center;
   -moz-box-pack: center;
   color: ButtonText;
 }
 
 .aw-menulist:-moz-focusring:not([open="true"]) > .menulist-label-box {