Bug 1730334 - Drop the view and orient attributes for attachment-lists. r=aleca
authorHenry Wilkes <henry@thunderbird.net>
Wed, 20 Oct 2021 13:30:06 +0300
changeset 34090 a9015ae2a270f6144e6ee59616a2906e66e2a546
parent 34089 77b674564bae0ef9ba81c3fb75c6453d4fa48449
child 34091 37d5cbe97cc749d2ae9ba1909e70468c7244eb0f
push id19287
push usermkmelin@iki.fi
push dateWed, 20 Oct 2021 10:41:42 +0000
treeherdercomm-central@1a3eaca4918a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca
bugs1730334
Bug 1730334 - Drop the view and orient attributes for attachment-lists. r=aleca Differential Revision: https://phabricator.services.mozilla.com/D127285
mail/app/profile/all-thunderbird.js
mail/base/content/msgAttachmentView.inc.xhtml
mail/base/content/msgHdrView.js
mail/base/content/widgets/mailWidgets.js
mail/components/compose/content/MsgComposeCommands.js
mail/components/compose/content/messengercompose.xhtml
mail/themes/shared/mail/attachmentList.css
mail/themes/windows/mail/attachmentList.css
--- a/mail/app/profile/all-thunderbird.js
+++ b/mail/app/profile/all-thunderbird.js
@@ -283,17 +283,16 @@ pref("mail.ui-rdf.version", 0);
 
 /////////////////////////////////////////////////////////////////
 // Overrides of the core mailnews.js and composer.js prefs
 /////////////////////////////////////////////////////////////////
 pref("mail.showCondensedAddresses", true); // show the friendly display name for people I know
 
 pref("mailnews.attachments.display.start_expanded", false);
 // hidden pref for changing how we present attachments in the message pane
-pref("mailnews.attachments.display.view", 0);
 pref("mail.pane_config.dynamic",            0);
 pref("mailnews.reuse_thread_window2",     true);
 pref("editor.singleLine.pasteNewlines", 4);  // substitute commas for new lines in single line text boxes
 pref("editor.CR_creates_new_p", true);
 pref("mail.compose.default_to_paragraph", true);
 
 // hidden pref to ensure a certain number of headers in the message pane
 // to avoid the height of the header area from changing when headers are present / not present
--- a/mail/base/content/msgAttachmentView.inc.xhtml
+++ b/mail/base/content/msgAttachmentView.inc.xhtml
@@ -94,16 +94,15 @@
                                   </toolbarbutton>
                                 </toolbaritem>
                               </hbox>
                             </vbox>
                           </hbox>
                           <hbox class="attachments-container">
                             <richlistbox is="attachment-list" id="attachmentList"
                                          class="attachmentList"
-                                         orient="horizontal"
                                          seltype="multiple"
                                          context="attachmentListContext"
                                          itemcontext="attachmentItemContext"
                                          role="listbox"
                                          flex="1"
                                          ondragstart="attachmentListDNDObserver.onDragStart(event);"/>
                           </hbox>
--- a/mail/base/content/msgHdrView.js
+++ b/mail/base/content/msgHdrView.js
@@ -2506,21 +2506,16 @@ async function displayAttachmentsForExpa
   if (numAttachments <= 0) {
     attachmentView.collapsed = true;
     attachmentSplitter.collapsed = true;
   } else if (!gBuildAttachmentsForCurrentMsg) {
     attachmentView.collapsed = false;
 
     var attachmentList = document.getElementById("attachmentList");
 
-    var viewMode = Services.prefs.getIntPref(
-      "mailnews.attachments.display.view"
-    );
-    var views = ["small", "large", "tile"];
-    attachmentList.view = views[viewMode];
     attachmentList.controllers.appendController(AttachmentListController);
 
     toggleAttachmentList(false);
 
     for (let attachment of currentAttachments) {
       // Create a new attachment widget
       var displayName = SanitizeAttachmentDisplayName(attachment);
       var item = attachmentList.appendItem(attachment, displayName);
--- a/mail/base/content/widgets/mailWidgets.js
+++ b/mail/base/content/widgets/mailWidgets.js
@@ -1333,17 +1333,16 @@
   customElements.define(
     "mail-multi-emailheaderfield",
     MozMailMultiEmailheaderfield
   );
 
   /**
    * The MozAttachmentlist widget lists attachments for a mail. This is typically used to show
    * attachments while writing a new mail as well as when reading mails.
-   * It has two layouts, which you can set by orient="horizontal" and orient="vertical" respectively.
    *
    * @extends {MozElements.RichListBox}
    */
   class MozAttachmentlist extends MozElements.RichListBox {
     constructor() {
       super();
 
       this.messenger = Cc["@mozilla.org/messenger;1"].createInstance(
@@ -1404,53 +1403,16 @@
         if (event.button != 0) {
           return;
         }
 
         if (document.commandDispatcher.focusedElement != this) {
           this.focus();
         }
       });
-
-      if (this.getAttribute("orient") === "horizontal") {
-        this.addEventListener("keypress", event => {
-          switch (event.keyCode) {
-            case KeyEvent.DOM_VK_LEFT:
-              this.moveByOffset(-1, !event.ctrlKey, event.shiftKey);
-              event.preventDefault();
-              break;
-
-            case KeyEvent.DOM_VK_RIGHT:
-              this.moveByOffset(1, !event.ctrlKey, event.shiftKey);
-              event.preventDefault();
-              break;
-
-            case KeyEvent.DOM_VK_DOWN:
-              this.moveByOffset(
-                this._itemsPerRow(),
-                !event.ctrlKey,
-                event.shiftKey
-              );
-              event.preventDefault();
-              break;
-
-            case KeyEvent.DOM_VK_UP:
-              this.moveByOffset(
-                -this._itemsPerRow(),
-                !event.ctrlKey,
-                event.shiftKey
-              );
-              event.preventDefault();
-              break;
-
-            default:
-              break;
-          }
-        });
-      }
     }
 
     connectedCallback() {
       super.connectedCallback();
       if (this.delayConnectedCallback()) {
         return;
       }
 
@@ -1462,37 +1424,16 @@
 
       children
         .filter(child => !child.hasAttribute("context"))
         .forEach(child =>
           child.setAttribute("context", this.getAttribute("itemcontext"))
         );
     }
 
-    set view(val) {
-      this.setAttribute("view", val);
-    }
-
-    get view() {
-      return this.getAttribute("view");
-    }
-
-    set orient(val) {
-      // The current item can get messed up when changing orientation.
-      let curr = this.currentItem;
-      this.currentItem = null;
-
-      this.setAttribute("orient", val);
-      this.currentItem = curr;
-    }
-
-    get orient() {
-      return this.getAttribute("orient");
-    }
-
     get itemCount() {
       return this._childNodes.length;
     }
 
     /**
      * Get the preferred height (the height that would allow us to fit
      * everything without scrollbars) of the attachmentlist's bounding
      * rectangle. Add 3px to account for item's margin.
@@ -1815,21 +1756,16 @@
       if (!this._suppressOnSelect && !this.suppressOnSelect) {
         this.dispatchEvent(
           new Event("select", { bubbles: false, cancelable: true })
         );
       }
     }
 
     _itemsPerRow() {
-      if (this.getAttribute("orient") === "vertical") {
-        // Vertical attachment lists have one item per row by definition.
-        return 1;
-      }
-
       // For 0 or 1 children, we can assume that they all fit in one row.
       if (this._childNodes.length < 2) {
         return this._childNodes.length;
       }
 
       let itemWidth =
         this._childNodes[1].getBoundingClientRect().x -
         this._childNodes[0].getBoundingClientRect().x;
--- a/mail/components/compose/content/MsgComposeCommands.js
+++ b/mail/components/compose/content/MsgComposeCommands.js
@@ -4060,19 +4060,16 @@ function ComposeLoad() {
   );
 
   AddMessageComposeOfflineQuitObserver();
 
   BondOpenPGP.init();
 
   // Setup the attachment bucket.
   gAttachmentBucket = document.getElementById("attachmentBucket");
-  let viewMode = Services.prefs.getIntPref("mailnews.attachments.display.view");
-  let views = ["small", "large", "tile"];
-  gAttachmentBucket.view = views[viewMode];
 
   let attachmentArea = document.getElementById("attachmentArea");
   attachmentArea.addEventListener("toggle", attachmentAreaOnToggle);
   // Set up an observer to listen to the height change from the
   // #attachmentbucket-sizer xul:splitter.
   // Cached height difference. Note, we do not set its value now because the
   // attachment pane is hidden.
   let attachmentAreaHeightDiff;
--- a/mail/components/compose/content/messengercompose.xhtml
+++ b/mail/components/compose/content/messengercompose.xhtml
@@ -2537,17 +2537,16 @@
                     alt="" />
           <html:span id="attachmentBucketCount"></html:span>
           <html:span id="attachmentBucketSize" role="note"></html:span>
         </html:summary>
 
         <richlistbox is="attachment-list" id="attachmentBucket"
                      aria-describedby="attachmentBucketCount"
                      class="attachmentList"
-                     orient="horizontal"
                      disableonsend="true"
                      seltype="multiple"
                      flex="1"
                      role="listbox"
                      context="msgComposeAttachmentListContext"
                      itemcontext="msgComposeAttachmentItemContext"
                      onclick="attachmentBucketOnClick(event);"
                      onkeypress="attachmentBucketOnKeyPress(event);"
--- a/mail/themes/shared/mail/attachmentList.css
+++ b/mail/themes/shared/mail/attachmentList.css
@@ -8,34 +8,35 @@
   overflow: hidden;
 }
 
 .attachmentList {
   appearance: none;
   -moz-user-focus: normal;
   margin: 0;
   padding: 3px;
-}
-
-.attachmentList[orient="horizontal"] {
   display: flex;
   overflow-x: hidden;
   flex-wrap: wrap;
   align-items: start;
   align-content: start;
   flex: 1;
 }
 
 .attachmentList[collapsed] {
   display: none;
   height: 0;
 }
 
 .attachmentItem {
   border: 1px solid transparent;
+  display: -moz-inline-box;
+  min-width: 10em;
+  padding: 1px 3px;
+  border-radius: 2px;
 }
 
 .attachmentList[seltype="multiple"]:focus .attachmentItem[current="true"] {
   border-color: SelectedItem;
   outline: none;
 }
 
 /* Hide the drop indicator for the message pane attachment list. */
@@ -67,47 +68,16 @@
 .attachmentcell-content {
   -moz-box-orient: horizontal;
 }
 
 .attachmentcell-text {
   -moz-box-orient: horizontal;
 }
 
-.attachmentList[view="large"] .attachmentcell-content {
-  -moz-box-orient: horizontal;
-}
-
-.attachmentList[view="large"] .attachmentcell-text {
-  -moz-box-align: start;
-  -moz-box-orient: vertical;
-}
-
-.attachmentList[view="tile"] .attachmentcell-content {
-  -moz-box-align: center;
-  -moz-box-orient: vertical;
-}
-
-.attachmentList[view="tile"] .attachmentcell-text {
-  -moz-box-align: center;
-  -moz-box-orient: vertical;
-}
-
-.attachmentList[orient="horizontal"] .attachmentItem {
-  display: -moz-inline-box;
-  min-width: 10em;
-  padding: 1px 3px;
-  border-radius: 2px;
-}
-
-.attachmentList[orient="horizontal"][view="tile"] .attachmentItem {
-  min-width: 5em;
-  max-width: 10em;
-}
-
 :root[lwt-tree] .attachmentList {
   background-color: var(--sidebar-background-color);
   color: var(--sidebar-text-color);
 }
 
 :root[lwt-tree] .attachmentList {
   scrollbar-color: rgba(204, 204, 204, .5) rgba(230, 230, 235, .5);
 }
--- a/mail/themes/windows/mail/attachmentList.css
+++ b/mail/themes/windows/mail/attachmentList.css
@@ -7,33 +7,25 @@
 /* styles for the attachment list */
 
 @media (-moz-windows-default-theme) {
   .attachmentItem {
     background-color: transparent;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     padding: 1px;
+    margin-top: 1px;
+    margin-inline-start: 1px;
   }
 
   .attachmentList:focus .attachmentItem[selected="true"],
   #attachmentList:focus > .attachmentItem[selected="true"] {
     color: FieldText;
   }
 
-  .attachmentlist[orient="horizontal"] {
-    margin-inline-end: 1px;
-    margin-bottom: 1px;
-  }
-
-  .attachmentList[orient="horizontal"] .attachmentItem {
-    margin-top: 1px;
-    margin-inline-start: 1px;
-  }
-
   .attachmentcell-name, .attachmentcell-size {
     margin: 0 4px;
   }
 
   @media (-moz-os-version: windows-win7) {
     .attachmentItem {
       border-radius: 3px;
     }
@@ -73,22 +65,16 @@
                                         rgba(131, 183, 249, 0.5));
     }
 
     .attachmentItem:hover {
       border-color: rgb(184, 214, 251);
       background-image: linear-gradient(rgba(131, 183, 249, 0.05),
                                         rgba(131, 183, 249, 0.16));
     }
-
-    #attachmentBucket[orient="vertical"]:focus >
-      .attachmentItem:is([current="true"],[selected="true"]) +
-      .attachmentItem:is([current="true"],[selected="true"]) {
-      border-top-color: rgba(131, 183, 249, 0.375);
-    }
   }
 
   @media not all and (-moz-os-version: windows-win7) {
     .attachmentItem[selected="true"] {
       border-color: rgb(217, 217, 217);
       background-color: rgb(217, 217, 217);
     }
 
@@ -97,35 +83,24 @@
       background-color: rgb(229, 243, 255);
     }
 
     .attachmentList:focus .attachmentItem[selected="true"] {
       border-color: rgb(142, 186, 235);
       background-color: rgb(205, 232, 255);
     }
 
-    #attachmentBucket[orient="vertical"]:focus
-      .attachmentItem[selected="true"]:not([current="true"],:hover) {
-      border-inline-color: transparent;
-    }
-
     .attachmentList:focus .attachmentItem[current="true"] {
       border-color: rgb(125, 162, 206);
     }
 
     .attachmentList:focus .attachmentItem[current="true"]:hover,
     .attachmentList:focus .attachmentItem[selected="true"]:hover,
     .attachmentList:focus .attachmentItem[selected="true"][current="true"] {
       border-color: rgb(125, 162, 206);
     }
 
     .attachmentItem:hover {
       border-color: rgb(229, 243, 255);
       background-color: rgb(229, 243, 255);
     }
-
-    #attachmentBucket[orient="vertical"]:focus >
-      .attachmentItem:is([current="true"],[selected="true"]) +
-      .attachmentItem:is([current="true"],[selected="true"]) {
-      border-top-color: transparent;
-    }
   }
 }