Bug 1429195 - Rename basic-card-option attribute names to match autofill storage. r=jaws draft
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Tue, 06 Feb 2018 17:10:58 -0800
changeset 752747 44f0f906b3feb0ce6ebfe299f58fe75ce981490d
parent 752746 796347ea5719f6c7ce14af42de62501e1f25b834
child 752748 6b652b070213f3c2a8315f3fe81bf7a2b52418a0
push id98362
push usermozilla@noorenberghe.ca
push dateThu, 08 Feb 2018 21:24:56 +0000
reviewersjaws
bugs1429195
milestone60.0a1
Bug 1429195 - Rename basic-card-option attribute names to match autofill storage. r=jaws MozReview-Commit-ID: DFan7RJ6j8R
toolkit/components/payments/res/components/basic-card-option.css
toolkit/components/payments/res/components/basic-card-option.js
toolkit/components/payments/test/mochitest/test_rich_select.html
--- 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>