Bug 1929006 - [devtools] Delete unused devtools/client/accessibility/components/Button.js. r=devtools-reviewers,bomsy.

The components weren't used anywhere. We can also remove selectors and rules that were targetting
classes only used in this file.

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

devtools/client/accessibility/accessibility.css

@@ -82,22 +82,11 @@ body {
   width: var(--accessibility-full-length-minus-splitter);
 }
 
-.devtools-button,
-.toggle-button {
+.devtools-button {
   cursor: pointer;
   border: 1px solid transparent;
 }
 
-.mainFrame .devtools-button.devtools-throbber::before,
-.mainFrame .toggle-button.devtools-throbber::before {
-  /* Default for .devtools-throbber is set to 1em which is too big for the
-     devtools toolbar. */
-  height: 8px;
-  width: 8px;
-  margin-block-end: 1px;
-  margin-inline-end: 2px;
-}
-
 .split-box.horz {
   height: var(--accessibility-main-height);
 }
@@ -121,7 +110,7 @@ body {
   outline: none;
 }
 
-.devtools-button:focus > .btn-content:not(.devtools-throbber) {
+.devtools-button:focus > .btn-content {
   outline: 2px solid var(--accessibility-toolbar-focus);
   outline-offset: -2px;
   box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus-alpha30);
@@ -211,7 +200,6 @@ body {
   vertical-align: text-bottom;
 }
 
-.devtools-toolbar .badge.toggle-button[disabled],
 .tooltip-container .menuitem > .command[disabled] {
   opacity: 0.5;
 }
@@ -477,13 +465,6 @@ body {
   }
 }
 
-.badge.toggle-button {
-  color: var(--theme-body-color);
-  background-color: var(--badge-interactive-background-color);
-  border-color: transparent;
-}
-
-.devtools-toolbar .badge.toggle-button:focus,
 .devtools-toolbar .toolbar-menu-button:focus {
   outline: 2px solid var(--accessibility-toolbar-focus);
   outline-offset: -2px;
@@ -500,17 +481,6 @@ body {
   color: var(--badge-color);
 }
 
-.badge.toggle-button.checked {
-  background-color: var(--badge-active-background-color);
-  color: var(--theme-selection-color);
-}
-
-/* Avoid having a default dotted border on keyboard focus since we provide focus
-   styling*/
-.badge.toggle-button::-moz-focus-inner {
-  border: none;
-}
-
 /* Right Sidebar */
 .right-sidebar {
   display: flex;

devtools/client/accessibility/components/Button.js

@@ -1,112 +0,0 @@
-/* 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/. */
-
-"use strict";
-
-const {
-  Component,
-} = require("resource://devtools/client/shared/vendor/react.js");
-const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
-const {
-  button,
-  span,
-} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
-
-const defaultProps = {
-  disabled: false,
-  busy: false,
-  title: null,
-  children: null,
-  className: "",
-};
-
-/**
- * Button component that handles keyboard in an accessible way. When user
- * uses the mouse to hover/click on the button, there is no focus
- * highlighting. However if the user uses a keyboard to focus on the button,
- * it will have focus highlighting in the form of an outline.
- */
-class Button extends Component {
-  static get propTypes() {
-    return {
-      disabled: PropTypes.bool,
-      busy: PropTypes.bool,
-      title: PropTypes.string,
-      children: PropTypes.string,
-      className: PropTypes.string,
-    };
-  }
-
-  static get defaultProps() {
-    return defaultProps;
-  }
-
-  render() {
-    const className = [
-      ...this.props.className.split(" "),
-      "devtools-button",
-    ].join(" ");
-    const props = Object.assign({}, this.props, {
-      className,
-      "aria-busy": this.props.busy.toString(),
-      busy: this.props.busy.toString(),
-    });
-
-    const classList = ["btn-content"];
-    if (this.props.busy) {
-      classList.push("devtools-throbber");
-    }
-
-    return button(
-      props,
-      span(
-        {
-          className: classList.join(" "),
-          tabIndex: -1,
-        },
-        this.props.children
-      )
-    );
-  }
-}
-
-function ToggleButton(props) {
-  const {
-    active,
-    busy,
-    disabled,
-    label,
-    className,
-    onClick,
-    onKeyDown,
-    tooltip,
-  } = props;
-  const classList = [...className.split(" "), "toggle-button"];
-
-  if (active) {
-    classList.push("checked");
-  }
-
-  if (busy) {
-    classList.push("devtools-throbber");
-  }
-
-  return button(
-    {
-      disabled,
-      "aria-pressed": active === true,
-      "aria-busy": busy,
-      className: classList.join(" "),
-      onClick,
-      onKeyDown,
-      title: tooltip,
-    },
-    label
-  );
-}
-
-module.exports = {
-  Button,
-  ToggleButton,
-};

devtools/client/accessibility/components/moz.build

@@ -14,7 +14,6 @@ DevToolsModules(
     "AuditProgressOverlay.js",
     "Badge.js",
     "Badges.js",
-    "Button.js",
     "Check.js",
     "Checks.js",
     "ColorContrastAccessibility.js",

devtools/client/accessibility/test/browser/head.js

@@ -573,9 +573,7 @@ async function toggleRow(doc, rowNumber) {
   EventUtils.sendMouseEvent({ type: "click" }, twisty, win);
   AccessibilityUtils.resetEnv();
   await BrowserTestUtils.waitForCondition(
-    () =>
-      !twisty.classList.contains("devtools-throbber") &&
-      expected === twisty.classList.contains("open"),
+    () => expected === twisty.classList.contains("open"),
     "Twisty updated."
   );
 }