Bug 1429195 - Rename basic-card-option attribute names to match autofill storage. r=jaws
MozReview-Commit-ID: DFan7RJ6j8R
--- a/toolkit/components/payments/res/components/basic-card-option.css
+++ b/toolkit/components/payments/res/components/basic-card-option.css
@@ -1,44 +1,44 @@
/* 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/. */
basic-card-option {
grid-row-gap: 5px;
grid-column-gap: 10px;
grid-template-areas:
- "owner type"
- "number ...";
+ "cc-name type"
+ "cc-number ...";
}
rich-select[open] > .rich-select-popup-box > basic-card-option {
grid-template-areas:
- "owner type"
- "number expiration";
+ "cc-name type"
+ "cc-number cc-exp";
}
-basic-card-option > .number {
- grid-area: number;
+basic-card-option > .cc-number {
+ grid-area: cc-number;
}
-basic-card-option > .owner {
- grid-area: owner;
+basic-card-option > .cc-name {
+ grid-area: cc-name;
}
-basic-card-option > .expiration {
- grid-area: expiration;
+basic-card-option > .cc-exp {
+ grid-area: cc-exp;
}
basic-card-option > .type {
grid-area: type;
}
-basic-card-option > .number,
-basic-card-option > .owner,
-basic-card-option > .expiration,
+basic-card-option > .cc-number,
+basic-card-option > .cc-name,
+basic-card-option > .cc-exp,
basic-card-option > .type {
white-space: nowrap;
}
-rich-select > .rich-select-selected-clone > .expiration {
+rich-select > .rich-select-selected-clone > .cc-exp {
display: none;
}
--- a/toolkit/components/payments/res/components/basic-card-option.js
+++ b/toolkit/components/payments/res/components/basic-card-option.js
@@ -8,41 +8,41 @@
* </rich-select>
*/
/* global ObservedPropertiesMixin, RichOption */
class BasicCardOption extends ObservedPropertiesMixin(RichOption) {
static get observedAttributes() {
return RichOption.observedAttributes.concat([
- "expiration",
+ "cc-exp",
+ "cc-name",
+ "cc-number",
"guid",
- "number",
- "owner",
- "type",
+ "type", // XXX Bug 1429181.
]);
}
constructor() {
super();
- for (let name of ["owner", "number", "expiration", "type"]) {
+ for (let name of ["cc-name", "cc-number", "cc-exp", "type"]) {
this[`_${name}`] = document.createElement("span");
this[`_${name}`].classList.add(name);
}
}
connectedCallback() {
- for (let name of ["owner", "number", "expiration", "type"]) {
+ for (let name of ["cc-name", "cc-number", "cc-exp", "type"]) {
this.appendChild(this[`_${name}`]);
}
super.connectedCallback();
}
render() {
- this._owner.textContent = this.owner;
- this._number.textContent = this.number;
- this._expiration.textContent = this.expiration;
+ this["_cc-name"].textContent = this.ccName;
+ this["_cc-number"].textContent = this.ccNumber;
+ this["_cc-exp"].textContent = this.ccExp;
this._type.textContent = this.type;
}
}
customElements.define("basic-card-option", BasicCardOption);
--- a/toolkit/components/payments/test/mochitest/test_rich_select.html
+++ b/toolkit/components/payments/test/mochitest/test_rich_select.html
@@ -55,30 +55,30 @@ Test the rich-select component
missinginformation="true"
address-level1="HI"
tel="415 439 2827"
postal-code="98765"
country="USA"></address-option>
</rich-select>
<rich-select id="select2">
- <basic-card-option owner="Jared Wein"
+ <basic-card-option cc-name="Jared Wein"
class="rich-option"
- expiration="01/1970"
- number="4024007197293599"
+ cc-exp="1970-01"
+ cc-number="************3599"
type="Visa"></basic-card-option>
- <basic-card-option owner="Whimsy Corn"
+ <basic-card-option cc-name="Whimsy Corn"
class="rich-option"
- expiration="01/1970"
- number="5220465104517667"
+ cc-exp="1970-01"
+ cc-number="*************7667"
type="Mastercard"></basic-card-option>
- <basic-card-option owner="Fire Fox"
+ <basic-card-option cc-name="Fire Fox"
class="rich-option"
- expiration="01/1970"
- number="6011777095481054"
+ cc-exp="1970-01"
+ cc-number="************1054"
type="Discover"></basic-card-option>
</rich-select>
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>