1 files changed, 380 insertions, 0 deletions
diff --git a/toolkit/mozapps/extensions/content/named-deck.js b/toolkit/mozapps/extensions/content/named-deck.js
new file mode 100644
index 0000000000..a5fdd59013
--- /dev/null
+++ b/toolkit/mozapps/extensions/content/named-deck.js
@@ -0,0 +1,380 @@
+/* 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/. */
+/* eslint max-len: ["error", 80] */
+
+"use strict";
+
+/**
+ * This element is for use with the <named-deck> element. Set the target
+ * <named-deck>'s ID in the "deck" attribute and the button's selected state
+ * will reflect the deck's state. When the button is clicked, it will set the
+ * view in the <named-deck> to the button's "name" attribute.
+ *
+ * The "tab" role will be added unless a different role is provided. Wrapping
+ * a set of these buttons in a <button-group> element will add the key handling
+ * for a tablist.
+ *
+ * NOTE: This does not observe changes to the "deck" or "name" attributes, so
+ * changing them likely won't work properly.
+ *
+ * <button is="named-deck-button" deck="pet-deck" name="dogs">Dogs</button>
+ * <named-deck id="pet-deck">
+ *   <p name="cats">I like cats.</p>
+ *   <p name="dogs">I like dogs.</p>
+ * </named-deck>
+ *
+ * let btn = document.querySelector('button[name="dogs"]');
+ * let deck = document.querySelector("named-deck");
+ * deck.selectedViewName == "cats";
+ * btn.selected == false; // Selected was pulled from the related deck.
+ * btn.click();
+ * deck.selectedViewName == "dogs";
+ * btn.selected == true; // Selected updated when view changed.
+ */
+class NamedDeckButton extends HTMLButtonElement {
+  connectedCallback() {
+    this.id = `${this.deckId}-button-${this.name}`;
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "tab");
+    }
+    this.setSelectedFromDeck();
+    this.addEventListener("click", this);
+    document.addEventListener("view-changed", this, { capture: true });
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this);
+    document.removeEventListener("view-changed", this, { capture: true });
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name == "selected") {
+      this.selected = newVal;
+    }
+  }
+
+  get deckId() {
+    return this.getAttribute("deck");
+  }
+
+  set deckId(val) {
+    this.setAttribute("deck", val);
+  }
+
+  get deck() {
+    return document.getElementById(this.deckId);
+  }
+
+  handleEvent(e) {
+    if (e.type == "view-changed" && e.target.id == this.deckId) {
+      this.setSelectedFromDeck();
+    } else if (e.type == "click") {
+      let { deck } = this;
+      if (deck) {
+        deck.selectedViewName = this.name;
+      }
+    }
+  }
+
+  get name() {
+    return this.getAttribute("name");
+  }
+
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+
+  set selected(val) {
+    if (this.selected != val) {
+      this.toggleAttribute("selected", val);
+    }
+    this.setAttribute("aria-selected", !!val);
+  }
+
+  setSelectedFromDeck() {
+    let { deck } = this;
+    this.selected = deck && deck.selectedViewName == this.name;
+    if (this.selected) {
+      this.dispatchEvent(
+        new CustomEvent("button-group:selected", { bubbles: true })
+      );
+    }
+  }
+}
+customElements.define("named-deck-button", NamedDeckButton, {
+  extends: "button",
+});
+
+class ButtonGroup extends HTMLElement {
+  static get observedAttributes() {
+    return ["orientation"];
+  }
+
+  connectedCallback() {
+    this.setAttribute("role", "tablist");
+
+    if (!this.observer) {
+      this.observer = new MutationObserver(changes => {
+        for (let change of changes) {
+          this.setChildAttributes(change.addedNodes);
+          for (let node of change.removedNodes) {
+            if (this.activeChild == node) {
+              // Ensure there's still an active child.
+              this.activeChild = this.firstElementChild;
+            }
+          }
+        }
+      });
+    }
+    this.observer.observe(this, { childList: true });
+
+    // Set the role and tabindex for the current children.
+    this.setChildAttributes(this.children);
+
+    // Try assigning the active child again, this will run through the checks
+    // to ensure it's still valid.
+    this.activeChild = this._activeChild;
+
+    this.addEventListener("button-group:selected", this);
+    this.addEventListener("keydown", this);
+    this.addEventListener("mousedown", this);
+    document.addEventListener("keypress", this);
+  }
+
+  disconnectedCallback() {
+    this.observer.disconnect();
+    this.removeEventListener("button-group:selected", this);
+    this.removeEventListener("keydown", this);
+    this.removeEventListener("mousedown", this);
+    document.removeEventListener("keypress", this);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name == "orientation") {
+      if (this.isVertical) {
+        this.setAttribute("aria-orientation", this.orientation);
+      } else {
+        this.removeAttribute("aria-orientation");
+      }
+    }
+  }
+
+  setChildAttributes(nodes) {
+    for (let node of nodes) {
+      if (node.nodeType == Node.ELEMENT_NODE && node != this.activeChild) {
+        node.setAttribute("tabindex", "-1");
+      }
+    }
+  }
+
+  // The activeChild is the child that can be focused with tab.
+  get activeChild() {
+    return this._activeChild;
+  }
+
+  set activeChild(node) {
+    let prevActiveChild = this._activeChild;
+    let newActiveChild;
+
+    if (node && this.contains(node)) {
+      newActiveChild = node;
+    } else {
+      newActiveChild = this.firstElementChild;
+    }
+
+    this._activeChild = newActiveChild;
+
+    if (newActiveChild) {
+      newActiveChild.setAttribute("tabindex", "0");
+    }
+
+    if (prevActiveChild && prevActiveChild != newActiveChild) {
+      prevActiveChild.setAttribute("tabindex", "-1");
+    }
+  }
+
+  get isVertical() {
+    return this.orientation == "vertical";
+  }
+
+  get orientation() {
+    return this.getAttribute("orientation") == "vertical"
+      ? "vertical"
+      : "horizontal";
+  }
+
+  set orientation(val) {
+    if (val == "vertical") {
+      this.setAttribute("orientation", val);
+    } else {
+      this.removeAttribute("orientation");
+    }
+  }
+
+  _navigationKeys() {
+    if (this.isVertical) {
+      return {
+        previousKey: "ArrowUp",
+        nextKey: "ArrowDown",
+      };
+    }
+    if (document.dir == "rtl") {
+      return {
+        previousKey: "ArrowRight",
+        nextKey: "ArrowLeft",
+      };
+    }
+    return {
+      previousKey: "ArrowLeft",
+      nextKey: "ArrowRight",
+    };
+  }
+
+  handleEvent(e) {
+    let { previousKey, nextKey } = this._navigationKeys();
+    if (e.type == "keydown" && (e.key == previousKey || e.key == nextKey)) {
+      this.setAttribute("last-input-type", "keyboard");
+      e.preventDefault();
+      let oldFocus = this.activeChild;
+      this.walker.currentNode = oldFocus;
+      let newFocus;
+      if (e.key == previousKey) {
+        newFocus = this.walker.previousNode();
+      } else {
+        newFocus = this.walker.nextNode();
+      }
+      if (newFocus) {
+        this.activeChild = newFocus;
+        this.dispatchEvent(new CustomEvent("button-group:key-selected"));
+      }
+    } else if (e.type == "button-group:selected") {
+      this.activeChild = e.target;
+    } else if (e.type == "mousedown") {
+      this.setAttribute("last-input-type", "mouse");
+    } else if (e.type == "keypress" && e.key == "Tab") {
+      this.setAttribute("last-input-type", "keyboard");
+    }
+  }
+
+  get walker() {
+    if (!this._walker) {
+      this._walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: node => {
+          if (node.hidden || node.disabled) {
+            return NodeFilter.FILTER_REJECT;
+          }
+          node.focus();
+          return document.activeElement == node
+            ? NodeFilter.FILTER_ACCEPT
+            : NodeFilter.FILTER_REJECT;
+        },
+      });
+    }
+    return this._walker;
+  }
+}
+customElements.define("button-group", ButtonGroup);
+
+/**
+ * A deck that is indexed by the "name" attribute of its children. The
+ * <named-deck-button> element is a companion element that can update its state
+ * and change the view of a <named-deck>.
+ *
+ * When the deck is connected it will set the first child as the selected view
+ * if a view is not already selected.
+ *
+ * The deck is implemented using a named slot. Setting a slot directly on a
+ * child element of the deck is not supported.
+ *
+ * You can get or set the selected view by name with the `selectedViewName`
+ * property or by setting the "selected-view" attribute.
+ *
+ * <named-deck>
+ *   <section name="cats">Some info about cats.</section>
+ *   <section name="dogs">Some dog stuff.</section>
+ * </named-deck>
+ *
+ * let deck = document.querySelector("named-deck");
+ * deck.selectedViewName == "cats"; // Cat info is shown.
+ * deck.selectedViewName = "dogs";
+ * deck.selectedViewName == "dogs"; // Dog stuff is shown.
+ * deck.setAttribute("selected-view", "cats");
+ * deck.selectedViewName == "cats"; // Cat info is shown.
+ */
+class NamedDeck extends HTMLElement {
+  static get observedAttributes() {
+    return ["selected-view"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+
+    // Create a slot for the visible content.
+    let selectedSlot = document.createElement("slot");
+    selectedSlot.setAttribute("name", "selected");
+    this.shadowRoot.appendChild(selectedSlot);
+
+    this.observer = new MutationObserver(() => {
+      this._setSelectedViewAttributes();
+    });
+  }
+
+  connectedCallback() {
+    if (this.selectedViewName) {
+      // Make sure the selected view is shown.
+      this._setSelectedViewAttributes();
+    } else {
+      // If there's no selected view, default to the first.
+      let firstView = this.firstElementChild;
+      if (firstView) {
+        // This will trigger showing the first view.
+        this.selectedViewName = firstView.getAttribute("name");
+      }
+    }
+    this.observer.observe(this, { childList: true });
+  }
+
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    if (attr == "selected-view" && oldVal != newVal) {
+      // Update the slot attribute on the views.
+      this._setSelectedViewAttributes();
+
+      // Notify that the selected view changed.
+      this.dispatchEvent(new CustomEvent("view-changed"));
+    }
+  }
+
+  get selectedViewName() {
+    return this.getAttribute("selected-view");
+  }
+
+  set selectedViewName(name) {
+    this.setAttribute("selected-view", name);
+  }
+
+  /**
+   * Set the slot attribute on all of the views to ensure only the selected view
+   * is shown.
+   */
+  _setSelectedViewAttributes() {
+    let { selectedViewName } = this;
+    for (let view of this.children) {
+      let name = view.getAttribute("name");
+      view.setAttribute("aria-labelledby", `${this.id}-button-${name}`);
+      view.setAttribute("role", "tabpanel");
+
+      if (name === selectedViewName) {
+        view.slot = "selected";
+      } else {
+        view.slot = "";
+      }
+    }
+  }
+}
+customElements.define("named-deck", NamedDeck);