Adding upstream version 115.7.0esr.upstream/115.7.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

15 files changed, 460 insertions, 0 deletions

diff --git a/devtools/client/debugger/src/components/shared/Button/CloseButton.js b/devtools/client/debugger/src/components/shared/Button/CloseButton.js
new file mode 100644
index 0000000000..2450b4aae2
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/CloseButton.js
@@ -0,0 +1,30 @@
+/* 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/>. */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import AccessibleImage from "../AccessibleImage";
+
+import "./styles/CloseButton.css";
+
+function CloseButton({ handleClick, buttonClass, tooltip }) {
+  return (
+    <button
+      className={buttonClass ? `close-btn ${buttonClass}` : "close-btn"}
+      onClick={handleClick}
+      title={tooltip}
+    >
+      <AccessibleImage className="close" />
+    </button>
+  );
+}
+
+CloseButton.propTypes = {
+  buttonClass: PropTypes.string,
+  handleClick: PropTypes.func.isRequired,
+  tooltip: PropTypes.string,
+};
+
+export default CloseButton;
diff --git a/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js
new file mode 100644
index 0000000000..f1579b6f7a
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js
@@ -0,0 +1,56 @@
+/* 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/>. */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import AccessibleImage from "../AccessibleImage";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+import "./styles/CommandBarButton.css";
+
+export function debugBtn(
+  onClick,
+  type,
+  className,
+  tooltip,
+  disabled = false,
+  ariaPressed = false
+) {
+  return (
+    <CommandBarButton
+      className={classnames(type, className)}
+      disabled={disabled}
+      key={type}
+      onClick={onClick}
+      pressed={ariaPressed}
+      title={tooltip}
+    >
+      <AccessibleImage className={type} />
+    </CommandBarButton>
+  );
+}
+
+const CommandBarButton = props => {
+  const { children, className, pressed = false, ...rest } = props;
+
+  return (
+    <button
+      aria-pressed={pressed}
+      className={classnames("command-bar-button", className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+CommandBarButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string.isRequired,
+  pressed: PropTypes.bool,
+};
+
+export default CommandBarButton;
diff --git a/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js b/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js
new file mode 100644
index 0000000000..ba2f20e882
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js
@@ -0,0 +1,61 @@
+/* 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/>. */
+
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import AccessibleImage from "../AccessibleImage";
+import { CommandBarButton } from "./";
+
+const classnames = require("devtools/client/shared/classnames.js");
+
+import "./styles/PaneToggleButton.css";
+
+class PaneToggleButton extends PureComponent {
+  static defaultProps = {
+    horizontal: false,
+    position: "start",
+  };
+
+  static get propTypes() {
+    return {
+      collapsed: PropTypes.bool.isRequired,
+      handleClick: PropTypes.func.isRequired,
+      horizontal: PropTypes.bool.isRequired,
+      position: PropTypes.oneOf(["start", "end"]).isRequired,
+    };
+  }
+
+  label(position, collapsed) {
+    switch (position) {
+      case "start":
+        return L10N.getStr(collapsed ? "expandSources" : "collapseSources");
+      case "end":
+        return L10N.getStr(
+          collapsed ? "expandBreakpoints" : "collapseBreakpoints"
+        );
+    }
+    return null;
+  }
+
+  render() {
+    const { position, collapsed, horizontal, handleClick } = this.props;
+
+    return (
+      <CommandBarButton
+        className={classnames("toggle-button", position, {
+          collapsed,
+          vertical: !horizontal,
+        })}
+        onClick={() => handleClick(position, !collapsed)}
+        title={this.label(position, collapsed)}
+      >
+        <AccessibleImage
+          className={collapsed ? "pane-expand" : "pane-collapse"}
+        />
+      </CommandBarButton>
+    );
+  }
+}
+
+export default PaneToggleButton;
diff --git a/devtools/client/debugger/src/components/shared/Button/index.js b/devtools/client/debugger/src/components/shared/Button/index.js
new file mode 100644
index 0000000000..df7976ba90
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/index.js
@@ -0,0 +1,9 @@
+/* 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/>. */
+
+import CloseButton from "./CloseButton";
+import CommandBarButton, { debugBtn } from "./CommandBarButton";
+import PaneToggleButton from "./PaneToggleButton";
+
+export { CloseButton, CommandBarButton, debugBtn, PaneToggleButton };
diff --git a/devtools/client/debugger/src/components/shared/Button/moz.build b/devtools/client/debugger/src/components/shared/Button/moz.build
new file mode 100644
index 0000000000..c6e652d5dc
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/moz.build
@@ -0,0 +1,15 @@
+# vim: set filetype=python:
+# 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/.
+
+DIRS += [
+    "styles",
+]
+
+CompiledModules(
+    "CloseButton.js",
+    "CommandBarButton.js",
+    "index.js",
+    "PaneToggleButton.js",
+)
diff --git a/devtools/client/debugger/src/components/shared/Button/styles/CloseButton.css b/devtools/client/debugger/src/components/shared/Button/styles/CloseButton.css
new file mode 100644
index 0000000000..b0093ff4de
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/styles/CloseButton.css
@@ -0,0 +1,36 @@
+/* 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/>. */
+
+.close-btn {
+  width: 16px;
+  height: 16px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  padding: 1px;
+  color: var(--theme-icon-color);
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+.close-btn .img {
+  display: block;
+  width: 12px;
+  height: 12px;
+  /* inherit the button's text color for the icon's color */
+  background-color: currentColor;
+}
+
+.close-btn.big {
+  width: 20px;
+  height: 20px;
+}
+
+.close-btn.big .img {
+  width: 16px;
+  height: 16px;
+}
diff --git a/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css b/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css
new file mode 100644
index 0000000000..5b03bca8ec
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css
@@ -0,0 +1,61 @@
+/* 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/>. */
+
+.command-bar-button {
+  appearance: none;
+  background: transparent;
+  border: none;
+  display: inline-block;
+  text-align: center;
+  position: relative;
+  padding: 0px 5px;
+  fill: currentColor;
+  min-width: 30px;
+}
+
+.command-bar-button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.command-bar-button:not(.disabled):hover,
+.devtools-button.debugger-settings-menu-button:empty:enabled:not([aria-expanded="true"]):hover {
+  background: var(--theme-toolbar-background-hover);
+}
+
+.theme-dark .command-bar-button:not(.disabled):hover,
+.devtools-button.debugger-settings-menu-button:empty:enabled:not([aria-expanded="true"]):hover {
+  background: var(--theme-toolbar-hover);
+}
+
+:root.theme-dark .command-bar-button {
+  color: var(--theme-body-color);
+}
+
+.command-bar-button > * {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/**
+ * Settings icon and menu
+ */
+.devtools-button.debugger-settings-menu-button {
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.devtools-button.debugger-settings-menu-button::before {
+  background-image: url("chrome://devtools/skin/images/settings.svg");
+}
+
+.devtools-button.debugger-trace-menu-button::before {
+  background-image: url(chrome://devtools/content/debugger/images/trace.svg);
+}
+.devtools-button.debugger-trace-menu-button.active::before {
+  fill: var(--theme-icon-checked-color);
+}
diff --git a/devtools/client/debugger/src/components/shared/Button/styles/PaneToggleButton.css b/devtools/client/debugger/src/components/shared/Button/styles/PaneToggleButton.css
new file mode 100644
index 0000000000..d8a2495408
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/styles/PaneToggleButton.css
@@ -0,0 +1,29 @@
+/* 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/>. */
+
+.toggle-button {
+  padding: 4px 6px;
+}
+
+.toggle-button .img {
+  vertical-align: middle;
+}
+
+.toggle-button.end {
+  margin-inline-end: 0px;
+  margin-inline-start: auto;
+}
+
+.toggle-button.start {
+  margin-inline-start: 0px;
+}
+
+html[dir="rtl"] .toggle-button.start .img,
+html[dir="ltr"] .toggle-button.end:not(.vertical) .img {
+  transform: scaleX(-1);
+}
+
+.toggle-button.end.vertical .img {
+  transform: rotate(-90deg);
+}
diff --git a/devtools/client/debugger/src/components/shared/Button/styles/moz.build b/devtools/client/debugger/src/components/shared/Button/styles/moz.build
new file mode 100644
index 0000000000..7d80140dbe
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/styles/moz.build
@@ -0,0 +1,8 @@
+# vim: set filetype=python:
+# 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/.
+
+DIRS += []
+
+CompiledModules()
diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js
new file mode 100644
index 0000000000..cb426ddada
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js
@@ -0,0 +1,24 @@
+/* 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/>. */
+
+import React from "react";
+import { shallow } from "enzyme";
+import { CloseButton } from "../";
+
+describe("CloseButton", () => {
+  it("renders with tooltip", () => {
+    const tooltip = "testTooltip";
+    const wrapper = shallow(
+      <CloseButton tooltip={tooltip} handleClick={() => {}} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("handles click event", () => {
+    const handleClickSpy = jest.fn();
+    const wrapper = shallow(<CloseButton handleClick={handleClickSpy} />);
+    wrapper.simulate("click");
+    expect(handleClickSpy).toHaveBeenCalled();
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js
new file mode 100644
index 0000000000..1da7dc9fed
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js
@@ -0,0 +1,36 @@
+/* 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/>. */
+
+import React from "react";
+import { shallow } from "enzyme";
+import { CommandBarButton, debugBtn } from "../";
+
+describe("CommandBarButton", () => {
+  it("renders", () => {
+    const wrapper = shallow(<CommandBarButton children={[]} className={""} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders children", () => {
+    const children = [1, 2, 3, 4];
+    const wrapper = shallow(
+      <CommandBarButton children={children} className={""} />
+    );
+    expect(wrapper.find("button").children()).toHaveLength(4);
+  });
+});
+
+describe("debugBtn", () => {
+  it("renders", () => {
+    const wrapper = shallow(debugBtn());
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("handles onClick", () => {
+    const onClickSpy = jest.fn();
+    const wrapper = shallow(debugBtn(onClickSpy));
+    wrapper.simulate("click");
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js
new file mode 100644
index 0000000000..59fbe11fc6
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js
@@ -0,0 +1,51 @@
+/* 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/>. */
+
+import React from "react";
+import { shallow } from "enzyme";
+import { PaneToggleButton } from "../";
+
+describe("PaneToggleButton", () => {
+  const handleClickSpy = jest.fn();
+  const wrapper = shallow(
+    <PaneToggleButton
+      handleClick={handleClickSpy}
+      collapsed={false}
+      position="start"
+    />
+  );
+
+  it("renders default", () => {
+    expect(wrapper.hasClass("vertical")).toBe(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("toggles horizontal class", () => {
+    wrapper.setProps({ horizontal: true });
+    expect(wrapper.hasClass("vertical")).toBe(false);
+  });
+
+  it("toggles collapsed class", () => {
+    wrapper.setProps({ collapsed: true });
+    expect(wrapper.hasClass("collapsed")).toBe(true);
+  });
+
+  it("toggles start position", () => {
+    wrapper.setProps({ position: "start" });
+    expect(wrapper.hasClass("start")).toBe(true);
+  });
+
+  it("toggles end position ", () => {
+    wrapper.setProps({ position: "end" });
+    expect(wrapper.hasClass("end")).toBe(true);
+  });
+
+  it("handleClick is called", () => {
+    const position = "end";
+    const collapsed = false;
+    wrapper.setProps({ position, collapsed });
+    wrapper.simulate("click");
+    expect(handleClickSpy).toHaveBeenCalledWith(position, true);
+  });
+});
diff --git a/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/CloseButton.spec.js.snap b/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/CloseButton.spec.js.snap
new file mode 100644
index 0000000000..d0a0cb9967
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/CloseButton.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CloseButton renders with tooltip 1`] = `
+<button
+  className="close-btn"
+  onClick={[Function]}
+  title="testTooltip"
+>
+  <AccessibleImage
+    className="close"
+  />
+</button>
+`;
diff --git a/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/CommandBarButton.spec.js.snap b/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/CommandBarButton.spec.js.snap
new file mode 100644
index 0000000000..cebcb5892c
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/CommandBarButton.spec.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommandBarButton renders 1`] = `
+<button
+  aria-pressed={false}
+  className="command-bar-button"
+/>
+`;
+
+exports[`debugBtn renders 1`] = `
+<button
+  aria-pressed={false}
+  className="command-bar-button"
+  disabled={false}
+>
+  <AccessibleImage />
+</button>
+`;
diff --git a/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/PaneToggleButton.spec.js.snap b/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/PaneToggleButton.spec.js.snap
new file mode 100644
index 0000000000..86067066a6
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Button/tests/__snapshots__/PaneToggleButton.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaneToggleButton renders default 1`] = `
+<CommandBarButton
+  className="toggle-button start vertical"
+  onClick={[Function]}
+  title="Collapse Sources and Outline panes"
+>
+  <AccessibleImage
+    className="pane-collapse"
+  />
+</CommandBarButton>
+`;