Bug 700976 - Resurrect quick mode selector above the folder pane. Make it optional and available in the toolbar palette. Most of the css from Paenglab. r=squib, r=Paenglab
authoraceman <acelists@atlas.sk>
Wed, 16 Mar 2016 02:21:00 +0100
changeset 24721 709e8de02a1540e270af41bbb608b321e13f6a06
parent 24720 3a61e85a78fe0e877529568ca9dd5da9e00d57d2
child 24722 9d94f84acb2edb94ec2d934448a0eb3dd4788011
push id1657
push userclokep@gmail.com
push dateMon, 06 Jun 2016 19:50:21 +0000
treeherdercomm-beta@9fac989284b5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssquib, Paenglab
bugs700976
Bug 700976 - Resurrect quick mode selector above the folder pane. Make it optional and available in the toolbar palette. Most of the css from Paenglab. r=squib, r=Paenglab
mail/base/content/folderPane.js
mail/base/content/mailWindowOverlay.xul
mail/base/content/messenger.xul
mail/locales/en-US/chrome/messenger/messenger.dtd
mail/themes/linux/mail/mailWindow1.css
mail/themes/linux/mail/primaryToolbar.css
mail/themes/osx/mail/mailWindow1.css
mail/themes/osx/mail/primaryToolbar.css
mail/themes/windows/mail/mailWindow1.css
mail/themes/windows/mail/primaryToolbar.css
--- a/mail/base/content/folderPane.js
+++ b/mail/base/content/folderPane.js
@@ -142,43 +142,33 @@ var gFolderTreeView = {
       // to migrate
       let modeIndex = Services.prefs.getIntPref("mail.ui.folderpane.view");
       this._mode = this._modeNames[modeIndex];
       Services.prefs.deleteBranch("mail.ui.folderpane");
     } catch(ex) {
       // This is ok.  If we've already migrated we'll end up here
     }
 
-    if (document.getElementById('folderpane-title')) {
-      let string;
-        if (this.mode in this._modeDisplayNames)
-          string = this._modeDisplayNames[this.mode];
-        else {
-          let key = "folderPaneModeHeader_" + this.mode;
-          string = this.messengerBundle.getString(key);
-        }
-      document.getElementById('folderpane-title').value = string;
-    }
-
     if (aJSONFile) {
       // Parse our persistent-open-state json file
       let data = IOUtils.loadFileToString(aJSONFile);
       if (data) {
         try {
           this._persistOpenMap = JSON.parse(data);
         } catch (x) {
           Components.utils.reportError(
             gFolderTreeView.messengerBundle
                            .getFormattedString("failedToReadFile", [aJSONFile, x]));
         }
       }
     }
 
     // Load our data
     this._updateCompactState(this.mode);
+    this._selectModeInSelector(this.mode);
     this._rebuild();
     // And actually draw the tree
     aTree.view = this;
 
     this.toggleCols(true);
     gFolderStatsHelpers.init();
 
     // Add this listener so that we can update the tree when things change
@@ -412,25 +402,17 @@ var gFolderTreeView = {
   set mode(aMode) {
     // Ignore unknown modes.
     if (!(aMode in this._modes))
       return;
 
     this._mode = aMode;
     this._updateCompactState(this._mode);
 
-    // Accept the mode and set up labels.
-    let string;
-    if (this._mode in this._modeDisplayNames)
-      string = this._modeDisplayNames[this._mode];
-    else {
-      let key = "folderPaneModeHeader_" + this._mode;
-      string = gFolderTreeView.messengerBundle.getString(key);
-    }
-    document.getElementById('folderpane-title').value = string;
+    this._selectModeInSelector(this._mode);
 
     // Store current mode and actually build the folder pane.
     this._treeElement.setAttribute("mode", this._mode);
     this._rebuild();
   },
 
   /**
    * Name of the mode without the _compact suffix, used e.g. in the menulists.
@@ -456,16 +438,69 @@ var gFolderTreeView = {
     if (!aMode)
       aMode = this.mode;
     if (aCompact == undefined)
       aCompact = aMode.endsWith("_compact");
 
     return this.baseMode(aMode) + (aCompact ? "_compact" : "");
   },
 
+  _initFolderModeSelector: function() {
+    // Populate the mode selector menulist on the toolbar.
+    let fullModes = [];
+    let compactModes = [];
+    for (let mode of this._modeNames) {
+      let array = mode.endsWith("_compact") ? compactModes : fullModes;
+      array.push(mode);
+    }
+
+    let modeSelector = document.getElementById("folderpane-mode-selector").firstChild;
+    // Can't use modeSelector.removeAllItems() here as it would remove the menupopup too, with its attributes.
+    while (modeSelector.menupopup.hasChildNodes())
+      modeSelector.menupopup.lastChild.remove();
+
+    let currentMode = this.mode;
+    let parent = this;
+
+    function appendMode(aMode) {
+      let name;
+      if (aMode in parent._modeDisplayNames) {
+        name = parent._modeDisplayNames[aMode];
+      } else {
+        let key = "folderPaneModeHeader_" + aMode;
+        name = parent.messengerBundle.getString(key);
+      }
+      let item = modeSelector.appendItem(name, aMode);
+      item.setAttribute("type", "radio");
+      if (aMode == currentMode)
+        item.setAttribute("checked", "true");
+      else
+        item.setAttribute("checked", "false");
+    }
+
+    for (let mode of fullModes)
+      appendMode(mode);
+
+    if ((fullModes.length > 0) && (compactModes.length > 0))
+      modeSelector.menupopup.appendChild(document.createElement("menuseparator"));
+
+    for (let mode of compactModes)
+      appendMode(mode);
+  },
+
+  _selectModeInSelector: function(aMode) {
+    // Show the mode in the mode selector, if it is on a toolbar.
+    let modeSelector = document.getElementById("folderpane-mode-selector");
+    if (modeSelector) {
+      if (!modeSelector.querySelector('[value="' + aMode + '"]'))
+        this._initFolderModeSelector();
+      modeSelector.firstChild.value = aMode;
+    }
+  },
+
   /**
    * Selects a given nsIMsgFolder in the tree.  This function will also ensure
    * that the folder is actually being displayed (that is, that none of its
    * ancestors are collapsed.
    *
    * @param aFolder  the nsIMsgFolder to select
    * @param [aForceSelect] Whether we should switch to the default mode to
    *      select the folder in case we didn't find the folder in the current
--- a/mail/base/content/mailWindowOverlay.xul
+++ b/mail/base/content/mailWindowOverlay.xul
@@ -3339,16 +3339,28 @@
                    class="toolbarbutton-1"
                    label="&stopButton.label;"
                    tooltiptext="&stopButton.tooltip;"
                    command="cmd_stop"/>
     <toolbarbutton id="button-appmenu"
                    class="toolbarbutton-1 button-appmenu"
                    label="&appmenuButton.label;"
                    tooltiptext="&appmenuButton1.tooltip;"/>
+    <toolbaritem id="folderpane-mode-selector"
+                 title="&folderModeSelector.label;"
+                 align="center">
+      <menulist sizetopopup="none"
+                crop="center"
+                flex="1"
+                label="&folderModeSelector.label;"
+                oncommand="gFolderTreeView.mode = this.value;">
+        <menupopup onpopupshowing="gFolderTreeView._initFolderModeSelector();"/>
+      </menulist>
+    </toolbaritem>
+
   </toolbarpalette>
 
   <!-- If changes are made to the default set of toolbar buttons, you may need to rev the id
        of mail-bar in order to force the new default items to show up for users who customized their toolbar
        in earlier versions. Bumping the id means users will have to re-customize their toolbar!
   -->
 
   <toolbar id="mail-bar3"
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -313,29 +313,28 @@
              the folder pane next to the thread view, with the message pane/reader
              beneath both of them. -->
         <box id="mailContent" orient="vertical" flex="1">
           <!-- mail-toolbox is provided by mailWindowOverlay.xul -->
           <toolbox id="mail-toolbox" />
 
           <box id="messengerBox" orient="horizontal" flex="1" minheight="100" height="100" persist="height">
             <vbox id="folderPaneBox" minwidth="125" width="200" persist="width">
-              <label id="folderColumnLabel" hidden="true" value="&folderNameColumn.label;"/>
-              <sidebarheader id="folderPaneHeader" hidden="true" align="center">
-                <label id="folderpane-title" crop="end" flex="1"/>
-                <toolbarbutton id="folderview-cycler-prev"
-                               dir="prev"
-                               class="folderview-cycler"
-                               onclick="gFolderTreeView.cycleMode(false);"/>
-                <toolbarbutton id="folderview-cycler-next"
-                               dir="next"
-                               class="folderview-cycler"
-                               onclick="gFolderTreeView.cycleMode(true);"/>
-              </sidebarheader>
-
+              <sidebarheader id="folderPaneHeader" hidden="true" align="center"/>
+              <toolbar id="folderPane-toolbar"
+                       class="inline-toolbar"
+                       toolboxid="mail-toolbox"
+                       toolbarname="&folderPaneBar.label;"
+                       customizable="true"
+                       align="start"
+                       mode="icons" defaultmode="icons" lockmode="true"
+                       iconsize="small" defaulticonsize="small" lockiconsize="true"
+                       context="toolbar-context-menu"
+                       defaultset="folderpane-mode-selector"
+                       collapsed="true"/>
               <tree id="folderTree" class="plain" flex="1"
                     hidecolumnpicker="true" persist="mode" mode="all"
                     keepcurrentinview="true"
                     context="folderPaneContext"
                     disableKeyNavigation="true"
                     ondragstart="gFolderTreeView._onDragStart(event);"
                     ondragover="gFolderTreeView._onDragOver(event);"
                     ondblclick="gFolderTreeView.onDoubleClick(event);"
--- a/mail/locales/en-US/chrome/messenger/messenger.dtd
+++ b/mail/locales/en-US/chrome/messenger/messenger.dtd
@@ -159,16 +159,18 @@
 <!ENTITY unreadFolders.label "Unread">
 <!ENTITY unreadFolders.accesskey "U">
 <!ENTITY favoriteFolders.label "Favorite">
 <!ENTITY favoriteFolders.accesskey "F">
 <!ENTITY recentFolders.label "Recent">
 <!ENTITY recentFolders.accesskey "R">
 <!ENTITY compactVersion.label "Compact View">
 <!ENTITY compactVersion.accesskey "C">
+<!ENTITY folderPaneBar.label "Folder Pane Toolbar">
+<!ENTITY folderModeSelector.label "Folder Views">
 
 <!-- Sort Menu -->
 <!ENTITY sortMenu.label "Sort by">
 <!ENTITY sortMenu.accesskey "S">
 <!ENTITY sortByDateCmd.label "Date">
 <!ENTITY sortByDateCmd.accesskey "e">
 <!ENTITY sortByReceivedCmd.label "Received">
 <!ENTITY sortByReceivedCmd.accesskey "v">
--- a/mail/themes/linux/mail/mailWindow1.css
+++ b/mail/themes/linux/mail/mailWindow1.css
@@ -220,36 +220,19 @@ treechildren::-moz-tree-image(subjectCol
 
 treechildren::-moz-tree-image(subjectCol, imapdeleted) {
   list-style-image: url("chrome://messenger/skin/icons/message.png");
   -moz-image-region: rect(0 80px 16px 64px);
 }
 
 /* ..... folder pane adjustments ..... */
 
-#folderpane-title {
-  padding-inline-start: 12px;
-  padding-inline-end: 8px;
-}
-
-.folderview-cycler {
-  padding-inline-end: 0 !important;
-}
-
-.folderview-cycler {
-  list-style-image: url("chrome://messenger/skin/icons/arrow/foldercycler-arrow.svg#normal");
-}
-
-.folderview-cycler:-moz-lwtheme-brighttext {
-  list-style-image: url("chrome://messenger/skin/icons/arrow/foldercycler-arrow.svg#inverted");
-}
-
-.folderview-cycler[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon,
-.folderview-cycler[dir="next"]:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  transform: scaleX(-1);
+#folderPane-toolbar {
+  min-height: 24px;
+  border-bottom: 1px solid ThreeDShadow;
 }
 
 /* ..... splitter adjustments ..... */
 
 #folderpane_splitter,
 #threadpane-splitter:not([orient="vertical"]) {
   -moz-appearance: none;
   /* splitter grip area */
--- a/mail/themes/linux/mail/primaryToolbar.css
+++ b/mail/themes/linux/mail/primaryToolbar.css
@@ -236,24 +236,40 @@ toolbar > #button-chat[unreadMessages="t
 .button-appmenu .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
   display: -moz-box;
 }
 
+#folderPane-toolbar #locationFolders,
+#folderPane-toolbar > #folder-location-container,
+#folderPane-toolbar > #folderpane-mode-selector {
+  -moz-box-flex: 1;
+}
+
+#folderPane-toolbar > .toolbarbutton-1,
+#folderPane-toolbar > toolbaritem > menulist {
+  margin: 0;
+}
+
+#folderPane-toolbar > :-moz-any(*) + :-moz-any(*) {
+  margin-inline-start: 2px;
+}
+
 #palette-box #qfb-show-filter-bar {
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.svg#filter") !important;
 }
 
 /* Force the folder location and mail view items to fit in the available width
    in the Customize Toolbar dialog. */
 #palette-box #locationFolders,
 #palette-box #folder-location-container,
+#palette-box #folderpane-mode-selector,
 #palette-box #viewPicker {
   -moz-box-flex: 1;
 }
 
 /* ::::: message notification bar style rules ::::: */
 
 .msgNotificationBar {
   background-color: InfoBackground;
--- a/mail/themes/osx/mail/mailWindow1.css
+++ b/mail/themes/osx/mail/mailWindow1.css
@@ -36,16 +36,26 @@ treechildren::-moz-tree-twisty {
 #tabmail:-moz-lwtheme {
   text-shadow: inherit;
 }
 
 #messengerBox:-moz-lwtheme {
   text-shadow: none;
 }
 
+#folderPane-toolbar {
+  background: linear-gradient(#f3f3f3, #ebebeb);
+  border-bottom: 1px solid #bebebe;
+}
+
+#folderPane-toolbar:-moz-window-inactive {
+  background-color: -moz-mac-chrome-inactive;
+  background-image: none;
+}
+
 #folderTree {
   -moz-appearance: -moz-mac-vibrancy-light;
 }
 
 #folderPaneHeader, #folderTree {
   background-color: #E2E7ED !important;
   border-bottom: 2px solid transparent;
 }
@@ -497,53 +507,16 @@ treechildren::-moz-tree-row(dummy, focus
    header content over the statusbar.
    */
 
 #messagepanebox {
   background-color: #FFFFFF;
   -moz-appearance: none;
 }
 
-/* ..... folder pane adjustments ..... */
-
-#folderpane-title {
-  text-transform: uppercase;
-  color: #555;
-  font-weight: bold;
-  padding: 4px 0;
-}
-
-.folderview-cycler,
-.folderview-cycler .toolbarbutton-icon,
-.folderview-cycler .toolbarbutton-text {
-  padding: 0 !important;
-  margin: 0 !important;
-  border: none !important;
-}
-
-.folderview-cycler[dir="prev"],
-.folderview-cycler[dir="next"]:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://messenger/skin/icons/spin-buttons.png");
-  -moz-image-region: rect(0 15px 16px 0);
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-.folderview-cycler[dir="next"],
-.folderview-cycler[dir="prev"]:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://messenger/skin/icons/spin-buttons.png");
-  -moz-image-region: rect(0 31px 16px 15px);
-  padding: 0 !important;
-  margin: 0 !important;
-  -moz-margin-end: 4px !important;
-}
-
-.folderview-cycler:active {
-  list-style-image: url("chrome://messenger/skin/icons/spin-buttons-active.png") !important;
-}
 /* ..... splitter adjustments ..... */
 
 splitter {
   background-color: transparent;
   width: 7px;
   min-width: 7px;
   min-height: 7px;
 }
--- a/mail/themes/osx/mail/primaryToolbar.css
+++ b/mail/themes/osx/mail/primaryToolbar.css
@@ -435,24 +435,40 @@ toolbar:not([mode="text"]) .badgeButton-
 .button-appmenu .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
   display: -moz-box;
 }
 
+#folderPane-toolbar #locationFolders,
+#folderPane-toolbar > #folder-location-container,
+#folderPane-toolbar > #folderpane-mode-selector {
+  -moz-box-flex: 1;
+}
+
+#folderPane-toolbar > .toolbarbutton-1,
+#folderPane-toolbar > toolbaritem > menulist {
+  margin: 0;
+}
+
+#folderPane-toolbar > :-moz-any(*) + :-moz-any(*) {
+  margin-inline-start: 2px;
+}
+
 #palette-box #qfb-show-filter-bar {
   list-style-image: url("chrome://messenger/skin/icons/mail-toolbar.svg#filter");
 }
 
 /* Force the folder location and mail view items to fit in the available width
    in the Customize Toolbar dialog. */
 #palette-box #locationFolders,
 #palette-box #folder-location-container,
+#palette-box #folderpane-mode-selector,
 #palette-box #viewPicker {
   -moz-box-flex: 1;
 }
 
 .msgNotificationBarText {
   font: icon;
   font-weight: bold;
   padding: 0;
--- a/mail/themes/windows/mail/mailWindow1.css
+++ b/mail/themes/windows/mail/mailWindow1.css
@@ -61,16 +61,21 @@
   background-color: -moz-Field;
   color: -moz-FieldText;
 }
 
 #messengerBox {
   background-color: -moz-Dialog;
 }
 
+#folderPane-toolbar {
+  border-bottom-width: 1px !important;
+  border-bottom-color: ThreeDShadow;
+}
+
 /* ::::: thread decoration ::::: */
 
 treechildren::-moz-tree-row(dummy)  {
   background-color: var(--row-grouped-header-bg-color);
   -moz-padding-start: 2px;
   margin-bottom: 1px;
 }
 
@@ -288,42 +293,16 @@ treechildren::-moz-tree-image(subjectCol
 
 /* IMPORTANT: make sure the imap-deleted column always comes after the replied/forwarded style rules.
    This ensures that we show that the message is marked as deleted over status information. */
 
 treechildren::-moz-tree-image(subjectCol, imapdeleted) {
   -moz-image-region: rect(0 80px 16px 64px);
 }
 
-/* ..... folder pane adjustments ..... */
-
-#folderpane-title {
-  padding-inline-start: 12px;
-  padding-inline-end: 8px;
-}
-
-@media (-moz-os-version: windows-xp) {
-  .folderview-cycler {
-    padding-inline-end: 0;
-  }
-}
-
-.folderview-cycler {
-  list-style-image: url("chrome://messenger/skin/icons/arrow/foldercycler-arrow.svg#normal");
-}
-
-.folderview-cycler:-moz-lwtheme-brighttext {
-  list-style-image: url("chrome://messenger/skin/icons/arrow/foldercycler-arrow.svg#inverted");
-}
-
-.folderview-cycler[dir="prev"]:-moz-locale-dir(ltr) > .toolbarbutton-icon,
-.folderview-cycler[dir="next"]:-moz-locale-dir(rtl) > .toolbarbutton-icon {
-  transform: scaleX(-1);
-}
-
 /* ..... splitter adjustments ..... */
 
 #mailContent[layout="standard"] #threadpane-splitter {
   /* Overlap the folder pane splitter to make the splitters appear unified. */
   -moz-margin-start: -1px;
 }
 
 #mailContent[layout="standard"] #folderpane_splitter:-moz-locale-dir(rtl) {
@@ -755,16 +734,20 @@ treechildren::-moz-tree-image(subjectCol
   .threadColumnHeader {
     -moz-padding-end: 2px;
   }
 
   treechildren::-moz-tree-image(news, threadCol, watch) {
     -moz-margin-start: -2px;
   }
 
+  #folderPane-toolbar {
+    border-top-style: none;
+  }
+
   #folderpane_splitter,
   #threadpane-splitter:not([orient="vertical"]) {
     border: none;
     min-width: 0;
     width: 5px;
     background-color: transparent;
     margin-top: 0;
     position: relative;
@@ -972,17 +955,18 @@ treechildren::-moz-tree-image(subjectCol
     border-radius: 2px;
   }
 
   menulist[open="true"] {
     text-shadow: none;
     transition: none;
   }
 
-  #status-bar {
+  #status-bar,
+  #folderPane-toolbar {
     background-color: hsl(210, 75%, 92%);
   }
 }
 
 /* Render a window top border for lwthemes on WinXP modern themes: */
 @media (-moz-windows-theme: luna-blue) {
   #messengerWindow[tabsintitlebar][sizemode="normal"]
   #titlebar-content:-moz-lwtheme {
@@ -1062,16 +1046,23 @@ treechildren::-moz-tree-image(subjectCol
       border: 1px solid rgba(10%, 10%, 10%, .4);
       border-top-color: threedshadow;
       border-radius: 1px 1px 0 0;
       background-clip: padding-box;
     }
   }
 }
 
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-win8),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
+  #folderPane-toolbar {
+    border-bottom-color: #c2c2c2;
+  }
+}
+
 @media (-moz-windows-glass) {
   /* lesser transparency on Glass background */
   #tabbar-toolbar menulist:not(:-moz-lwtheme):not([open="true"]) {
     background-color: rgba(227, 237, 246, .7);
   }
 
   /* lesser transparency on Glass background */
   #tabbar-toolbar menulist:not(:-moz-lwtheme):not([open="true"]):hover {
@@ -1081,16 +1072,20 @@ treechildren::-moz-tree-image(subjectCol
   #tabbar-toolbar #viewPickerLabel:not(:-moz-lwtheme):not(:-moz-window-inactive) {
     -moz-margin-start: 4px;
     -moz-margin-end: 0;
     -moz-padding-start: 2px;
     -moz-padding-end: 5px;
     background-color: rgba(255, 255, 255, .3);
     border-radius: 4px;
   }
+
+  #folderPane-toolbar {
+    border-bottom-color: #aabccf;
+  }
 }
 
 #viewPicker > .menulist-label-box > .menulist-icon,
 #locationFolders > .menulist-label-box > .menulist-icon {
   min-height: 16px;
 }
 
 #viewPickerPopup > menuitem[type="radio"] {
--- a/mail/themes/windows/mail/primaryToolbar.css
+++ b/mail/themes/windows/mail/primaryToolbar.css
@@ -168,20 +168,36 @@ menu:not(:-moz-lwtheme):-moz-window-inac
 .button-appmenu .toolbarbutton-menu-dropmarker {
   display: none;
 }
 
 toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
   display: -moz-box;
 }
 
+#folderPane-toolbar #locationFolders,
+#folderPane-toolbar > #folder-location-container,
+#folderPane-toolbar > #folderpane-mode-selector {
+  -moz-box-flex: 1;
+}
+
+#folderPane-toolbar > .toolbarbutton-1,
+#folderPane-toolbar > toolbaritem > menulist {
+  margin: 0;
+}
+
+#folderPane-toolbar > :-moz-any(*) + :-moz-any(*) {
+  margin-inline-start: 2px;
+}
+
 /* Force the folder location and mail view items to fit in the available width
    in the Customize Toolbar dialog. */
 #palette-box #locationFolders,
 #palette-box #folder-location-container,
+#palette-box #folderpane-mode-selector,
 #palette-box #viewPicker {
   -moz-box-flex: 1;
 }
 
 /* ::::: message notification bar style rules ::::: */
 
 .msgNotificationBar {
   background-color: InfoBackground;