Bug 1550109 - Add support for required modal-input values. r=MattN
authorJared Wein <jwein@mozilla.com>
Thu, 30 May 2019 17:04:34 +0000
changeset 476232 f51914dc71e313bdf5683e5632349ceab881b0dc
parent 476231 30ce578fc33cb48b905a57938d8c68144131c212
child 476233 e292d1c1e2f1a8167f6cad1dfb05c7f527a7de74
push id36090
push usernbeleuzu@mozilla.com
push dateFri, 31 May 2019 03:59:09 +0000
treeherdermozilla-central@63568b2a8178 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1550109
milestone69.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 1550109 - Add support for required modal-input values. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D32093
browser/components/aboutlogins/content/components/modal-input.js
--- a/browser/components/aboutlogins/content/components/modal-input.js
+++ b/browser/components/aboutlogins/content/components/modal-input.js
@@ -17,30 +17,34 @@ class ModalInput extends ReflectedFluent
     let modalInputTemplate = document.querySelector("#modal-input-template");
     this.attachShadow({mode: "open"})
         .appendChild(modalInputTemplate.content.cloneNode(true));
 
     if (this.hasAttribute("value")) {
       this.value = this.getAttribute("value");
     }
 
+    let unlockedValue = this.shadowRoot.querySelector(".unlocked-value");
     if (this.getAttribute("type") == "password") {
-      let unlockedValue = this.shadowRoot.querySelector(".unlocked-value");
       unlockedValue.setAttribute("type", "password");
     }
 
+    if (this.hasAttribute("required")) {
+      unlockedValue.setAttribute("required", "");
+    }
+
     this.shadowRoot.querySelector(".reveal-checkbox").addEventListener("click", this);
   }
 
   static get reflectedFluentIDs() {
     return ["reveal-checkbox-hide", "reveal-checkbox-show"];
   }
 
   static get observedAttributes() {
-    return ["editing", "type", "value"].concat(ModalInput.reflectedFluentIDs);
+    return ["editing", "required", "type", "value"].concat(ModalInput.reflectedFluentIDs);
   }
 
   handleSpecialCaseFluentString(attrName) {
     if (attrName != "reveal-checkbox-hide" &&
         attrName != "reveal-checkbox-show") {
       return false;
     }
 
@@ -61,16 +65,20 @@ class ModalInput extends ReflectedFluent
     switch (attr) {
       case "editing": {
         let isEditing = newValue !== null;
         if (!isEditing) {
           this.setAttribute("value", unlockedValue.value);
         }
         break;
       }
+      case "required": {
+        unlockedValue.toggleAttribute("required", this.hasAttribute("required"));
+        break;
+      }
       case "type": {
         if (newValue == "password") {
           lockedValue.textContent = this.constructor.LOCKED_PASSWORD_DISPLAY;
           unlockedValue.setAttribute("type", "password");
         } else {
           lockedValue.textContent = this.getAttribute("value");
           unlockedValue.setAttribute("type", "text");
         }
@@ -116,16 +124,32 @@ class ModalInput extends ReflectedFluent
     let lockedValue = this.shadowRoot.querySelector(".locked-value");
     if (this.getAttribute("type") == "password" && val && val.length) {
       lockedValue.textContent = this.constructor.LOCKED_PASSWORD_DISPLAY;
     } else {
       lockedValue.textContent = val;
     }
   }
 
+  checkValidity() {
+    if (!this.hasAttribute("required")) {
+      return true;
+    }
+    let unlockedValue = this.shadowRoot.querySelector(".unlocked-value");
+    return unlockedValue.checkValidity();
+  }
+
+  reportValidity() {
+    if (!this.hasAttribute("required")) {
+      return true;
+    }
+    let unlockedValue = this.shadowRoot.querySelector(".unlocked-value");
+    return unlockedValue.reportValidity();
+  }
+
   updateRevealCheckboxTitle() {
     let revealCheckbox = this.shadowRoot.querySelector(".reveal-checkbox");
     let labelAttr = revealCheckbox.checked ? "reveal-checkbox-hide"
                                            : "reveal-checkbox-show";
     revealCheckbox.setAttribute("aria-label", this.getAttribute(labelAttr));
     revealCheckbox.setAttribute("title", this.getAttribute(labelAttr));
   }
 }