Bug 1429195 - Rename basic-card-option attribute names to match autofill storage. r=jaws
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Tue, 06 Feb 2018 17:10:58 -0800
changeset 403021 07bac14a767bcf9cd57d5a0a91d00cf83dc0cd1c
parent 403020 985cd81569ff4008586293461e069ac04c478e04
child 403022 5c40672bc6de26ae79abec4eee3a166887c8034a
push id59328
push usermozilla@noorenberghe.ca
push dateThu, 08 Feb 2018 21:38:17 +0000
treeherderautoland@61eeb80f413c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1429195
milestone60.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 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>