Adding upstream version 115.8.0esr.upstream/115.8.0esr

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

7 files changed, 340 insertions, 0 deletions

diff --git a/devtools/client/application/src/components/routing/PageSwitcher.css b/devtools/client/application/src/components/routing/PageSwitcher.css
new file mode 100644
index 0000000000..e713adb1bf
--- /dev/null
+++ b/devtools/client/application/src/components/routing/PageSwitcher.css
@@ -0,0 +1,45 @@
+/* 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/. */
+
+
+/*
+ * Page container for worker + manifest views
+ */
+
+.app-page {
+  padding: calc(var(--base-unit) * 3) calc(var(--base-unit) * 8);
+  user-select: none;
+  overflow-y: auto;
+}
+
+.app-page--empty {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--body-10-font-size);
+  color: var(--theme-toolbar-color);
+}
+
+.app-page__title {
+  font-size: var(--title-20-font-size);
+  font-weight: var(--title-20-font-weight);
+  margin: 0;
+}
+
+.app-page__icon-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-column-gap: calc(var(--base-unit) * 4);
+}
+
+.app-page__icon {
+  width: calc(var(--base-unit) * 10);
+  height: calc(var(--base-unit) * 10);
+
+  fill: var(--dimmed-icon-color);
+  -moz-context-properties: fill;
+
+  /* alignment fix for text to compensate for low baseline */
+  margin-block-start: var(--base-unit);
+}
diff --git a/devtools/client/application/src/components/routing/PageSwitcher.js b/devtools/client/application/src/components/routing/PageSwitcher.js
new file mode 100644
index 0000000000..9305744da9
--- /dev/null
+++ b/devtools/client/application/src/components/routing/PageSwitcher.js
@@ -0,0 +1,59 @@
+/* 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 {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const {
+  PAGE_TYPES,
+} = require("resource://devtools/client/application/src/constants.js");
+const Types = require("resource://devtools/client/application/src/types/index.js");
+
+const ManifestPage = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestPage.js")
+);
+const WorkersPage = createFactory(
+  require("resource://devtools/client/application/src/components/service-workers/WorkersPage.js")
+);
+
+class PageSwitcher extends PureComponent {
+  static get propTypes() {
+    return {
+      page: Types.page.isRequired,
+    };
+  }
+
+  render() {
+    let component = null;
+
+    switch (this.props.page) {
+      case PAGE_TYPES.MANIFEST:
+        component = ManifestPage({});
+        break;
+      case PAGE_TYPES.SERVICE_WORKERS:
+        component = WorkersPage({});
+        break;
+      default:
+        console.error("Unknown path. Can not direct to a page.");
+        return null;
+    }
+
+    return component;
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    page: state.ui.selectedPage,
+  };
+}
+
+module.exports = connect(mapStateToProps)(PageSwitcher);
diff --git a/devtools/client/application/src/components/routing/Sidebar.css b/devtools/client/application/src/components/routing/Sidebar.css
new file mode 100644
index 0000000000..872f5cca86
--- /dev/null
+++ b/devtools/client/application/src/components/routing/Sidebar.css
@@ -0,0 +1,33 @@
+/* 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/. */
+
+
+/*
+ * Sidebar list container
+ */
+.sidebar {
+	background-color: var(--bg-color);
+}
+
+/* vertical layout -> the sidebar is the first row */
+@media(max-width: 700px) {
+	.sidebar {
+		border-block-end: 1px solid var(--separator-color);
+	}
+}
+
+/* wide layout -> the sidebar occupies a whole column on the side */
+@media(min-width: 701px) {
+	.sidebar {
+		min-height: 100vh;
+		border-inline-end: 1px solid var(--separator-color);
+	}
+}
+
+.sidebar__list {
+	list-style: none;
+	padding: 0;
+	font-size: var(--body-10-font-size);
+	font-weight: var(--body-10-font-weight);
+}
diff --git a/devtools/client/application/src/components/routing/Sidebar.js b/devtools/client/application/src/components/routing/Sidebar.js
new file mode 100644
index 0000000000..99d260571e
--- /dev/null
+++ b/devtools/client/application/src/components/routing/Sidebar.js
@@ -0,0 +1,70 @@
+/* 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 {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  aside,
+  ul,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const SidebarItem = createFactory(
+  require("resource://devtools/client/application/src/components/routing/SidebarItem.js")
+);
+
+const Types = require("resource://devtools/client/application/src/types/index.js");
+const {
+  PAGE_TYPES,
+} = require("resource://devtools/client/application/src/constants.js");
+
+class Sidebar extends PureComponent {
+  static get propTypes() {
+    return {
+      // this prop is automatically injected via connect
+      selectedPage: Types.page.isRequired,
+    };
+  }
+
+  render() {
+    const navItems = [PAGE_TYPES.SERVICE_WORKERS, PAGE_TYPES.MANIFEST];
+
+    const isSelected = page => {
+      return page === this.props.selectedPage;
+    };
+
+    return aside(
+      {
+        className: "sidebar js-sidebar",
+      },
+      ul(
+        {
+          className: "sidebar__list",
+        },
+        navItems.map(page => {
+          return SidebarItem({
+            page,
+            key: `sidebar-item-${page}`,
+            isSelected: isSelected(page),
+          });
+        })
+      )
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    selectedPage: state.ui.selectedPage,
+  };
+}
+
+module.exports = connect(mapStateToProps)(Sidebar);
diff --git a/devtools/client/application/src/components/routing/SidebarItem.css b/devtools/client/application/src/components/routing/SidebarItem.css
new file mode 100644
index 0000000000..f1852748ab
--- /dev/null
+++ b/devtools/client/application/src/components/routing/SidebarItem.css
@@ -0,0 +1,33 @@
+/* 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/. */
+
+
+/*
+ * Sidebar list items
+ */
+
+.sidebar-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: var(--base-unit);
+  padding: calc(var(--base-unit)) calc(var(--base-unit) * 6);
+  user-select: none;
+  cursor: pointer;
+}
+
+.sidebar-item--selected {
+	background-color: var(--theme-selection-background);
+	color: var(--theme-selection-color);
+}
+
+.sidebar-item:not(.sidebar-item--selected):hover {
+	background-color: var(--highlight-color);
+}
+
+.sidebar-item__icon {
+	height: calc(var(--base-unit) * 4);
+	width: calc(var(--base-unit) * 4);
+	-moz-context-properties: fill;
+	fill: currentColor;
+}
diff --git a/devtools/client/application/src/components/routing/SidebarItem.js b/devtools/client/application/src/components/routing/SidebarItem.js
new file mode 100644
index 0000000000..5683856aaf
--- /dev/null
+++ b/devtools/client/application/src/components/routing/SidebarItem.js
@@ -0,0 +1,95 @@
+/* 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 {
+  createFactory,
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  img,
+  li,
+  span,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Actions = require("resource://devtools/client/application/src/actions/index.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const {
+  PAGE_TYPES,
+} = require("resource://devtools/client/application/src/constants.js");
+const Types = require("resource://devtools/client/application/src/types/index.js");
+
+const ICONS = {
+  [PAGE_TYPES.MANIFEST]:
+    "chrome://devtools/skin/images/application-manifest.svg",
+  [PAGE_TYPES.SERVICE_WORKERS]:
+    "chrome://devtools/skin/images/debugging-workers.svg",
+};
+
+const LOCALIZATION_IDS = {
+  [PAGE_TYPES.MANIFEST]: "sidebar-item-manifest",
+  [PAGE_TYPES.SERVICE_WORKERS]: "sidebar-item-service-workers",
+};
+
+class SidebarItem extends PureComponent {
+  static get propTypes() {
+    return {
+      page: Types.page.isRequired,
+      isSelected: PropTypes.bool.isRequired,
+      // this prop is automatically injected via connect
+      dispatch: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { isSelected, page } = this.props;
+
+    return li(
+      {
+        className: `sidebar-item js-sidebar-${page} ${
+          isSelected ? "sidebar-item--selected" : ""
+        }`,
+        onClick: () => {
+          const { dispatch } = this.props;
+          dispatch(Actions.updateSelectedPage(page));
+        },
+        role: "link",
+      },
+      Localized(
+        {
+          id: LOCALIZATION_IDS[page],
+          attrs: {
+            alt: true,
+            title: true,
+          },
+        },
+        img({
+          src: ICONS[page],
+          className: "sidebar-item__icon",
+        })
+      ),
+      Localized(
+        {
+          id: LOCALIZATION_IDS[page],
+          attrs: {
+            title: true,
+          },
+        },
+        span({ className: "devtools-ellipsis-text" })
+      )
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch => ({ dispatch });
+module.exports = connect(mapDispatchToProps)(SidebarItem);
diff --git a/devtools/client/application/src/components/routing/moz.build b/devtools/client/application/src/components/routing/moz.build
new file mode 100644
index 0000000000..7e22985614
--- /dev/null
+++ b/devtools/client/application/src/components/routing/moz.build
@@ -0,0 +1,5 @@
+# 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/.
+
+DevToolsModules("PageSwitcher.js", "Sidebar.js", "SidebarItem.js")