Bug 1691313 - Use hidden DOM property instead of attribute methods in toolkit/. r=mtigley,preferences-reviewers,jaws

Differential Revision: https://phabricator.services.mozilla.com/D104777

toolkit/components/certviewer/content/components/info-group-container.js

@@ -33,7 +33,7 @@ export class InfoGroupContainer extends HTMLElement {
     // Hiding all the certificzte contents except for the first tab that is
     // selected and shown by default
     if (i !== 0) {
-      this.infoGroupsContainers[i].setAttribute("hidden", true);
+      this.infoGroupsContainers[i].hidden = true;
     }
     this.infoGroupsContainers[i].classList.add("info-groups");
 

toolkit/components/passwordmgr/LoginManagerPrompter.jsm

@@ -716,7 +716,7 @@ class LoginManagerPrompter {
                   (messageStringID == "updateLoginMsgAddUsername" &&
                     login.timePasswordChanged <
                       Date.now() - VISIBILITY_TOGGLE_MAX_PW_AGE_MS);
-                toggleBtn.setAttribute("hidden", hideToggle);
+                toggleBtn.hidden = hideToggle;
               }
 
               let popup = chromeDoc.getElementById("PopupAutoComplete");

toolkit/components/passwordmgr/test/browser/browser_doorhanger_form_password_edit.js

@@ -555,14 +555,18 @@ async function openAndVerifyDoorhanger(browser, type, expected) {
   await checkDoorhangerUsernamePassword(expected.username, expected.password);
 
   let notificationElement = PopupNotifications.panel.childNodes[0];
-  let toggleCheckboxHidden = notificationElement
-    .querySelector("#password-notification-visibilityToggle")
-    .getAttribute("hidden");
+  let checkbox = notificationElement.querySelector(
+    "#password-notification-visibilityToggle"
+  );
 
   if (expected.toggle == "visible") {
-    todo(!toggleCheckboxHidden, "Toggle checkbox visible as expected");
+    // Bug 1692284
+    // ok(BrowserTestUtils.is_visible(checkbox), "Toggle checkbox visible as expected");
   } else if (expected.toggle == "hidden") {
-    todo(toggleCheckboxHidden, "Toggle checkbox hidden as expected");
+    ok(
+      BrowserTestUtils.is_hidden(checkbox),
+      "Toggle checkbox hidden as expected"
+    );
   } else {
     info("Not checking toggle checkbox visibility");
   }

toolkit/components/printing/content/printProgress.js

@@ -93,8 +93,8 @@ var progressListener = {
     aMaxTotalProgress
   ) {
     if (switchUI) {
-      dialog.tempLabel.setAttribute("hidden", "true");
-      dialog.progressBox.removeAttribute("hidden");
+      dialog.tempLabel.hidden = true;
+      dialog.progressBox.hidden = false;
 
       switchUI = false;
     }
@@ -192,7 +192,7 @@ function onLoad() {
   dialog.progressLabel = document.getElementById("dialog.progressLabel");
   dialog.tempLabel = document.getElementById("dialog.tempLabel");
 
-  dialog.progressBox.setAttribute("hidden", "true");
+  dialog.progressBox.hidden = true;
 
   document.l10n.setAttributes(dialog.tempLabel, "print-preparing");
 

toolkit/content/widgets/videocontrols.js

@@ -554,14 +554,10 @@ this.VideoControlsImplWidget = class {
             },
             _updateHiddenAttribute: {
               value: () => {
-                if (
-                  control._isHiddenExplicitly ||
-                  control._isHiddenByAdjustment
-                ) {
-                  control.setAttribute("hidden", "");
-                } else {
-                  control.removeAttribute("hidden");
-                }
+                control.toggleAttribute(
+                  "hidden",
+                  control._isHiddenExplicitly || control._isHiddenByAdjustment
+                );
               },
             },
           });
@@ -576,7 +572,7 @@ this.VideoControlsImplWidget = class {
 
       updatePictureInPictureToggleDisplay() {
         if (this.isAudioOnly) {
-          this.pictureInPictureToggle.setAttribute("hidden", true);
+          this.pictureInPictureToggle.hidden = true;
           return;
         }
 
@@ -589,14 +585,14 @@ this.VideoControlsImplWidget = class {
             this.reflowedDimensions
           )
         ) {
-          this.pictureInPictureToggle.removeAttribute("hidden");
+          this.pictureInPictureToggle.hidden = false;
           VideoControlsWidget.setupToggle(
             this.prefs,
             this.pictureInPictureToggle,
             this.reflowedDimensions
           );
         } else {
-          this.pictureInPictureToggle.setAttribute("hidden", true);
+          this.pictureInPictureToggle.hidden = true;
         }
       },
 
@@ -1070,12 +1066,7 @@ this.VideoControlsImplWidget = class {
       },
 
       setShowPictureInPictureMessage(showMessage) {
-        if (showMessage) {
-          this.pictureInPictureOverlay.removeAttribute("hidden");
-        } else {
-          this.pictureInPictureOverlay.setAttribute("hidden", true);
-        }
-
+        this.pictureInPictureOverlay.hidden = !showMessage;
         this.isShowingPictureInPictureMessage = showMessage;
       },
 
@@ -3197,14 +3188,14 @@ this.NoControlsDesktopImplWidget = class {
             this.reflowedDimensions
           )
         ) {
-          this.pictureInPictureToggle.removeAttribute("hidden");
+          this.pictureInPictureToggle.hidden = false;
           VideoControlsWidget.setupToggle(
             this.prefs,
             this.pictureInPictureToggle,
             this.reflowedDimensions
           );
         } else {
-          this.pictureInPictureToggle.setAttribute("hidden", true);
+          this.pictureInPictureToggle.hidden = true;
         }
       },
 
@@ -3227,7 +3218,7 @@ this.NoControlsDesktopImplWidget = class {
 
         // Default the Picture-in-Picture toggle button to being hidden. We might unhide it
         // later if we determine that this video is qualified to show it.
-        this.pictureInPictureToggle.setAttribute("hidden", true);
+        this.pictureInPictureToggle.hidden = true;
 
         if (this.video.readyState >= this.video.HAVE_METADATA) {
           // According to the spec[1], at the HAVE_METADATA (or later) state, we know

toolkit/content/widgets/wizard.js

@@ -344,18 +344,10 @@
     }
 
     _initCurrentPage() {
-      if (this.onFirstPage) {
-        this.canRewind = false;
-        this.setAttribute("firstpage", "true");
-        if (AppConstants.platform == "linux") {
-          this.getButton("back").setAttribute("hidden", "true");
-        }
-      } else {
-        this.canRewind = true;
-        this.setAttribute("firstpage", "false");
-        if (AppConstants.platform == "linux") {
-          this.getButton("back").setAttribute("hidden", "false");
-        }
+      this.canRewind = !this.onFirstPage;
+      this.setAttribute("firstpage", String(this.onFirstPage));
+      if (AppConstants.platform == "linux") {
+        this.getButton("back").hidden = this.onFirstPage;
       }
 
       if (this.onLastPage) {

toolkit/mozapps/preferences/changemp.js

@@ -36,8 +36,8 @@ function process() {
     let oldpwbox = document.getElementById("oldpw");
     let msgBox = document.getElementById("message");
     if ((token.needsLogin() && token.needsUserInit) || !token.needsLogin()) {
-      oldpwbox.setAttribute("hidden", "true");
-      msgBox.removeAttribute("hidden");
+      oldpwbox.hidden = true;
+      msgBox.hidden = false;
 
       if (!token.needsLogin()) {
         oldpwbox.setAttribute("inited", "empty");
@@ -49,8 +49,8 @@ function process() {
       document.getElementById("pw1").focus();
     } else {
       // Select old password field
-      oldpwbox.removeAttribute("hidden");
-      msgBox.setAttribute("hidden", "true");
+      oldpwbox.hidden = false;
+      msgBox.hidden = true;
       oldpwbox.setAttribute("inited", "false");
       oldpwbox.focus();
     }