Bug 1472750 - Convert simple "listbox" instances to "richlistbox". r=bgrins
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 09 Jul 2018 10:38:42 +0100
changeset 816217 0b45728b721042df9def2c5291e46b59cc6d248a
parent 816216 a34a6f54da753e87e778e477f2760753ebf519b6
child 816218 bd281782dc93474944f6a9375312e7e3a31cd061
push id115778
push userbmo:mstriemer@mozilla.com
push dateTue, 10 Jul 2018 18:49:28 +0000
reviewersbgrins
bugs1472750
milestone63.0a1
Bug 1472750 - Convert simple "listbox" instances to "richlistbox". r=bgrins These simple lists are converted to normal layout by setting a fixed height that isn't a multiple of the row height, which is already the case for most other lists in the user interface. MozReview-Commit-ID: 1tV4MIoRp0d
browser/components/preferences/siteDataRemoveSelected.js
browser/components/preferences/siteDataRemoveSelected.xul
toolkit/components/prompts/content/selectDialog.xul
toolkit/profile/content/profileSelection.xul
toolkit/themes/linux/global/jar.mn
toolkit/themes/linux/global/richlistbox.css
toolkit/themes/osx/global/richlistbox.css
toolkit/themes/shared/non-mac.jar.inc.mn
toolkit/themes/windows/global/jar.mn
toolkit/themes/windows/global/richlistbox.css
--- a/browser/components/preferences/siteDataRemoveSelected.js
+++ b/browser/components/preferences/siteDataRemoveSelected.js
@@ -8,18 +8,20 @@
 let gSiteDataRemoveSelected = {
 
   init() {
     let hosts = window.arguments[0].hosts;
     hosts.sort();
     let list = document.getElementById("removalList");
     let fragment = document.createDocumentFragment();
     for (let host of hosts) {
-      let listItem = document.createElement("listitem");
-      listItem.setAttribute("label", host);
+      let listItem = document.createElement("richlistitem");
+      let label = document.createElement("label");
+      label.setAttribute("value", host);
+      listItem.appendChild(label);
       fragment.appendChild(listItem);
     }
     list.appendChild(fragment);
   },
 
   ondialogaccept() {
     window.arguments[0].allowed = true;
   },
--- a/browser/components/preferences/siteDataRemoveSelected.xul
+++ b/browser/components/preferences/siteDataRemoveSelected.xul
@@ -18,36 +18,34 @@
         ondialogcancel="gSiteDataRemoveSelected.ondialogcancel(); return true;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <link rel="localization" href="browser/preferences/siteDataSettings.ftl"/>
   <script type="application/javascript" src="chrome://global/content/l10n.js"></script>
 
   <script src="chrome://browser/content/preferences/siteDataRemoveSelected.js"/>
 
-  <vbox id="contentContainer">
-    <hbox flex="1">
+  <vbox id="contentContainer" flex="1">
+    <hbox>
       <vbox>
         <image class="question-icon"/>
       </vbox>
       <vbox flex="1">
         <!-- Only show this label on OS X because of no dialog title -->
         <label id="removing-label"
                data-l10n-id="site-data-removing-header"
 #ifndef XP_MACOSX
                hidden="true"
 #endif
         />
         <separator class="thin"/>
         <description id="removing-description" data-l10n-id="site-data-removing-desc"/>
       </vbox>
     </hbox>
 
-    <separator />
+    <separator/>
 
-    <vbox flex="1">
-      <label data-l10n-id="site-data-removing-table"/>
-      <separator class="thin"/>
-      <listbox id="removalList"/>
-    </vbox>
+    <label data-l10n-id="site-data-removing-table"/>
+    <separator class="thin"/>
+    <richlistbox id="removalList" class="theme-listbox" flex="1"/>
   </vbox>
 
 </dialog>
--- a/toolkit/components/prompts/content/selectDialog.xul
+++ b/toolkit/components/prompts/content/selectDialog.xul
@@ -11,12 +11,12 @@
       onload="dialogOnLoad()"
       ondialogaccept="return dialogOK();">
 
   <script type="application/javascript" src="chrome://global/content/selectDialog.js" />
   <keyset id="dialogKeys"/>
   <vbox style="width: 24em;margin: 5px;">
     <label id="info.txt"/>
     <vbox>
-      <listbox id="list" rows="4" flex="1"/>
+      <richlistbox id="list" class="theme-listbox" height="80"/>
     </vbox>
   </vbox>
 </dialog>
--- a/toolkit/profile/content/profileSelection.xul
+++ b/toolkit/profile/content/profileSelection.xul
@@ -52,20 +52,20 @@
               accesskey="&renameButton.accesskey;" oncommand="RenameProfile();"/>
       <button id="delbutton" label="&deleteButton.label;"
               accesskey="&deleteButton.accesskey;" oncommand="ConfirmDelete();"/>
     </vbox>
 
     <separator flex="1"/>
 
     <vbox flex="1">
-      <listbox id="profiles" rows="5" seltype="single"
-               ondblclick="onProfilesDblClick(event)"
-               onkeypress="onProfilesKey(event);">
-      </listbox>
+      <richlistbox id="profiles" class="theme-listbox" height="100" seltype="single"
+                   ondblclick="onProfilesDblClick(event)"
+                   onkeypress="onProfilesKey(event);">
+      </richlistbox>
 
       <!-- Bug 257777 -->
       <checkbox id="offlineState" label="&offlineState.label;" accesskey="&offlineState.accesskey;"/>
 
       <checkbox id="autoSelectLastProfile" label="&useSelected.label;"
                 accesskey="&useSelected.accesskey;"/>
     </vbox>
 
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -17,16 +17,17 @@ toolkit.jar:
    skin/classic/global/listbox.css
    skin/classic/global/menu.css
    skin/classic/global/menulist.css
    skin/classic/global/netError.css
 *  skin/classic/global/notification.css
 *  skin/classic/global/numberbox.css
    skin/classic/global/popup.css
    skin/classic/global/radio.css
+   skin/classic/global/richlistbox.css
    skin/classic/global/scrollbox.css
    skin/classic/global/splitter.css
    skin/classic/global/tabbox.css
    skin/classic/global/textbox.css
    skin/classic/global/toolbar.css
    skin/classic/global/toolbarbutton.css
    skin/classic/global/tree.css
 *  skin/classic/global/alerts/alert.css                        (alerts/alert.css)
copy from toolkit/themes/windows/global/richlistbox.css
copy to toolkit/themes/linux/global/richlistbox.css
--- a/toolkit/themes/windows/global/richlistbox.css
+++ b/toolkit/themes/linux/global/richlistbox.css
@@ -29,8 +29,30 @@ richlistbox[seltype="multiple"]:focus > 
   outline: 1px dotted Highlight;
   outline-offset: -1px;
 }
 
 richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"] {
   outline: 1px dotted #F3D982; /* TODO: find a suitable system color */
 }
 
+richlistbox.theme-listbox:focus > richlistitem[selected="true"][current="true"] {
+  outline: 1px dotted #F3D982;
+}
+
+richlistbox.theme-listbox:focus > richlistitem[current="true"] {
+  outline: 1px dotted Highlight;
+  outline-offset: -1px;
+}
+
+richlistbox.theme-listbox:not(:focus) > richlistitem[selected="true"] {
+  background-color: -moz-cellhighlight;
+  color: -moz-cellhighlighttext;
+}
+
+richlistbox.theme-listbox > richlistitem > label {
+  margin: 0px;
+  padding-top: 0px;
+  padding-bottom: 1px;
+  padding-inline-start: 4px;
+  padding-inline-end: 0px;
+  white-space: nowrap;
+}
--- a/toolkit/themes/osx/global/richlistbox.css
+++ b/toolkit/themes/osx/global/richlistbox.css
@@ -20,8 +20,22 @@ richlistitem[selected="true"] {
   color: -moz-DialogText;
 }
 
 richlistbox:focus > richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;
 }
 
+richlistbox.theme-listbox > richlistitem {
+  border: 1px solid transparent;
+}
+
+richlistbox.theme-listbox:not(:focus) > richlistitem[selected="true"] {
+  background-color: -moz-mac-secondaryhighlight;
+}
+
+richlistbox.theme-listbox > richlistitem > label {
+  margin: 0px;
+  padding-bottom: 1px;
+  padding-inline-start: 4px;
+  white-space: nowrap;
+}
--- a/toolkit/themes/shared/non-mac.jar.inc.mn
+++ b/toolkit/themes/shared/non-mac.jar.inc.mn
@@ -7,17 +7,16 @@
 # manifests.
 # As a result, the source file paths are relative to the location of the
 # actual manifests.
 
 #include jar.inc.mn
 
   skin/classic/global/dialog.css                           (../../windows/global/dialog.css)
   skin/classic/global/progressmeter.css                    (../../windows/global/progressmeter.css)
-  skin/classic/global/richlistbox.css                      (../../windows/global/richlistbox.css)
   skin/classic/global/scrollbars.css                       (../../windows/global/xulscrollbars.css)
   skin/classic/global/tabprompts.css                       (../../windows/global/tabprompts.css)
   skin/classic/global/wizard.css                           (../../windows/global/wizard.css)
 
   skin/classic/global/arrow/arrow-dn.gif                   (../../windows/global/arrow/arrow-dn.gif)
   skin/classic/global/arrow/arrow-up.gif                   (../../windows/global/arrow/arrow-up.gif)
   skin/classic/global/arrow/panelarrow-horizontal.svg      (../../windows/global/arrow/panelarrow-horizontal.svg)
   skin/classic/global/arrow/panelarrow-vertical.svg        (../../windows/global/arrow/panelarrow-vertical.svg)
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -20,16 +20,17 @@ toolkit.jar:
   skin/classic/global/commonDialog.css
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/listbox.css
   skin/classic/global/netError.css
 * skin/classic/global/numberbox.css
 * skin/classic/global/notification.css
   skin/classic/global/printPageSetup.css
+  skin/classic/global/richlistbox.css
   skin/classic/global/scrollbox.css
   skin/classic/global/splitter.css
   skin/classic/global/toolbar.css
   skin/classic/global/toolbarbutton.css
 * skin/classic/global/tree.css
 * skin/classic/global/alerts/alert.css                     (alerts/alert.css)
   skin/classic/global/arrow/arrow-lft.gif                  (arrow/arrow-lft.gif)
   skin/classic/global/arrow/arrow-lft-dis.gif              (arrow/arrow-lft-dis.gif)
--- a/toolkit/themes/windows/global/richlistbox.css
+++ b/toolkit/themes/windows/global/richlistbox.css
@@ -29,8 +29,132 @@ richlistbox[seltype="multiple"]:focus > 
   outline: 1px dotted Highlight;
   outline-offset: -1px;
 }
 
 richlistbox[seltype="multiple"]:focus > richlistitem[current="true"][selected="true"] {
   outline: 1px dotted #F3D982; /* TODO: find a suitable system color */
 }
 
+richlistbox.theme-listbox > richlistitem {
+  border: 1px solid transparent;
+}
+
+richlistbox.theme-listbox:focus > richlistitem[selected="true"][current="true"] {
+  outline: 1px dotted #F3D982;
+}
+
+richlistbox.theme-listbox:focus > richlistitem[current="true"] {
+  outline: 1px dotted Highlight;
+  outline-offset: -1px;
+}
+
+richlistbox.theme-listbox > richlistitem[selected="true"] {
+  background-color: -moz-cellhighlight;
+  color: -moz-cellhighlighttext;
+}
+
+richlistbox.theme-listbox:focus > richlistitem[selected="true"] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+richlistbox.theme-listbox > richlistitem > label {
+  margin: 0px;
+  padding-top: 0px;
+  padding-bottom: 1px;
+  padding-inline-start: 4px;
+  padding-inline-end: 0px;
+  white-space: nowrap;
+}
+
+@media (-moz-windows-default-theme) {
+  richlistbox.theme-listbox > richlistitem {
+    --listitem-selectedColor: rgb(217,217,217);
+    --listitem-selectedBorder: var(--listitem-selectedColor);
+    --listitem-selectedBottomBorder: rgb(204,204,204);
+    --listitem-selectedBackground: var(--listitem-selectedColor);
+    --listitem-selectedImage: none;
+    --listitem-selectedCurrentBorder: rgb(123,195,255);
+    --listitem-selectedFocusColor: rgb(205,232,255);
+    --listitem-selectedFocusBorder: var(--listitem-selectedFocusColor);
+    --listitem-selectedFocusBottomBorder: rgb(165,214,255);
+    --listitem-selectedFocusBackground: var(--listitem-selectedFocusColor);
+    --listitem-selectedFocusImage: none;
+    --listitem-selectedFocusCurrentBorder: var(--listitem-selectedFocusColor);
+    --listitem-selectedFocusCurrentBottomBorder: var(--listitem-selectedFocusBottomBorder);
+    --listitem-selectedFocusCurrentBackground: var(--listitem-selectedFocusColor);
+
+    color: -moz-FieldText;
+    margin-inline-start: 1px;
+    margin-inline-end: 1px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    border-width: 1px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  richlistbox.theme-listbox > richlistitem[selected="true"] {
+    border-top-color: var(--listitem-selectedBorder);
+    border-right-color: var(--listitem-selectedBorder);
+    border-left-color: var(--listitem-selectedBorder);
+    border-bottom-color: var(--listitem-selectedBottomBorder);
+    background-image: var(--listitem-selectedImage);
+    background-color: var(--listitem-selectedBackground);
+    color: -moz-DialogText;
+  }
+
+  richlistbox.theme-listbox:focus > richlistitem[selected="true"] {
+    border-top-color: var(--listitem-selectedFocusBorder);
+    border-right-color: var(--listitem-selectedFocusBorder);
+    border-left-color: var(--listitem-selectedFocusBorder);
+    border-bottom-color: var(--listitem-selectedFocusBottomBorder);
+    background-image: var(--listitem-selectedFocusImage);
+    background-color: var(--listitem-selectedFocusBackground);
+    color: -moz-DialogText;
+  }
+
+  richlistbox.theme-listbox:focus > richlistitem[current="true"] {
+    border-color: var(--listitem-selectedCurrentBorder);
+    outline: none;
+  }
+
+  richlistbox.theme-listbox:focus > richlistitem[selected="true"][current="true"] {
+    border-top-color: var(--listitem-selectedFocusCurrentBorder);
+    border-right-color: var(--listitem-selectedFocusCurrentBorder);
+    border-left-color: var(--listitem-selectedFocusCurrentBorder);
+    border-bottom-color: var(--listitem-selectedFocusCurrentBottomBorder);
+    background-color: var(--listitem-selectedFocusCurrentBackground);
+    outline: none;
+  }
+
+  @media (-moz-os-version: windows-win7) {
+    richlistbox.theme-listbox > richlistitem {
+      --listitem-selectedBottomBorder: var(--listitem-selectedColor);
+      --listitem-selectedBackground: rgba(190,190,190,.15);
+      --listitem-selectedImage: linear-gradient(rgba(190,190,190,.1), rgba(190,190,190,.4));
+      --listitem-selectedCurrentBorder: rgb(125,162,206);
+      --listitem-selectedFocusColor: rgb(132,172,221);
+      --listitem-selectedFocusBottomBorder: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusBackground: rgba(131,183,249,.02);
+      --listitem-selectedFocusImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.375));
+      --listitem-selectedFocusCurrentBackground: rgba(131,183,249,.15);
+
+      border-radius: 3px;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -1px 0 1px rgba(255,255,255,.2);
+    }
+  }
+
+  @media (-moz-os-version: windows-win8) {
+    richlistbox.theme-listbox > richlistitem {
+      --listitem-selectedBottomBorder: var(--listitem-selectedColor);
+      --listitem-selectedBackground: rgba(190,190,190,.15);
+      --listitem-selectedImage: linear-gradient(rgba(190,190,190,.4), rgba(190,190,190,.4));
+      --listitem-selectedCurrentBorder: rgb(125,162,206);
+      --listitem-selectedFocusColor: rgb(132,172,221);
+      --listitem-selectedFocusBottomBorder: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusBackground: rgba(131,183,249,.02);
+      --listitem-selectedFocusImage: linear-gradient(rgba(131,183,249,.375), rgba(131,183,249,.375));
+      --listitem-selectedFocusCurrentBackground: rgba(131,183,249,.15);
+    }
+  }
+}