Offset dialog and add explanation tooltip to canvas setting

packages/trace-viewer/src/ui/defaultSettingsView.tsx

@@ -29,11 +29,12 @@ export const DefaultSettingsView: React.FC<{}> = () => {
   return (
     <SettingsView
       settings={[
-        { value: darkMode, set: setDarkMode, title: 'Dark mode' },
+        { value: darkMode, set: setDarkMode, name: 'Dark mode' },
         {
           value: shouldPopulateCanvasFromScreenshot,
           set: setShouldPopulateCanvasFromScreenshot,
-          title: 'Display canvas content',
+          name: 'Display canvas content',
+          title: 'Attempt to display the captured canvas appearance in the snapshot preview. May not be accurate.'
         },
       ]}
     />

packages/trace-viewer/src/ui/settingsToolbarButton.tsx

@@ -37,6 +37,8 @@ export const SettingsToolbarButton: React.FC<{}> = () => {
         className='settings-toolbar-dialog'
         open={open}
         width={200}
+        // TODO: Temporary spacing until design of toolbar buttons is revisited
+        verticalOffset={8}
         requestClose={() => setOpen(false)}
         hostingElement={hostingRef}
       >

packages/trace-viewer/src/ui/settingsView.tsx

@@ -18,22 +18,31 @@ import * as React from 'react';
 import './settingsView.css';
 
 export type Setting<T> = {
-  value: T,
+  value: T;
-  set: (value: T) => void,
+  set: (value: T) => void;
-  title: string
+  name: string;
+  title?: string;
 };
 
 export const SettingsView: React.FunctionComponent<{
-  settings: Setting<boolean>[],
+  settings: Setting<boolean>[];
 }> = ({ settings }) => {
-  return <div className='vbox settings-view'>
+  return (
-    {settings.map(({ value, set, title }) => {
+    <div className='vbox settings-view'>
-      return <div key={title} className='setting'>
+      {settings.map(({ value, set, name, title }) => {
-        <label>
+        return (
-          <input type='checkbox' checked={value} onChange={() => set(!value)}/>
+          <div key={name} className='setting' title={title}>
-          {title}
+            <label>
-        </label>
+              <input
-      </div>;
+                type='checkbox'
-    })}
+                checked={value}
-  </div>;
+                onChange={() => set(!value)}
+              />
+              {name}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
 };

packages/trace-viewer/src/ui/shared/dialog.tsx

@@ -22,6 +22,8 @@ export interface DialogProps {
   open: boolean;
   width: number;
 
+  verticalOffset?: number;
+
   requestClose?: () => void;
 
   hostingElement?: React.RefObject<HTMLElement>;
@@ -31,6 +33,7 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
   className,
   open,
   width,
+  verticalOffset,
   requestClose,
   hostingElement,
   children,
@@ -50,7 +53,7 @@ export const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
     style = {
       // Override default `<dialog>` positioning
       margin: 0,
-      top: bounds.bottom,
+      top: bounds.bottom + (verticalOffset ?? 0),
       left: buildTopLeftCoord(bounds, width),
       width,
       // For some reason the dialog is placed behind the timeline, but there's a stacking context that allows the dialog to be placed above

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -509,9 +509,9 @@ export const UIModeView: React.FC<{}> = ({
             <div className='section-title'>Testing Options</div>
           </Toolbar>
           {testingOptionsVisible && <SettingsView settings={[
-            { value: singleWorker, set: setSingleWorker, title: 'Single worker' },
+            { value: singleWorker, set: setSingleWorker, name: 'Single worker' },
-            { value: showBrowser, set: setShowBrowser, title: 'Show browser' },
+            { value: showBrowser, set: setShowBrowser, name: 'Show browser' },
-            { value: updateSnapshots, set: setUpdateSnapshots, title: 'Update snapshots' },
+            { value: updateSnapshots, set: setUpdateSnapshots, name: 'Update snapshots' },
           ]} />}
         </>}
         <Toolbar noShadow={true} noMinHeight={true} className='settings-toolbar' onClick={() => setSettingsVisible(!settingsVisible)}>