Bug 1665922 - Improve Perfherder UI to better indicate mouseovers and actionable elements

ui/perfherder/userguide/PerherderUserGuide.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import UserGuideHeader from './UserGuideHeader';
+import UserGuideBody from './UserGuideBody';
+
+const PerfherderUserGuide = () => (
+  <div>
+    <UserGuideHeader />
+    <UserGuideBody />
+  </div>
+);
+
+export default PerfherderUserGuide;

ui/perfherder/userguide/UserGuideBody.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import AdditionalInformationTable from '../../shared/AdditionalInformationTable';
+
+const UserGuideBody = function UserGuideBody() {
+  return (
+    <div className="card-body">
+      <div className="row">
+        <div className="col-12">
+          <AdditionalInformationTable />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserGuideBody;

ui/perfherder/userguide/UserGuideHeader.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const UserGuideHeader = function UserGuideHeader() {
+  return (
+    <div className="card-header">
+      <h1>Perfherder User Guide</h1>
+    </div>
+  );
+};
+
+export default UserGuideHeader;

ui/shared/AdditionalInformationTable.jsx

@@ -0,0 +1,198 @@
+import React from 'react';
+
+import individualAlert from '../img/individual-alert.png';
+import hoveredIndividualAlert from '../img/individual-alert-hovered.png';
+import absoluteDifference from '../img/individual-alert-absolute-difference.png';
+import absoluteDifferenceBefore from '../img/individual-alert-absolute-difference-before.png';
+import magnitudeOfChange from '../img/individual-alert-magnitude-of-change.png';
+import magnitudeOfChangeBefore from '../img/individual-alert-magnitude-of-change-before.png';
+import confidence from '../img/individual-alert-confidence.png';
+import confidenceBefore from '../img/individual-alert-confidence-before.png';
+import hideUncomparableResults from '../img/compare-view-hide-uncomparable-results.png';
+import hideUncomparableResultsBefore from '../img/compare-view-hide-uncomparable-results-before.png';
+import showOnlyImportantChanges from '../img/compare-view-show-only-important-changes.png';
+import showOnlyImportantChangesBefore from '../img/compare-view-show-only-important-changes-before.png';
+import hideUncertainResults from '../img/compare-view-hide-uncertain-results.png';
+import hideUncertainResultsBefore from '../img/compare-view-hide-uncertain-results-before.png';
+import showOnlyNoise from '../img/compare-view-show-only-noise.png';
+import showOnlyNoiseBefore from '../img/compare-view-show-only-noise-before.png';
+
+const alertViewHoverableItems = [
+  {
+    name: 'Individual alert',
+    imageBeforeHover: (
+      <img
+        src={individualAlert}
+        alt="Individual alert in Alerts View- before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={hoveredIndividualAlert}
+        alt="Individual alert in Alerts View - after hover"
+      />
+    ),
+  },
+  {
+    name: 'Individual alert - absolute difference',
+    imageBeforeHover: (
+      <img
+        src={absoluteDifferenceBefore}
+        alt="Individual alert absolute difference in Alerts View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={absoluteDifference}
+        alt="Individual alert absolute difference in Alerts View - after hover"
+      />
+    ),
+  },
+  {
+    name: 'Individual alert - magnitude of change',
+    imageBeforeHover: (
+      <img
+        src={magnitudeOfChangeBefore}
+        alt="Individual alert magnitude of change in Alerts View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={magnitudeOfChange}
+        alt="Individual alert magnitude of change in Alerts View - after hover"
+      />
+    ),
+  },
+  {
+    name: 'Individual alert - confidence',
+    imageBeforeHover: (
+      <img
+        src={confidenceBefore}
+        alt="Individual alert confidence in Alerts View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={confidence}
+        alt="Individual alert confidence in Alerts View - after hover"
+      />
+    ),
+  },
+];
+
+const compareViewHoverableItems = [
+  {
+    name: 'Filter buttons - Hide uncomparable results',
+    imageBeforeHover: (
+      <img
+        src={hideUncomparableResultsBefore}
+        alt="Hide uncomparable results filter in Compare View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={hideUncomparableResults}
+        alt="Hide uncomparable results filter in Compare View - after hover"
+      />
+    ),
+  },
+  {
+    name: 'Filter buttons - Show only important changes',
+    imageBeforeHover: (
+      <img
+        src={showOnlyImportantChangesBefore}
+        alt="Show only important changes filter in Compare View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={showOnlyImportantChanges}
+        alt="Show only important changes filter in Compare View - after hover"
+      />
+    ),
+  },
+  {
+    name: 'Filter buttons - Hide uncertain results',
+    imageBeforeHover: (
+      <img
+        src={hideUncertainResultsBefore}
+        alt="Hide uncertain results filter in Compare View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={hideUncertainResults}
+        alt="Hide uncertain results filter in Compare View - after hover"
+      />
+    ),
+  },
+  {
+    name: 'Filter buttons - Show only noise',
+    imageBeforeHover: (
+      <img
+        src={showOnlyNoiseBefore}
+        alt="Show only noise filter in Compare View - before hover"
+      />
+    ),
+    imageAfterHover: (
+      <img
+        src={showOnlyNoise}
+        alt="Show only noise filter in Compare View - after hover"
+      />
+    ),
+  },
+];
+
+const AdditionalInformationTable = function AdditionalInformationTable() {
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h3>Elements with extra information</h3>
+      </div>
+
+      <div className="card-body panel-spacing">
+        <table>
+          <tbody>
+            <tr>
+              <th colSpan="1">Alerts View</th>
+              <th colSpan="1">Before hover</th>
+              <th colSpan="1">After hover</th>
+            </tr>
+          </tbody>
+
+          <tbody>
+            {alertViewHoverableItems.map((item) => (
+              <tr>
+                <td>
+                  <span>{item.name}</span>
+                </td>
+                <td>{item.imageBeforeHover}</td>
+                <td>{item.imageAfterHover}</td>
+              </tr>
+            ))}
+          </tbody>
+
+          <tbody>
+            <tr>
+              <th colSpan="3">Compare View</th>
+            </tr>
+          </tbody>
+
+          <tbody>
+            {compareViewHoverableItems.map((item) => (
+              <tr>
+                <td>
+                  <span>{item.name}</span>
+                </td>
+                <td>{item.imageBeforeHover}</td>
+                <td>{item.imageAfterHover}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default AdditionalInformationTable;

ui/userguide/App.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
 
+import PerfherderUserGuide from '../perfherder/userguide/PerherderUserGuide';
+
 import UserGuideHeader from './UserGuideHeader';
 import UserGuideBody from './UserGuideBody';
 import UserGuideFooter from './UserGuideFooter';
@@ -10,8 +12,11 @@ const App = () => (
     <div className="card">
       <UserGuideHeader />
       <UserGuideBody />
-      <UserGuideFooter />
     </div>
+    <div className="card my-3">
+      <PerfherderUserGuide />
+    </div>
+    <UserGuideFooter />
   </div>
 );
 

ui/userguide/UserGuideFooter.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const UserGuideFooter = function UserGuideFooter() {
   return (
-    <div className="card-footer ug-footer">
+    <div className="ug-footer">
       <div>
         <div>
           Some icons by