Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 19:04:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1437641 - Remove numberbox binding and convert usages to input[type=number]. r=bgrins,dao

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D15882

--HG--
rename : toolkit/themes/shared/numberbox.css => toolkit/themes/shared/numberinput.css
extra : moz-landing-system : lando
This commit is contained in:
Tim Nguyen 2019-01-09 08:51:32 +00:00
parent 7c3d27bb52
commit 34cebfc0b6
33 changed files with 95 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
accessible/tests/mochitest/name/test_general.xul
View File

@ -238,7 +238,7 @@
<checkbox id="rememberHistoryDays"
label="Remember "
aria-labelledby="rememberHistoryDays historyDays rememberAfter"/>
<textbox id="historyDays" type="number" value="3"
<textbox id="historyDays" value="3"
aria-labelledby="rememberHistoryDays historyDays rememberAfter"/>
<label id="rememberAfter">days</label>

16
browser/components/preferences/connection.xul
View File

@ -68,8 +68,8 @@
<textbox id="networkProxyHTTP" flex="1"
preference="network.proxy.http" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyServer();"/>
<label data-l10n-id="connection-proxy-http-port" control="networkProxyHTTP_Port" />
<textbox id="networkProxyHTTP_Port" class="proxy-port-input" type="number" max="65535" hidespinbuttons="true"
preference="network.proxy.http_port" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyPort();"/>
<html:input id="networkProxyHTTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535"
preference="network.proxy.http_port" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyPort();"/>
</hbox>
</row>
<row>
@ -88,8 +88,8 @@
<textbox id="networkProxySSL" flex="1" preference="network.proxy.ssl"
onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', false);"/>
<label data-l10n-id="connection-proxy-ssl-port" control="networkProxySSL_Port" />
<textbox id="networkProxySSL_Port" class="proxy-port-input" type="number" max="65535" size="5" preference="network.proxy.ssl_port"
hidespinbuttons="true" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', true);"/>
<html:input id="networkProxySSL_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
preference="network.proxy.ssl_port" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', true);"/>
</hbox>
</row>
<row align="center">
@ -100,8 +100,8 @@
<textbox id="networkProxyFTP" flex="1" preference="network.proxy.ftp"
onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', false);"/>
<label data-l10n-id="connection-proxy-ftp-port" control="networkProxyFTP_Port"/>
<textbox id="networkProxyFTP_Port" class="proxy-port-input" type="number" max="65535" size="5" preference="network.proxy.ftp_port"
hidespinbuttons="true" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', true);"/>
<html:input id="networkProxyFTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
preference="network.proxy.ftp_port" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', true);"/>
</hbox>
</row>
<row align="center">
@ -112,8 +112,8 @@
<textbox id="networkProxySOCKS" flex="1" preference="network.proxy.socks"
onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', false);"/>
<label data-l10n-id="connection-proxy-socks-port" control="networkProxySOCKS_Port"/>
<textbox id="networkProxySOCKS_Port" class="proxy-port-input" type="number" max="65535" size="5" preference="network.proxy.socks_port"
hidespinbuttons="true" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', true);"/>
<html:input id="networkProxySOCKS_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
preference="network.proxy.socks_port" onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', true);"/>
</hbox>
</row>
<row>

2
browser/installer/allowed-dupes.mn
View File

@ -95,7 +95,7 @@ chrome/toolkit/skin/classic/global/global.css
chrome/toolkit/skin/classic/global/icons/close-win7.png
chrome/toolkit/skin/classic/global/menu.css
chrome/toolkit/skin/classic/global/menulist.css
chrome/toolkit/skin/classic/global/numberbox.css
chrome/toolkit/skin/classic/global/numberinput.css
chrome/toolkit/skin/classic/global/popup.css
chrome/toolkit/skin/classic/global/preferences.css
chrome/toolkit/skin/classic/global/radio.css

3
browser/themes/shared/incontentprefs/preferences.inc.css
View File

@ -849,7 +849,8 @@ menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .me
/* Proxy port input */
.proxy-port-input {
width: calc(5ch + 22px); /* 5 chars + 11px padding on both sides */
width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */
margin-inline-start: 4px;
}
#defaultBrowserLanguage {

12
editor/reftests/xul/emptytextbox-3.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number"/>
</window>

12
editor/reftests/xul/number-1.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number"/>
</window>

12
editor/reftests/xul/number-2.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number" hidespinbuttons="false"/>
</window>

12
editor/reftests/xul/number-3.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number" hidespinbuttons="true"/>
</window>

12
editor/reftests/xul/number-4.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number" value="1" hidespinbuttons="true"/>
</window>

12
editor/reftests/xul/number-5.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number" value="test" hidespinbuttons="true"/>
</window>

13
editor/reftests/xul/number-ref.xul
View File

@ -1,13 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="resource://reftest/input.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<html:input value="0" class="num"/>
</window>

12
editor/reftests/xul/numberwithvalue-1.xul
View File

@ -1,12 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<textbox type="number" value="123" hidespinbuttons="true"/>
</window>

13
editor/reftests/xul/numberwithvalue-ref.xul
View File

@ -1,13 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="resource://reftest/input.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Textbox tests">
<script type="text/javascript" src="platform.js"/>
<html:input value="123" class="num"/>
</window>

9
editor/reftests/xul/reftest.list
View File

@ -8,16 +8,7 @@ fails-if(Android) fails-if(windowsDefaultTheme&&/^Windows\x20NT\x20(5\.[12]|6\.[
fails-if(Android) == emptymultiline-2.xul emptymultiline-ref.xul # bug 783658
fails-if(Android) skip-if(winWidget) == emptytextbox-1.xul emptytextbox-ref.xul # Windows: bug 1239170
fails-if(Android) skip-if(winWidget) == emptytextbox-2.xul emptytextbox-ref.xul # Windows: bug 1239170
!= emptytextbox-3.xul emptytextbox-ref.xul
!= emptytextbox-4.xul emptytextbox-ref.xul
# There is no way to simulate a number textbox in windows XP/Vista/7 default theme using CSS.
# Therefore, the equlity tests below should be marked as failing.
!= number-1.xul number-ref.xul
!= number-2.xul number-ref.xul
fuzzy-if(webrender,0-205,0-7) fails-if(Android) fails-if(windowsDefaultTheme&&/^Windows\x20NT\x20(5\.[12]|6\.[012]|10\.0)/.test(http.oscpu)) == number-3.xul number-ref.xul # bug 783658
!= number-4.xul number-ref.xul
fuzzy-if(webrender,0-205,0-7) fails-if(Android) fails-if(windowsDefaultTheme&&/^Windows\x20NT\x20(5\.[12]|6\.[012]|10\.0)/.test(http.oscpu)) == number-5.xul number-ref.xul # bug 783658
fuzzy-if(webrender,0-255,0-7) fails-if(Android) fails-if(windowsDefaultTheme&&/^Windows\x20NT\x20(5\.[12]|6\.[012]|10\.0)/.test(http.oscpu)) == numberwithvalue-1.xul numberwithvalue-ref.xul # bug 783658
fails-if(Android) skip-if(winWidget) == passwd-1.xul passwd-ref.xul # Windows: bug 1239170
fails-if(Android) skip-if(winWidget) == passwd-2.xul passwd-ref.xul # Windows: bug 1239170
!= passwd-3.xul passwd-ref.xul

2
mobile/android/installer/allowed-dupes.mn
View File

@ -14,7 +14,7 @@ chrome/toolkit/skin/classic/global/global.css
chrome/toolkit/skin/classic/global/listbox.css
chrome/toolkit/skin/classic/global/menu.css
chrome/toolkit/skin/classic/global/menulist.css
chrome/toolkit/skin/classic/global/numberbox.css
chrome/toolkit/skin/classic/global/numberinput.css
chrome/toolkit/skin/classic/global/popup.css
chrome/toolkit/skin/classic/global/preferences.css
chrome/toolkit/skin/classic/global/radio.css

12
toolkit/components/printing/content/printPreviewToolbar.js
View File

@ -24,7 +24,7 @@ customElements.define("printpreview-toolbar", class PrintPreviewToolbar extends
<toolbarbutton id="print-preview-navigateHome" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(0, 0, 'home');" tooltiptext="&homearrow.tooltip;"/>
<toolbarbutton id="print-preview-navigatePrevious" class="print-preview-navigate-button tabbable" oncommand="parentNode.navigate(-1, 0, 0);" tooltiptext="&previousarrow.tooltip;"/>
<hbox align="center" pack="center">
<textbox id="print-preview-pageNumber" value="1" min="1" type="number" hidespinbuttons="true" onchange="navigate(0, this.valueNumber, 0);"/>
<html:input id="print-preview-pageNumber" hidespinbuttons="true" type="number" value="1" min="1"/>
<label value="&of.label;"/>
<label id="print-preview-totalPages" value="1"/>
</hbox>
@ -104,6 +104,11 @@ customElements.define("printpreview-toolbar", class PrintPreviewToolbar extends
this.mPPBrowser = null;
this.mMessageManager = null;
this.mOnPageTextBoxChange = () => {
this.navigate(0, Number(this.mPageTextBox.value), 0);
};
this.mPageTextBox.addEventListener("change", this.mOnPageTextBoxChange);
}
initialize(aPPBrowser) {
@ -140,6 +145,7 @@ customElements.define("printpreview-toolbar", class PrintPreviewToolbar extends
disconnectedCallback() {
window.removeEventListener("unload", this.disconnectedCallback);
this.mPageTextBox.removeEventListener("change", this.mOnPageTextBoxChange);
this.destroy();
}
@ -188,9 +194,9 @@ customElements.define("printpreview-toolbar", class PrintPreviewToolbar extends
} else if (aDirection) {
// aDirection is either +1 or -1, and allows us to increment
// or decrement our currently viewed page.
this.mPageTextBox.valueNumber += aDirection;
this.mPageTextBox.value = Number(this.mPageTextBox.value) + aDirection;
navType = nsIWebBrowserPrint.PRINTPREVIEW_GOTO_PAGENUM;
pageNum = this.mPageTextBox.value; // TODO: back to valueNumber?
pageNum = this.mPageTextBox.value;
} else {
// We're going to a specific page (aPageNum)
navType = nsIWebBrowserPrint.PRINTPREVIEW_GOTO_PAGENUM;

3
toolkit/content/customElements.js
View File

@ -141,7 +141,8 @@ const MozElementMixin = Base => class MozElement extends Base {
`;
}, "")}
]>` : ""}
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<box xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
${str}
</box>
`, "application/xml");

3
toolkit/content/jar.mn
View File

@ -75,7 +75,6 @@ toolkit.jar:
content/global/bindings/menu.xml (widgets/menu.xml)
content/global/bindings/menulist.xml (widgets/menulist.xml)
content/global/bindings/notification.xml (widgets/notification.xml)
content/global/bindings/numberbox.xml (widgets/numberbox.xml)
content/global/bindings/popup.xml (widgets/popup.xml)
content/global/bindings/radio.xml (widgets/radio.xml)
content/global/bindings/richlistbox.xml (widgets/richlistbox.xml)
@ -93,7 +92,7 @@ toolkit.jar:
* content/global/bindings/wizard.xml (widgets/wizard.xml)
content/global/elements/datetimebox.js (widgets/datetimebox.js)
content/global/elements/findbar.js (widgets/findbar.js)
content/global/elements/editor.js (widgets/editor.js)
content/global/elements/editor.js (widgets/editor.js)
content/global/elements/general.js (widgets/general.js)
content/global/elements/notificationbox.js (widgets/notificationbox.js)
content/global/elements/pluginProblem.js (widgets/pluginProblem.js)

1
toolkit/content/tests/chrome/chrome.ini
View File

@ -182,7 +182,6 @@ support-files = window_preferences_onsyncfrompreference.xul
[test_tabindex.xul]
[test_textbox_dictionary.xul]
[test_textbox_emptytext.xul]
[test_textbox_number.xul]
[test_textbox_search.xul]
[test_titlebar.xul]
skip-if = os == "linux"

159
toolkit/content/tests/chrome/test_textbox_number.xul
View File

@ -1,159 +0,0 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<!--
XUL Widget Test for textbox type="number"
-->
<window title="Textbox type='number' test" width="500" height="600"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<hbox>
<textbox id="n1" type="number"/>
<textbox id="n2" type="number" value="10" min="5" max="15"/>
</hbox>
<hbox>
<textbox id="n4" type="number" value="-2" min="-8" max="18"/>
<textbox id="n5" type="number" value="-17" min="-10" max="-3"/>
</hbox>
<hbox>
<textbox id="n6" type="number" value="9" min="12" max="8"/>
<textbox id="n8" type="number" hidespinbuttons="true"/>
</hbox>
<hbox>
<textbox id="n9" type="number" oninput="updateInputEventCount();"/>
</hbox>
<!-- test results are displayed in the html:body -->
<body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
<!-- test code goes here -->
<script type="application/javascript"><![CDATA[
SimpleTest.waitForExplicitFinish();
// ---- NOTE: the numbers used in these tests are carefully chosen to avoid
// ---- floating point rounding issues
function doTests() {
var n1 = $("n1");
var n2 = $("n2");
var n4 = $("n4");
var n5 = $("n5");
var n6 = $("n6");
testValsMinMax(n1, "initial n1", 0, 0, Infinity);
testValsMinMax(n2, "initial n2", 10, 5, 15);
testValsMinMax(n4, "initial n4", -2, -8, 18);
testValsMinMax(n5, "initial n5", -10, -10, -3);
testValsMinMax(n6, "initial n6", 12, 12, 12);
// test changing the value
n1.value = "1700";
testVals(n1, "set value,", 1700);
n1.value = 1600;
testVals(n1, "set value int,", 1600);
n2.value = "2";
testVals(n2, "set value below min,", 5);
n2.value = 2;
testVals(n2, "set value below min int,", 5);
n2.value = 18;
testVals(n2, "set value above max,", 15);
n2.value = -6;
testVals(n2, "set value below min negative,", 5);
n5.value = -2;
testVals(n5, "set value above max positive,", -3);
n1.value = 4.75;
testVals(n1, "set value to decimal round,", 5);
// test changing the valueNumber
n1.valueNumber = 27;
testVals(n1, "set valueNumber,", 27);
n2.valueNumber = 1;
testVals(n2, "set valueNumber below min,", 5);
n2.valueNumber = 77;
testVals(n2, "set valueNumber above max,", 15);
n2.valueNumber = -5;
testVals(n2, "set valueNumber below min negative,", 5);
n5.valueNumber = -8;
n5.valueNumber = -1;
testVals(n5, "set valueNumber above max positive,", -3);
n1.value = 8.9;
testVals(n1, "set valueNumber to decimal round,", 9);
// test changing the min
n1.value = 6;
n1.min = 8;
testValsMinMax(n1, "set integer min,", 8, 8, Infinity);
// test changing the max
n1.value = 25;
n1.max = 22;
testValsMinMax(n1, "set integer max,", 22, 8, 22);
// check read only state
n1.readOnly = true;
n1.min = -10;
n1.max = 15;
n1.value = 12;
n1.inputField.focus();
// no events should fire and no changes should occur when the field is read only
synthesizeKeyExpectEvent("KEY_ArrowUp", {}, n1, "!change", "key up read only");
is(n1.value, "12", "key up read only value");
synthesizeKeyExpectEvent("KEY_ArrowDown", {}, n1, "!change", "key down read only");
is(n1.value, "12", "key down read only value");
n1.readOnly = false;
var n9 = $("n9");
is(n9.value, "0", "initial value");
n9.select();
sendString("4");
is(inputEventCount, 1, "input event count");
is(inputEventValue, "4", "input value");
is(n9.value, "4", "updated value");
sendString("2");
is(inputEventCount, 2, "input event count");
is(inputEventValue, "42", "input value");
is(n9.value, "42", "updated value");
synthesizeKey("KEY_Backspace");
is(inputEventCount, 3, "input event count");
is(inputEventValue, "4", "input value");
is(n9.value, "4", "updated value");
synthesizeKey("A", {accelKey: true});
synthesizeKey("KEY_Delete");
is(inputEventCount, 4, "input event count");
is(inputEventValue, "0", "input value");
is(n9.value, "0", "updated value");
SimpleTest.finish();
}
var inputEventCount = 0;
var inputEventValue = null;
function updateInputEventCount() {
inputEventValue = $("n9").value;
inputEventCount++;
};
function testVals(nb, name, valueNumber, valueFieldNumber) {
if (valueFieldNumber === undefined)
valueFieldNumber = "" + valueNumber;
SimpleTest.is(nb.value, "" + valueNumber, name + " value is '" + valueNumber + "'");
SimpleTest.is(nb.valueNumber, valueNumber, name + " valueNumber is " + valueNumber);
SimpleTest.is(nb.inputField.value, valueFieldNumber,
name + " inputField value is '" + valueFieldNumber + "'");
}
function testValsMinMax(nb, name, valueNumber, min, max, valueFieldNumber) {
testVals(nb, name, valueNumber, valueFieldNumber);
SimpleTest.is(nb.min, min, name + " min is " + min);
SimpleTest.is(nb.max, max, name + " max is " + max);
}
SimpleTest.waitForFocus(doTests);
]]></script>
</window>

5
toolkit/content/widgets.css
View File

@ -16,17 +16,14 @@
@import url("chrome://global/skin/menu.css");
@import url("chrome://global/skin/menulist.css");
@import url("chrome://global/skin/notification.css");
@import url("chrome://global/skin/numberinput.css");
@import url("chrome://global/skin/popup.css");
@import url("chrome://global/skin/radio.css");
@import url("chrome://global/skin/richlistbox.css");
@import url("chrome://global/skin/scrollbox.css");
@import url("chrome://global/skin/splitter.css");
@import url("chrome://global/skin/tabbox.css");
/* numberbox.css needs to be loaded after textbox.css since it overrides it */
@import url("chrome://global/skin/textbox.css");
@import url("chrome://global/skin/numberbox.css");
@import url("chrome://global/skin/toolbar.css");
@import url("chrome://global/skin/toolbarbutton.css");
@import url("chrome://global/skin/tree.css");

146
toolkit/content/widgets/numberbox.xml
View File

@ -1,146 +0,0 @@
<?xml version="1.0"?>
<!-- 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/. -->
<bindings id="numberboxBindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="numberbox"
extends="chrome://global/content/bindings/textbox.xml#textbox">
<content>
<xul:moz-input-box anonid="moz-input-box" class="numberbox-input-box" flex="1" xbl:inherits="context,disabled,focused">
<html:input class="numberbox-input textbox-input" type="number" anonid="input"
xbl:inherits="value,min,max,maxlength,disabled,size,readonly,placeholder,tabindex,accesskey"/>
</xul:moz-input-box>
</content>
<implementation>
<field name="_valueEntered">false</field>
<field name="_value">0</field>
<property name="value" onget="return String(this.valueNumber)"
onset="return this.valueNumber = val;"/>
<property name="valueNumber">
<getter>
if (this._valueEntered) {
var newval = this.inputField.value;
this._validateValue(newval);
}
return this._value;
</getter>
<setter>
this._validateValue(val);
return val;
</setter>
</property>
<property name="min">
<getter>
var min = this.getAttribute("min");
return min ? Number(min) : 0;
</getter>
<setter>
<![CDATA[
if (typeof val == "number") {
this.setAttribute("min", val);
if (this.valueNumber < val)
this._validateValue(val);
}
return val;
]]>
</setter>
</property>
<property name="max">
<getter>
var max = this.getAttribute("max");
return max ? Number(max) : Infinity;
</getter>
<setter>
<![CDATA[
if (typeof val != "number")
return val;
var min = this.min;
if (val < min)
val = min;
this.setAttribute("max", val);
if (this.valueNumber > val)
this._validateValue(val);
return val;
]]>
</setter>
</property>
<method name="_validateValue">
<parameter name="aValue"/>
<body>
<![CDATA[
aValue = Number(aValue) || 0;
aValue = Math.round(aValue);
var min = this.min;
var max = this.max;
if (aValue < min)
aValue = min;
else if (aValue > max)
aValue = max;
this._valueEntered = false;
this._value = Number(aValue);
this.inputField.value = aValue;
return aValue;
]]>
</body>
</method>
<method name="_fireChange">
<body>
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
this.dispatchEvent(evt);
</body>
</method>
<constructor><![CDATA[
if (this.max < this.min)
this.max = this.min;
var value = this.inputField.value || 0;
this._validateValue(value);
]]></constructor>
</implementation>
<handlers>
<handler event="input" phase="capturing">
this._valueEntered = true;
</handler>
<handler event="keypress">
<![CDATA[
if (!event.ctrlKey && !event.metaKey && !event.altKey && event.charCode) {
if (event.charCode == 45 && this.min < 0)
return;
if (event.charCode < 48 || event.charCode > 57)
event.preventDefault();
}
]]>
</handler>
<handler event="change">
if (event.originalTarget == this.inputField) {
this._validateValue(this.inputField.value);
}
</handler>
</handlers>
</binding>
</bindings>

42
toolkit/content/widgets/textbox.xml
View File

@ -194,29 +194,27 @@
if (this.hasAttribute("focused"))
return;
let { originalTarget } = event;
if (originalTarget == this) {
// Forward focus to actual HTML input
this.inputField.focus();
this.setAttribute("focused", "true");
return;
switch (event.originalTarget) {
case this:
// Forward focus to actual HTML input
this.inputField.focus();
this.setAttribute("focused", "true");
break;
case this.inputField:
if (this.mIgnoreFocus) {
this.mIgnoreFocus = false;
} else if (this.clickSelectsAll) {
try {
if (!this.editor || !this.editor.composing)
this.editor.selectAll();
} catch (e) {}
}
this.setAttribute("focused", "true");
break;
default:
// Otherwise, allow other children (e.g. URL bar buttons) to get focus
break;
}
// We check for the parent nodes to support input[type=number] where originalTarget may be an
// anonymous child input.
if (originalTarget == this.inputField ||
originalTarget.localName == "input" && originalTarget.parentNode.parentNode == this.inputField) {
if (this.mIgnoreFocus) {
this.mIgnoreFocus = false;
} else if (this.clickSelectsAll) {
try {
if (!this.editor || !this.editor.composing)
this.editor.selectAll();
} catch (e) {}
}
this.setAttribute("focused", "true");
}
// Otherwise, allow other children (e.g. URL bar buttons) to get focus
]]>
</handler>

4
toolkit/content/xul.css
View File

@ -562,10 +562,6 @@ textbox[type="search"] {
-moz-binding: url("chrome://global/content/bindings/textbox.xml#search-textbox");
}
textbox[type="number"] {
-moz-binding: url("chrome://global/content/bindings/numberbox.xml#numberbox");
}
@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
html|*.textbox-input,
html|*.textbox-textarea {

9
toolkit/themes/linux/global/global.css
View File

@ -11,6 +11,7 @@
@import url("chrome://global/content/widgets.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../../shared/global.inc.css
@ -125,9 +126,10 @@ toolbar[mode="text"] .toolbarbutton-text {
list-style-image: url("moz-icon://stock/gtk-orientation-landscape?size=button");
}
#print-preview-pageNumber {
/* 3 chars + 4px padding left + 2px padding right + 2*6px border */
width: calc(18px + 3ch);
html|*#print-preview-pageNumber {
/* 3 chars + (3px border + 1px padding) on both sides */
width: calc(8px + 3ch);
margin: 0 4px;
}
/* ::::: miscellaneous formatting ::::: */
@ -261,4 +263,3 @@ popupnotificationcontent {
}
%include ../../shared/notification-popup.inc.css

5
toolkit/themes/linux/global/in-content/common.css
View File

@ -43,11 +43,6 @@ xul|*.radio-label-box {
-moz-appearance: none;
}
xul|*.numberbox-input-box {
-moz-appearance: none;
border-width: 0;
}
xul|menulist:-moz-focusring > xul|*.menulist-label-box {
outline: none;
}

2
toolkit/themes/mobile/jar.mn
View File

@ -13,7 +13,7 @@ toolkit.jar:
skin/classic/global/global.css (global/empty.css)
skin/classic/global/menu.css (global/empty.css)
skin/classic/global/menulist.css (global/empty.css)
skin/classic/global/numberbox.css (global/empty.css)
skin/classic/global/numberinput.css (global/empty.css)
skin/classic/global/popup.css (global/empty.css)
skin/classic/global/radio.css (global/empty.css)
skin/classic/global/richlistbox.css (global/empty.css)

8
toolkit/themes/osx/global/in-content/common.css
View File

@ -70,14 +70,6 @@ xul|radio[focused="true"] > .radio-check {
-moz-outline-radius: 100%;
}
html|*.numberbox-input::-moz-number-spin-up {
border-radius: 4px 4px 0 0;
}
html|*.numberbox-input::-moz-number-spin-down {
border-radius: 0 0 4px 4px;
}
textbox[type="search"] {
-moz-appearance: none;
padding-inline-start: 8px;

43
toolkit/themes/shared/in-content/common.inc.css
View File

@ -165,9 +165,7 @@ html|button {
*|button,
html|select,
html|input[type="color"],
xul|menulist,
html|*.numberbox-input::-moz-number-spin-up,
html|*.numberbox-input::-moz-number-spin-down {
xul|menulist {
-moz-appearance: none;
min-height: 32px;
/* !important overrides button.css for disabled and default XUL buttons: */
@ -199,9 +197,7 @@ html|input[type="color"]::-moz-focus-inner {
*|button:-moz-focusring,
html|select:-moz-focusring,
html|input[type="color"]:-moz-focusring,
xul|menulist:-moz-focusring,
html|input[type="number"]:-moz-focusring::-moz-number-spin-up,
html|input[type="number"]:-moz-focusring::-moz-number-spin-down {
xul|menulist:-moz-focusring {
outline: none;
box-shadow: 0 0 0 1px var(--in-content-border-active) inset,
0 0 0 1px var(--in-content-border-active),
@ -225,8 +221,6 @@ html|select:not([size]):not([multiple]):dir(rtl) {
html|button:enabled:hover,
html|select:not([size]):not([multiple]):enabled:hover,
html|*.numberbox-input::-moz-number-spin-up:hover,
html|*.numberbox-input::-moz-number-spin-down:hover,
html|input[type="color"]:hover,
xul|button:not([disabled="true"]):hover,
xul|menulist:not([disabled="true"]):hover {
@ -235,8 +229,6 @@ xul|menulist:not([disabled="true"]):hover {
html|button:enabled:hover:active,
html|select:not([size]):not([multiple]):enabled:hover:active,
html|*.numberbox-input::-moz-number-spin-up:hover:active,
html|*.numberbox-input::-moz-number-spin-down:hover:active,
html|input[type="color"]:enabled:hover:active,
xul|button:not([disabled="true"]):hover:active,
xul|menulist[open="true"]:not([disabled="true"]) {
@ -245,7 +237,6 @@ xul|menulist[open="true"]:not([disabled="true"]) {
html|button:disabled,
html|select:disabled,
html|*.numberbox-input:disabled::-moz-number-spin-box,
html|input[type="color"]:disabled,
xul|button[disabled="true"],
xul|menulist[disabled="true"] {
@ -297,28 +288,6 @@ xul|*.close-icon > xul|*.button-box {
padding-left: 0 !important;
}
html|*.numberbox-input::-moz-number-spin-box {
margin-inline-end: 1px;
}
html|*.numberbox-input::-moz-number-spin-up,
html|*.numberbox-input::-moz-number-spin-down {
padding: 5px 8px;
margin: 0;
min-height: initial;
background-position: center;
}
html|*.numberbox-input::-moz-number-spin-up {
border-radius: 1px 1px 0 0;
background-image: url("chrome://global/skin/arrow/arrow-up.gif");
}
html|*.numberbox-input::-moz-number-spin-down {
border-radius: 0 0 1px 1px;
background-image: url("chrome://global/skin/arrow/arrow-dn.gif");
}
xul|*.menulist-dropmarker {
-moz-appearance: none;
margin-inline-end: 4px;
@ -418,14 +387,6 @@ xul|textbox {
padding-left: 8px;
}
xul|textbox[type="number"] {
padding-inline-end: 0;
}
html|*.numberbox-input::-moz-number-text {
margin-inline-end: 10px;
}
/* Create a separate rule to unset these styles on .tree-input instead of
using :not(.tree-input) so the selector specifity doesn't change. */
xul|textbox.tree-input {

2
toolkit/themes/shared/jar.inc.mn
View File

@ -22,7 +22,7 @@ toolkit.jar:
skin/classic/global/appPicker.css (../../shared/appPicker.css)
skin/classic/global/config.css (../../shared/config.css)
skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css)
skin/classic/global/numberbox.css (../../shared/numberbox.css)
skin/classic/global/numberinput.css (../../shared/numberinput.css)
skin/classic/global/passwordmgr.css (../../shared/passwordmgr.css)
skin/classic/global/icons/autoscroll.svg (../../shared/icons/autoscroll.svg)
skin/classic/global/icons/autoscroll-horizontal.svg (../../shared/icons/autoscroll-horizontal.svg)

42
toolkit/themes/shared/numberbox.css
View File

@ -1,42 +0,0 @@
/* 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/. */
/* ===== numberbox.css ==================================================
== Styles used by the XUL textbox type="number" element.
======================================================================= */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
html|*.numberbox-input {
text-align: right;
}
textbox[type="number"][hidespinbuttons="true"] html|*.numberbox-input {
-moz-appearance: textfield;
}
/* input[type=number] uses display: flex; by default which is incompatible with XUL flexbox
Forcing XUL flexbox allows changing the size of the input. */
html|*.numberbox-input,
html|*.numberbox-input::-moz-number-wrapper,
html|*.numberbox-input::-moz-number-spin-box {
display: -moz-box;
-moz-box-align: center;
}
html|*.numberbox-input::-moz-number-spin-box {
-moz-box-orient: vertical;
}
html|*.numberbox-input::-moz-number-wrapper,
html|*.numberbox-input::-moz-number-spin-up,
html|*.numberbox-input::-moz-number-spin-down,
html|*.numberbox-input::-moz-number-text {
-moz-box-flex: 1;
}
html|*.numberbox-input::-moz-number-wrapper {
width: 100%;
}

35
toolkit/themes/shared/numberinput.css Normal file
View File

@ -0,0 +1,35 @@
/* 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/. */
/* ===== numberinput.css ================================================
== Styles used by the input[type="number"] element.
======================================================================= */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
html|input[type="number"] {
text-align: right;
}
html|input[type="number"][hidespinbuttons="true"] {
-moz-appearance: textfield !important;
}
/* input[type=number] uses display: flex; by default which is incompatible with XUL flexbox
Forcing XUL flexbox allows changing the size of the input. */
xul|*:root html|input[type="number"],
xul|*:root html|input[type="number"]::-moz-number-wrapper {
display: -moz-box;
-moz-box-align: center;
}
xul|*:root html|input[type="number"]::-moz-number-wrapper,
xul|*:root html|input[type="number"]::-moz-number-text {
-moz-box-flex: 1;
}
xul|*:root html|input[type="number"]::-moz-number-wrapper {
width: 100%;
}

8
toolkit/themes/windows/global/global.css
View File

@ -11,6 +11,7 @@
@import url("chrome://global/content/widgets.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
%include ../../shared/global.inc.css
@ -132,8 +133,10 @@ toolbar[mode="text"] .toolbarbutton-text {
-moz-image-region: rect(0px 32px 16px 16px);
}
#print-preview-pageNumber {
width: 3ch;
html|*#print-preview-pageNumber {
/* 3 chars + (3px border + 1px padding) on both sides */
width: calc(8px + 3ch);
margin: 0 4px;
}
/* ::::: miscellaneous formatting ::::: */
@ -266,4 +269,3 @@ popupnotificationcontent {
}
%include ../../shared/notification-popup.inc.css