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 425677 0b45728b721042df9def2c5291e46b59cc6d248a
parent 425676 a34a6f54da753e87e778e477f2760753ebf519b6
child 425678 bd281782dc93474944f6a9375312e7e3a31cd061
push id34262
push usercsabou@mozilla.com
push dateTue, 10 Jul 2018 21:51:50 +0000
treeherdermozilla-central@70f901964f97 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1472750
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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);
+    }
+  }
+}