Bug 1565212 Create sidebar component, r=ladybenko,fluent-reviewers,flod

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

--HG--
extra : moz-landing-system : lando

devtools/client/application/application.css

@@ -17,6 +17,8 @@
 @import "resource://devtools/client/application/src/components/manifest/ManifestLoader.css";
 @import "resource://devtools/client/application/src/components/manifest/ManifestSection.css";
 @import "resource://devtools/client/application/src/components/routing/PageSwitcher.css";
+@import "resource://devtools/client/application/src/components/routing/Sidebar.css";
+@import "resource://devtools/client/application/src/components/routing/SidebarItem.css";
 @import "resource://devtools/client/application/src/components/service-workers/Worker.css";
 @import "resource://devtools/client/application/src/components/service-workers/WorkerList.css";
 @import "resource://devtools/client/application/src/components/service-workers/WorkerListEmpty.css";

devtools/client/application/src/base.css

@@ -23,7 +23,9 @@
   --list-line-height: 1.25;
 
  /* Global colours */
-  --separator-color: var(--theme-text-color-alt);
+  --separator-color: var(--theme-splitter-color);
+  --bg-color: var(--theme-toolbar-background);
+  --highlight-color: var(--theme-toolbar-background-hover);
 
   /* extra, raw colors */
   --blue-50-a30: rgba(10, 132, 255, 0.3);

devtools/client/application/src/components/App.css

@@ -12,3 +12,8 @@ a.disabled-link:visited {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.app {
+	display: grid;
+	grid-template-columns: calc(var(--base-unit) * 50) auto;
+}

devtools/client/application/src/components/App.js

@@ -15,6 +15,7 @@ const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
 
 const PageSwitcher = createFactory(require("./routing/PageSwitcher"));
+const Sidebar = createFactory(require("./routing/Sidebar"));
 
 /**
  * This is the main component for the application panel.
@@ -31,7 +32,7 @@ class App extends PureComponent {
 
     return LocalizationProvider(
       { bundles: fluentBundles },
-      main({ className: `application` }, PageSwitcher({}))
+      main({ className: `app` }, Sidebar({}), PageSwitcher({}))
     );
   }
 }

devtools/client/application/src/components/routing/PageSwitcher.css

@@ -9,7 +9,7 @@
 
 .app-page {
   min-height: 100vh;
-  padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 6);
+  padding: 0 2rem;
   display: grid;
   user-select: none;
 }

devtools/client/application/src/components/routing/Sidebar.css

@@ -0,0 +1,22 @@
+/* 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 {
+  height: 100vh;
+	border-right: 1px solid var(--separator-color);
+	position: sticky;
+	top: 0;
+	background-color: var(--bg-color);
+}
+
+.sidebar__list {
+	list-style: none;
+	padding: 0;
+	font-size: var(--body-10-font-size);
+	font-weight: var(--body-10-font-weight);
+}

devtools/client/application/src/components/routing/Sidebar.js

@@ -0,0 +1,44 @@
+/* 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("devtools/client/shared/vendor/react");
+const {
+  aside,
+  ul,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+const SidebarItem = createFactory(require("./SidebarItem"));
+
+const { PAGE_TYPES } = require("../../constants");
+
+class Sidebar extends PureComponent {
+  render() {
+    const navItems = Object.values(PAGE_TYPES);
+
+    return aside(
+      {
+        className: "sidebar",
+      },
+      ul(
+        {
+          className: "sidebar__list",
+        },
+        navItems.map(page => {
+          return SidebarItem({
+            page: page,
+            key: `sidebar-item-${page}`,
+          });
+        })
+      )
+    );
+  }
+}
+
+// Exports
+module.exports = Sidebar;

devtools/client/application/src/components/routing/SidebarItem.css

@@ -0,0 +1,27 @@
+/* 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);
+}
+
+.sidebar-item: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;
+
+}

devtools/client/application/src/components/routing/SidebarItem.js

@@ -0,0 +1,73 @@
+/* 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("devtools/client/shared/vendor/react");
+const {
+  img,
+  li,
+  span,
+} = require("devtools/client/shared/vendor/react-dom-factories");
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
+const { PAGE_TYPES } = require("../../constants");
+
+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: PropTypes.oneOf(Object.values(PAGE_TYPES)),
+    };
+  }
+  render() {
+    const { page } = this.props;
+    return li(
+      { className: "sidebar-item" },
+      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" })
+      )
+    );
+  }
+}
+
+// Exports
+module.exports = SidebarItem;

devtools/client/application/src/components/routing/moz.build

@@ -5,4 +5,8 @@
 DevToolsModules(
     'PageSwitcher.css',
     'PageSwitcher.js',
+    'Sidebar.css',
+    'Sidebar.js',
+    'SidebarItem.css',
+    'SidebarItem.js'
 )

devtools/client/application/test/components/__snapshots__/components_application_panel-App.test.js.snap

@@ -3,8 +3,9 @@
 exports[`App renders the expected snapshot 1`] = `
 <LocalizationProvider>
   <main
-    className="application"
+    className="app"
   >
+    <Sidebar />
     <Connect(PageSwitcher) />
   </main>
 </LocalizationProvider>

devtools/client/application/test/components/routing/__snapshots__/components_application_panel-Sidebar.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sidebar renders the expected snapshot 1`] = `
+<aside
+  className="sidebar"
+>
+  <ul
+    className="sidebar__list"
+  >
+    <SidebarItem
+      key="sidebar-item-manifest"
+      page="manifest"
+    />
+    <SidebarItem
+      key="sidebar-item-service-workers"
+      page="service-workers"
+    />
+  </ul>
+</aside>
+`;

devtools/client/application/test/components/routing/__snapshots__/components_application_panel-SidebarItem.test.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SidebarItem renders the expected snapshot with manifest page 1`] = `
+<li
+  className="sidebar-item"
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="sidebar-item-manifest"
+  >
+    <img
+      className="sidebar-item__icon"
+      src="chrome://devtools/skin/images/application-manifest.svg"
+    />
+  </Localized>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="sidebar-item-manifest"
+  >
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </Localized>
+</li>
+`;
+
+exports[`SidebarItem renders the expected snapshot with service-workers page 1`] = `
+<li
+  className="sidebar-item"
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="sidebar-item-service-workers"
+  >
+    <img
+      className="sidebar-item__icon"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+  </Localized>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="sidebar-item-service-workers"
+  >
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </Localized>
+</li>
+`;

devtools/client/application/test/components/routing/components_application_panel-Sidebar.test.js

@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import libs
+const { shallow } = require("enzyme");
+const { createFactory } = require("react");
+
+const Sidebar = createFactory(
+  require("devtools/client/application/src/components/routing/Sidebar")
+);
+
+/**
+ * Test for Sidebar.js component
+ */
+
+describe("Sidebar", () => {
+  it("renders the expected snapshot", () => {
+    const wrapper = shallow(Sidebar());
+    expect(wrapper).toMatchSnapshot();
+  });
+});

devtools/client/application/test/components/routing/components_application_panel-SidebarItem.test.js

@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import libs
+const { shallow } = require("enzyme");
+const { createFactory } = require("react");
+
+const SidebarItem = createFactory(
+  require("devtools/client/application/src/components/routing/SidebarItem")
+);
+
+/**
+ * Test for SidebarItem.js component
+ */
+
+describe("SidebarItem", () => {
+  it("renders the expected snapshot with manifest page", () => {
+    const wrapper = shallow(
+      SidebarItem({
+        page: "manifest",
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot with service-workers page", () => {
+    const wrapper = shallow(
+      SidebarItem({
+        page: "service-workers",
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

devtools/client/jar.mn

@@ -95,6 +95,7 @@ devtools.jar:
     skin/images/aboutdebugging-information.svg (themes/images/aboutdebugging-information.svg)
     skin/images/aboutdebugging-process-icon.svg (themes/images/aboutdebugging-process-icon.svg)
     skin/images/aboutdebugging-usb-icon.svg (themes/images/aboutdebugging-usb-icon.svg)
+    skin/images/application-manifest.svg (themes/images/application-manifest.svg)
     skin/images/fox-smiling.svg (themes/images/fox-smiling.svg)
     skin/images/grid.svg (themes/images/grid.svg)
     skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)

devtools/client/locales/en-US/application.ftl

@@ -111,6 +111,16 @@ manifest-loaded-error = There was an error while loading the manifest:
 # Text displayed when the page has no manifest available
 manifest-non-existing = No manifest found to inspect.
 
+# Sidebar navigation item for Manifest sidebar item section
+sidebar-item-manifest = Manifest
+  .alt = Manifest Icon
+  .title = Manifest
+
+# Sidebar navigation item for Service Workers sidebar item section
+sidebar-item-service-workers = Service Workers
+  .alt = Service Workers Icon
+  .title = Service Workers
+
 # Text for the ALT and TITLE attributes of the warning icon
 icon-warning =
   .alt = Warning icon
@@ -120,3 +130,4 @@ icon-warning =
 icon-error =
   .alt = Error icon
   .title = Error
+

devtools/client/themes/images/application-manifest.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="context-fill">
+	<path d="M12.6647273,4.78981818 L8.30109091,0.426181818 C8.02837421,0.153382728 7.65846518,8.23816807e-05 7.27272727,0 L5.81818182,0 L2,0 C0.8954305,2.02906125e-16 -2.13367219e-15,0.8954305 -1.99840144e-15,2 L-1.86719327e-15,8.72727273 L-1.86719327e-15,13.0909091 C-1.86719327e-15,14.6975556 1.30244436,16 2.90909091,16 L10.1818182,16 C11.7884647,16 13.0909091,14.6975556 13.0909091,13.0909091 L13.0909091,5.81818182 C13.0908267,5.43244391 12.9375264,5.06253488 12.6647273,4.78981818 Z M9.57963636,5.81818182 L7.27272727,5.81818182 L7.27272727,3.51127273 L9.57963636,5.81818182 Z M2.90909091,13.0909091 L2.90909091,2.90909091 L5.81818182,2.90909091 L5.81818182,6.54545455 C5.81818182,6.94711618 6.14379291,7.27272727 6.54545455,7.27272727 L10.1818182,7.27272727 L10.1818182,13.0909091 L2.90909091,13.0909091 Z" />
+</svg>