Bug 1475817 - Part 11: Convert simple <listbox> to <richlistbox> in mailnews/import. r=Paenglab,jorgk
authorGeoff Lankow <geoff@darktrojan.net>
Wed, 18 Jul 2018 20:59:35 +1200
changeset 24298 a7d0257d9621817b6e6fc3094ebeec93097bc44d
parent 24297 51798cb0d0629876f933ba4575ae5f2cc02ebe78
child 24299 64a4fe7e9949e39e4cdc6fe740244bb8b4e1eb8c
push id14635
push usermozilla@jorgk.com
push dateWed, 18 Jul 2018 22:43:27 +0000
treeherdercomm-central@a7d0257d9621 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersPaenglab, jorgk
bugs1475817
Bug 1475817 - Part 11: Convert simple <listbox> to <richlistbox> in mailnews/import. r=Paenglab,jorgk
mailnews/import/content/fieldMapImport.css
mailnews/import/content/fieldMapImport.js
mailnews/import/content/fieldMapImport.xul
mailnews/jar.mn
new file mode 100644
--- /dev/null
+++ b/mailnews/import/content/fieldMapImport.css
@@ -0,0 +1,7 @@
+treecolpicker {
+  display: none;
+}
+
+richlistitem > hbox > checkbox {
+  margin: 0;
+}
--- a/mailnews/import/content/fieldMapImport.js
+++ b/mailnews/import/content/fieldMapImport.js
@@ -74,32 +74,37 @@ function ListFields() {
   for (i = 0; i < count; i++) {
     if (!IndexInMap( i))
       AddFieldToList(top.fieldMap.GetFieldDescription( i), i, false);
   }
 }
 
 function CreateField(name, index, on)
 {
-  var item = document.createElement("listitem");
+  var item = document.createElement("richlistitem");
+  item.setAttribute("align", "center");
   item.setAttribute("field-index", index);
   item.setAttribute("allowevents", "true");
 
-  var checkboxCell = document.createElement("listcell");
-  checkboxCell.setAttribute("type", "checkbox");
-  checkboxCell.addEventListener("click", cellClicked);
-  if (on)
-    checkboxCell.setAttribute("checked", "true");
+  var checkboxCell = document.createElement("hbox");
+  checkboxCell.setAttribute("style", "width: var(--column1width)");
+  let checkbox = document.createElement("checkbox");
+  checkbox.addEventListener("click", cellClicked);
+  if (on) {
+    checkbox.setAttribute("checked", "true");
+  }
+  checkboxCell.appendChild(checkbox);
 
-  var firstCell = document.createElement("listcell");
-  firstCell.setAttribute("label", name);
+  var firstCell = document.createElement("label");
+  firstCell.setAttribute("style", "width: var(--column2width)");
+  firstCell.setAttribute("value", name);
 
-  var secondCell = document.createElement("listcell");
+  var secondCell = document.createElement("label");
   secondCell.setAttribute("class", "importsampledata");
-  secondCell.setAttribute("label", "");
+  secondCell.setAttribute("flex", "1");
 
   item.appendChild(checkboxCell);
   item.appendChild(firstCell);
   item.appendChild(secondCell);
   return item;
 }
 
 function AddFieldToList(name, index, on)
@@ -119,19 +124,19 @@ function cellClicked(event)
 // The "Move Up/Move Down" buttons should move the items in the left column
 // up/down but the values in the right column should not change.
 function moveItem(up)
 {
   var selectedItem = gListbox.selectedItem;
   var swapPartner = (up ? gListbox.getPreviousItem(selectedItem, 1)
                         : gListbox.getNextItem(selectedItem, 1));
 
-  var tmpLabel = swapPartner.lastChild.getAttribute('label');
-  swapPartner.lastChild.setAttribute('label', selectedItem.lastChild.getAttribute('label'));
-  selectedItem.lastChild.setAttribute('label', tmpLabel);
+  var tmpLabel = swapPartner.lastChild.getAttribute("value");
+  swapPartner.lastChild.setAttribute("value", selectedItem.lastChild.getAttribute("value"));
+  selectedItem.lastChild.setAttribute("value", tmpLabel);
 
   var newItemPosition = (up ? selectedItem.nextSibling : selectedItem);
   gListbox.insertBefore(swapPartner, newItemPosition);
   gListbox.ensureElementIsVisible(selectedItem);
   disableMoveButtons();
 }
 
 function disableMoveButtons()
@@ -140,17 +145,17 @@ function disableMoveButtons()
   gMoveUpButton.disabled = (selectedIndex == 0);
   gMoveDownButton.disabled = (selectedIndex == (gListbox.getRowCount() - 1));
 }
 
 function ShowSampleData(data)
 {
   var fields = data.split("\n");
   for (var i = 0; i < gListbox.getRowCount(); i++)
-    gListbox.getItemAtIndex(i).lastChild.setAttribute('label', (i < fields.length) ? fields[i] : '');
+    gListbox.getItemAtIndex(i).lastChild.setAttribute("value", (i < fields.length) ? fields[i] : "");
 }
 
 function FetchSampleData(num)
 {
   if (!top.addInterface)
     return false;
 
   var data = top.addInterface.GetData( "sampleData-" + num);
--- a/mailnews/import/content/fieldMapImport.xul
+++ b/mailnews/import/content/fieldMapImport.xul
@@ -2,27 +2,39 @@
 <!-- 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/. -->
 #ifdef MOZ_THUNDERBIRD
 <?xml-stylesheet href="chrome://messenger/skin/" type="text/css"?>
 #else
 <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>
 #endif
+<?xml-stylesheet href="chrome://messenger/skin/dialogs.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/content/fieldMapImport.css" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://messenger/locale/fieldMapImport.dtd">
 
 <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         buttons="accept,cancel"
         title="&fieldMapImport.title;"
         style="&fieldMapImport.size;"
         ondialogaccept="FieldImportOKButton();"
         onload="OnLoadFieldMapImport();">
 
   <script type="application/javascript" src="chrome://messenger/content/fieldMapImport.js"/>
+  <script><![CDATA[
+      function resizeColumns() {
+        let list = document.getElementById("fieldList");
+        let cols = list.getElementsByTagName("treecol");
+        list.style.setProperty("--column1width", cols[0].boxObject.width + "px");
+        list.style.setProperty("--column2width", cols[1].boxObject.width + "px");
+      }
+      addEventListener("load", resizeColumns, { once: true });
+      addEventListener("resize", resizeColumns);
+  ]]></script>
 
   <hbox align="center">
     <label value="&fieldMapImport.recordNumber;"/>
     <label id="recordNumber"/>
     <spacer flex="1"/>
     <button id="previous" oncommand="Browse(-1);"
             label="&fieldMapImport.previous.label;"
             accesskey="&fieldMapImport.previous.accesskey;"/>
@@ -38,29 +50,26 @@
   </hbox>
 
   <separator class="thin"/>
   <label control="fieldList">&fieldMapImport.text;</label>
   <separator class="thin"/>
 
   <!-- field list -->
   <hbox flex="1">
-    <listbox id="fieldList" flex="1" onselect="disableMoveButtons();">
-      <listcols>
-        <listcol flex="1"/>
-        <listcol flex="7"/>
-        <listcol flex="13"/>
-      </listcols>
-
-      <listhead>
-        <listheader/>
-        <listheader id="fieldNameHeader" label="&fieldMapImport.fieldListTitle;"/>
-        <listheader id="sampleDataHeader" label="&fieldMapImport.dataTitle;"/>
-      </listhead>
-    </listbox>
+    <richlistbox id="fieldList"
+                 class="theme-listbox"
+                 flex="1"
+                 onselect="disableMoveButtons();">
+      <treecols>
+        <treecol flex="3"/>
+        <treecol flex="7" id="fieldNameHeader" label="&fieldMapImport.fieldListTitle;"/>
+        <treecol flex="13" id="sampleDataHeader" label="&fieldMapImport.dataTitle;"/>
+      </treecols>
+    </richlistbox>
 
     <vbox>
       <spacer flex="1"/>
       <button id="upButton" class="up" label="&fieldMapImport.up.label;"
               accesskey="&fieldMapImport.up.accesskey;"
               oncommand="moveItem(true);"/>
       <button id="downButton" class="down" label="&fieldMapImport.down.label;"
               accesskey="&fieldMapImport.down.accesskey;"
--- a/mailnews/jar.mn
+++ b/mailnews/jar.mn
@@ -114,16 +114,17 @@ messenger.jar:
     content/messenger/messengercompose/sendProgress.xul                        (compose/content/sendProgress.xul)
     content/messenger/messengercompose/sendProgress.js                         (compose/content/sendProgress.js)
 #ifndef MOZ_THUNDERBIRD
     content/messenger/messengercompose/menulistCompactBindings.xml             (compose/content/menulistCompactBindings.xml)
 #endif
     content/messenger/importDialog.js                                          (import/content/importDialog.js)
 *   content/messenger/importDialog.xul                                         (import/content/importDialog.xul)
 *   content/messenger/fieldMapImport.xul                                       (import/content/fieldMapImport.xul)
+    content/messenger/fieldMapImport.css                                       (import/content/fieldMapImport.css)
     content/messenger/fieldMapImport.js                                        (import/content/fieldMapImport.js)
     content/messenger/downloadheaders.js                                       (news/content/downloadheaders.js)
     content/messenger/downloadheaders.xul                                      (news/content/downloadheaders.xul)
     content/messenger/markByDate.js                                            (base/content/markByDate.js)
     content/messenger/markByDate.xul                                           (base/content/markByDate.xul)
     content/messenger/dateFormat.js                                            (base/content/dateFormat.js)
     content/messenger/shutdownWindow.xul                                       (base/content/shutdownWindow.xul)
     content/messenger/shutdownWindow.js                                        (base/content/shutdownWindow.js)