Bug 1691314 - Use DOM hidden property instead of attribute methods in devtools/client. r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D104339
2021-02-09 17:32:07 +00:00 · 2021-02-09 17:32:07 +00:00 · 1cc2986424
--- a/devtools/client/framework/browser-toolbox/window.css
+++ b/devtools/client/framework/browser-toolbox/window.css
@ -28,13 +28,6 @@ body {
  background-color: Field;
 }

-/**
- * Helper for hiding/showing the status message.
- */
-#status-message-container[hidden="true"] {
-  display: none;
-}
-
 #status-message-title {
  font-size: 14px;
  font-weight: bold;
--- a/devtools/client/framework/browser-toolbox/window.html
+++ b/devtools/client/framework/browser-toolbox/window.html
@ -15,7 +15,7 @@
    <script src="chrome://browser/content/utilityOverlay.js"></script>
  </head>
  <body>
-    <div id="status-message-container" hidden="true">
+    <div id="status-message-container" hidden>
      <div id="status-message-title"></div>
      <pre id="status-message"></pre>
    </div>
--- a/devtools/client/framework/browser-toolbox/window.js
+++ b/devtools/client/framework/browser-toolbox/window.js
@ -51,14 +51,7 @@ function appendStatusMessage(msg) {
 }

 function toggleStatusMessage(visible = true) {
-  const statusMessageContainer = document.getElementById(
-    "status-message-container"
-  );
-  if (visible) {
-    statusMessageContainer.removeAttribute("hidden");
-  } else {
-    statusMessageContainer.setAttribute("hidden", "true");
-  }
+  document.getElementById("status-message-container").hidden = !visible;
 }

 function revealStatusMessage() {
--- a/devtools/client/framework/devtools-browser.js
+++ b/devtools/client/framework/devtools-browser.js
@ -128,12 +128,11 @@ var gDevToolsBrowser = (exports.gDevToolsBrowser = {

    function toggleMenuItem(id, isEnabled) {
      const cmd = doc.getElementById(id);
+      cmd.hidden = !isEnabled;
      if (isEnabled) {
        cmd.removeAttribute("disabled");
-        cmd.removeAttribute("hidden");
      } else {
        cmd.setAttribute("disabled", "true");
-        cmd.setAttribute("hidden", "true");
      }
    }

--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@ -1644,18 +1644,13 @@ Toolbox.prototype = {
    const openedConsolePanel = this.currentToolId === "webconsole";

    if (openedConsolePanel) {
-      deck.setAttribute("collapsed", "true");
-      splitter.setAttribute("hidden", "true");
-      webconsolePanel.removeAttribute("collapsed");
+      deck.collapsed = true;
+      splitter.hidden = true;
+      webconsolePanel.collapsed = false;
    } else {
-      deck.removeAttribute("collapsed");
-      if (this.splitConsole) {
-        webconsolePanel.removeAttribute("collapsed");
-        splitter.removeAttribute("hidden");
-      } else {
-        webconsolePanel.setAttribute("collapsed", "true");
-        splitter.setAttribute("hidden", "true");
-      }
+      deck.collapsed = false;
+      splitter.hidden = !this.splitConsole;
+      webconsolePanel.collapsed = !this.splitConsole;
    }
  },

--- a/devtools/client/inspector/index.xhtml
+++ b/devtools/client/inspector/index.xhtml
@ -55,9 +55,9 @@
          <input id="inspector-searchbox" class="devtools-searchinput"
                 type="search"
                 data-localization="placeholder=inspectorSearchHTML.label3"/>
-          <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" hidden="true" tabindex="-1"></button>
+          <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" hidden="" tabindex="-1"></button>
        </div>
-        <div id="inspector-searchlabel-container" hidden="true">
+        <div id="inspector-searchlabel-container" hidden="">
          <div class="devtools-separator"></div>
          <span id="inspector-searchlabel"></span>
        </div>
@ -80,12 +80,12 @@

    <!-- Split Sidebar Container -->
    <div id="inspector-rules-container">
-      <div id="inspector-rules-sidebar" hidden="true"></div>
+      <div id="inspector-rules-sidebar" hidden=""></div>
    </div>

    <!-- Sidebar Container -->
    <div id="inspector-sidebar-container">
-      <div id="inspector-sidebar" hidden="true"></div>
+      <div id="inspector-sidebar" hidden=""></div>
    </div>

    <!-- Sidebar Panel Definitions -->
@ -105,14 +105,14 @@
              <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
              <button id="class-panel-toggle" data-localization="title=inspector.classPanel.toggleClass.tooltip" class="devtools-button"></button>
              <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
-              <button id="color-scheme-simulation-toggle" data-localization="title=inspector.colorSchemeSimulation.tooltip" class="devtools-button" hidden="true"></button>
-              <button id="print-simulation-toggle" data-localization="title=inspector.printSimulation.tooltip" class="devtools-button" hidden="true"></button>
+              <button id="color-scheme-simulation-toggle" data-localization="title=inspector.colorSchemeSimulation.tooltip" class="devtools-button" hidden=""></button>
+              <button id="print-simulation-toggle" data-localization="title=inspector.printSimulation.tooltip" class="devtools-button" hidden=""></button>
            </div>
          </div>
-          <div id="pseudo-class-panel" class="theme-toolbar ruleview-reveal-panel" hidden="true">
+          <div id="pseudo-class-panel" class="theme-toolbar ruleview-reveal-panel" hidden="">
            <!-- Populated with checkbox inputs once the Rules view is instantiated -->
          </div>
-          <div id="ruleview-class-panel" class="theme-toolbar ruleview-reveal-panel" hidden="true"></div>
+          <div id="ruleview-class-panel" class="theme-toolbar ruleview-reveal-panel" hidden=""></div>
        </div>

        <div id="ruleview-container" class="ruleview" role="document">
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@ -975,12 +975,12 @@ TextPropertyEditor.prototype = {
      this.expander.removeAttribute("open");
      this.computed.removeAttribute("filter-open");
      this.computed.removeAttribute("user-open");
-      this.shorthandOverridden.removeAttribute("hidden");
+      this.shorthandOverridden.hidden = false;
      this._populateShorthandOverridden();
    } else {
      this.expander.setAttribute("open", "true");
      this.computed.setAttribute("user-open", "");
-      this.shorthandOverridden.setAttribute("hidden", "true");
+      this.shorthandOverridden.hidden = true;
      this._populateComputed();
    }

--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@ -282,7 +282,7 @@ ToolSidebar.prototype = {
   *         The sidebar tab id to select.
   */
  show: function(id) {
-    this._tabbox.removeAttribute("hidden");
+    this._tabbox.hidden = false;

    // If an id is given, select the corresponding sidebar tab.
    if (id) {
@ -296,7 +296,7 @@ ToolSidebar.prototype = {
   * Show the sidebar.
   */
  hide: function() {
-    this._tabbox.setAttribute("hidden", "true");
+    this._tabbox.hidden = true;

    this.emit("hide");
  },
--- a/devtools/client/performance-new/popup/panel.jsm.js
+++ b/devtools/client/performance-new/popup/panel.jsm.js
@ -160,25 +160,25 @@ function createViewControllers(state, elements) {

      switch (profilerState) {
        case "active":
-          elements.inactive.setAttribute("hidden", "true");
-          elements.active.setAttribute("hidden", "false");
-          elements.settingsSection.setAttribute("hidden", "true");
-          elements.contentRecording.setAttribute("hidden", "false");
-          elements.locked.setAttribute("hidden", "true");
+          elements.inactive.hidden = true;
+          elements.active.hidden = false;
+          elements.settingsSection.hidden = true;
+          elements.contentRecording.hidden = false;
+          elements.locked.hidden = true;
          break;
        case "inactive":
-          elements.inactive.setAttribute("hidden", "false");
-          elements.active.setAttribute("hidden", "true");
-          elements.settingsSection.setAttribute("hidden", "false");
-          elements.contentRecording.setAttribute("hidden", "true");
-          elements.locked.setAttribute("hidden", "true");
+          elements.inactive.hidden = false;
+          elements.active.hidden = true;
+          elements.settingsSection.hidden = false;
+          elements.contentRecording.hidden = true;
+          elements.locked.hidden = true;
          break;
        case "locked": {
-          elements.inactive.setAttribute("hidden", "true");
-          elements.active.setAttribute("hidden", "true");
-          elements.settingsSection.setAttribute("hidden", "true");
-          elements.contentRecording.setAttribute("hidden", "true");
-          elements.locked.setAttribute("hidden", "false");
+          elements.inactive.hidden = true;
+          elements.active.hidden = true;
+          elements.settingsSection.hidden = true;
+          elements.contentRecording.hidden = true;
+          elements.locked.hidden = false;
          // This works around XULElement height issues.
          const { height } = elements.locked.getBoundingClientRect();
          elements.locked.style.height = `${height}px`;
--- a/devtools/client/shared/widgets/LineGraphWidget.js
+++ b/devtools/client/shared/widgets/LineGraphWidget.js
@ -389,7 +389,7 @@ LineGraphWidget.prototype = extend(AbstractCanvasGraph.prototype, {
  _createGutter: function() {
    const gutter = this._document.createElementNS(HTML_NS, "div");
    gutter.className = "line-graph-widget-gutter";
-    gutter.setAttribute("hidden", true);
+    gutter.hidden = true;
    this._container.appendChild(gutter);

    return gutter;
@ -417,7 +417,7 @@ LineGraphWidget.prototype = extend(AbstractCanvasGraph.prototype, {
    tooltip.className = "line-graph-widget-tooltip";
    tooltip.setAttribute("type", type);
    tooltip.setAttribute("arrow", arrow);
-    tooltip.setAttribute("hidden", true);
+    tooltip.hidden = true;

    const infoNode = this._document.createElementNS(HTML_NS, "span");
    infoNode.textContent = info;
--- a/devtools/client/shared/widgets/TableWidget.js
+++ b/devtools/client/shared/widgets/TableWidget.js
@ -724,7 +724,7 @@ TableWidget.prototype = {
      menuitem.setAttribute("label", column.header.getAttribute("value"));
      menuitem.setAttribute("data-id", column.id);
      menuitem.setAttribute("type", "checkbox");
-      menuitem.setAttribute("checked", !column.wrapper.getAttribute("hidden"));
+      menuitem.setAttribute("checked", !column.wrapper.hidden);
      if (column.id == this.uniqueId) {
        menuitem.setAttribute("disabled", "true");
      }
@ -1164,7 +1164,7 @@ Column.prototype = {
   * Returns a boolean indicating whether the column is hidden.
   */
  get hidden() {
-    return this.wrapper.hasAttribute("hidden");
+    return this.wrapper.hidden;
  },

  /**
@ -1435,16 +1435,16 @@ Column.prototype = {
    if (arguments.length == 0) {
      // Act like a toggling method when called with no params
      id = this.id;
-      checked = this.wrapper.hasAttribute("hidden");
+      checked = this.wrapper.hidden;
    }
    if (id != this.id) {
      return;
    }
    if (checked) {
-      this.wrapper.removeAttribute("hidden");
+      this.wrapper.hidden = false;
      this.tbody.insertBefore(this.splitter, this.wrapper.nextSibling);
    } else {
-      this.wrapper.setAttribute("hidden", "true");
+      this.wrapper.hidden = true;
      this.splitter.remove();
    }
  },
@ -1657,15 +1657,11 @@ Cell.prototype = {
  },

  get hidden() {
-    return this.label.hasAttribute("hidden");
+    return this.label.hidden;
  },

  set hidden(value) {
-    if (value) {
-      this.label.setAttribute("hidden", "hidden");
-    } else {
-      this.label.removeAttribute("hidden");
-    }
+    this.label.hidden = value;
  },

  set value(value) {
--- a/devtools/client/storage/index.xhtml
+++ b/devtools/client/storage/index.xhtml
@ -57,7 +57,7 @@
                class="devtools-button add-button"></html:button>
        <html:button id="refresh-button"
                class="devtools-button refresh-button"></html:button>
-        <html:button class="devtools-button sidebar-toggle" hidden="true"></html:button>
+        <html:button class="devtools-button sidebar-toggle" hidden=""></html:button>
      </hbox>
      <vbox id="storage-table" class="theme-sidebar" flex="1"/>
    </vbox>
--- a/devtools/client/styleeditor/StyleEditorUI.jsm
+++ b/devtools/client/styleeditor/StyleEditorUI.jsm
@ -530,11 +530,8 @@ StyleEditorUI.prototype = {
   * below the list): hide the context menu
   */
  _updateContextMenuItems: function() {
-    this._openLinkNewTabItem.setAttribute(
-      "hidden",
-      !this._contextMenuStyleSheet
-    );
-    this._copyUrlItem.setAttribute("hidden", !this._contextMenuStyleSheet);
+    this._openLinkNewTabItem.hidden = !this._contextMenuStyleSheet;
+    this._copyUrlItem.hidden = !this._contextMenuStyleSheet;

    if (this._contextMenuStyleSheet) {
      this._openLinkNewTabItem.setAttribute(
--- a/devtools/client/styleeditor/index.xhtml
+++ b/devtools/client/styleeditor/index.xhtml
@ -123,7 +123,7 @@
    <splitter class="devtools-side-splitter devtools-invisible-splitter"/>
    <box class="splitview-side-details devtools-main-content"/>

-    <html:div id="splitview-templates" hidden="true">
+    <html:div id="splitview-templates" hidden="">
      <html:li id="splitview-tpl-summary-stylesheet" tabindex="0">
        <label class="stylesheet-enabled" tabindex="0"
          data-l10n-id="styleeditor-visibility-toggle"></label>
--- a/devtools/client/styleeditor/test/browser_styleeditor_copyurl.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_copyurl.js
@ -30,11 +30,7 @@ add_task(async function() {
  );
  await onContextMenuShown;

-  is(
-    ui._copyUrlItem.getAttribute("hidden"),
-    "false",
-    "Copy URL menu item is showing."
-  );
+  ok(!ui._copyUrlItem.hidden, "Copy URL menu item should be showing.");

  info(
    "Click on Copy URL menu item and wait for the URL to be copied to the clipboard."
--- a/devtools/client/styleeditor/test/browser_styleeditor_opentab.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_opentab.js
@ -16,11 +16,7 @@ add_task(async function() {
    "false",
    "The menu item is not disabled"
  );
-  is(
-    ui._openLinkNewTabItem.getAttribute("hidden"),
-    "false",
-    "The menu item is not hidden"
-  );
+  ok(!ui._openLinkNewTabItem.hidden, "The menu item is not hidden");

  const url =
    "https://example.com/browser/devtools/client/styleeditor/test/" +
@ -52,18 +48,10 @@ add_task(async function() {
    "true",
    "The menu item is disabled"
  );
-  is(
-    ui._openLinkNewTabItem.getAttribute("hidden"),
-    "false",
-    "The menu item is not hidden"
-  );
+  ok(!ui._openLinkNewTabItem.hidden, "The menu item should not be hidden");

  await rightClickNoStyleSheet(ui);
-  is(
-    ui._openLinkNewTabItem.getAttribute("hidden"),
-    "true",
-    "The menu item is not hidden"
-  );
+  ok(ui._openLinkNewTabItem.hidden, "The menu item should be hidden");
 });

 function onPopupShow(contextMenu) {