Bug 1625815: Add a feedback button. r=mtigley,rcaliman

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

devtools/client/inspector/compatibility/components/CompatibilityApp.js

@@ -17,6 +17,9 @@ const Types = require("devtools/client/inspector/compatibility/types");
 const Accordion = createFactory(
   require("devtools/client/shared/components/Accordion")
 );
+const Footer = createFactory(
+  require("devtools/client/inspector/compatibility/components/Footer")
+);
 const IssuePane = createFactory(
   require("devtools/client/inspector/compatibility/components/IssuePane")
 );
@@ -70,6 +73,7 @@ class CompatibilityApp extends PureComponent {
         className: "compatibility-app theme-sidebar inspector-tabpanel",
       },
       Accordion({
+        className: "compatibility-app__main",
         items: [
           {
             id: "compatibility-app--selected-element-pane",
@@ -84,6 +88,9 @@ class CompatibilityApp extends PureComponent {
             opened: true,
           },
         ],
+      }),
+      Footer({
+        className: "compatibility-app__footer",
       })
     );
   }

devtools/client/inspector/compatibility/components/Footer.js

@@ -0,0 +1,47 @@
+/* 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 { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+
+loader.lazyRequireGetter(
+  this,
+  "openDocLink",
+  "devtools/client/shared/link",
+  true
+);
+
+const FEEDBACK_LINK =
+  "https://docs.google.com/forms/d/e/1FAIpQLSeevOHveQ1tDuKYY5Fxyb3vvbKKumdLWUT5-RuwJWoAAOST5g/viewform";
+
+class Footer extends PureComponent {
+  render() {
+    return dom.footer(
+      {
+        className: "compatibility-footer",
+      },
+      dom.button(
+        {
+          className: "compatibility-footer__feedback-button",
+          title: "Feedback",
+          onClick: () => openDocLink(FEEDBACK_LINK),
+        },
+        dom.img({
+          className: "compatibility-footer__feedback-icon",
+          src: "chrome://devtools/skin/images/report.svg",
+        }),
+        dom.label(
+          {
+            className: "compatibility-footer__feedback-label",
+          },
+          "Feedback"
+        )
+      )
+    );
+  }
+}
+
+module.exports = Footer;

devtools/client/inspector/compatibility/components/moz.build

@@ -6,6 +6,7 @@
 
 DevToolsModules(
     "CompatibilityApp.js",
+    "Footer.js",
     "IssueItem.js",
     "IssueList.js",
     "IssuePane.js",

devtools/client/inspector/compatibility/test/node/components/__snapshots__/components-compatibility-CompatibilityApp.test.js.snap

@@ -5,6 +5,7 @@ exports[`CompatibilityApp component renders zero issues 1`] = `
   className="compatibility-app theme-sidebar inspector-tabpanel"
 >
   <Accordion
+    className="compatibility-app__main"
     items={
       Array [
         Object {
@@ -29,5 +30,8 @@ exports[`CompatibilityApp component renders zero issues 1`] = `
       ]
     }
   />
+  <Footer
+    className="compatibility-app__footer"
+  />
 </section>
 `;

devtools/client/jar.mn

@@ -207,6 +207,7 @@ devtools.jar:
     skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
     skin/images/pane-expand.svg (themes/images/pane-expand.svg)
     skin/images/help.svg (themes/images/help.svg)
+    skin/images/report.svg (themes/images/report.svg)
     skin/images/reveal.svg (themes/images/reveal.svg)
     skin/images/select-arrow.svg (themes/images/select-arrow.svg)
     skin/images/settings.svg (themes/images/settings.svg)

devtools/client/shared/components/Accordion.js

@@ -20,6 +20,7 @@ const {
 class Accordion extends Component {
   static get propTypes() {
     return {
+      className: PropTypes.string,
       // A list of all items to be rendered using an Accordion component.
       items: PropTypes.arrayOf(
         PropTypes.shape({
@@ -243,7 +244,9 @@ class Accordion extends Component {
   render() {
     return ul(
       {
-        className: "accordion",
+        className:
+          "accordion" +
+          (this.props.className ? ` ${this.props.className}` : ""),
         tabIndex: -1,
       },
       this.props.items.map(item => this.renderItem(item))

devtools/client/themes/compatibility.css

@@ -10,8 +10,9 @@
 }
 
 .compatibility-app {
+  display: grid;
+  grid-template-rows: 1fr calc(var(--compatibility-base-unit) * 7);
   height: 100%;
-  overflow: auto;
 }
 
 .compatibility-app__throbber {
@@ -21,6 +22,10 @@
   height: calc(var(--compatibility-base-unit) * 8);
 }
 
+.compatibility-app__main {
+  overflow: auto;
+}
+
 .compatibility-issue-list {
   list-style: none;
   margin: 0;
@@ -142,3 +147,29 @@
 .compatibility-node-item {
   padding-block-start: var(--compatibility-base-unit);
 }
+
+.compatibility-footer {
+  border-top: 1px solid var(--theme-splitter-color);
+  display: flex;
+  justify-content: center;
+}
+
+.compatibility-footer__feedback-button {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  column-gap: var(--compatibility-base-unit);
+}
+
+.compatibility-footer__feedback-icon {
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+  width: calc(var(--compatibility-base-unit) * 4);
+  height: calc(var(--compatibility-base-unit) * 4);
+}
+
+.compatibility-footer__feedback-label {
+  color: var(--theme-toolbar-color);
+  font-size: calc(var(--compatibility-base-unit) * 3);
+}

devtools/client/themes/images/report.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="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M8 0C4.3 0 2 2.107 2 5.5c0 2.372 2.065 4.268 3 5V14c0 1.476 1.616 2 3 2s3-.524 3-2v-3.5c.935-.736 3-2.632 3-5C14 2.107 11.7 0 8 0zm1 12H7v-1h2zm-1 2a3.086 3.086 0 0 1-1-.172V13h2v.828A3.047 3.047 0 0 1 8 14zm1.445-4.832A1 1 0 0 0 9 10H7a1 1 0 0 0-.444-.831C5.845 8.691 4 7.1 4 5.5 4 2.607 6.175 2 8 2s4 .607 4 3.5c0 1.6-1.845 3.191-2.555 3.668z"></path>
+</svg>