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
--- 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);
+ }
+ }
+}