Add Dark mode checkbox

Author: arai-a

locales/en-US/app.ftl

@@ -364,6 +364,8 @@ Home--additional-content-content = You can <strong>drag and drop</strong> a prof
 Home--compare-recordings-info = You can also compare recordings. <a>Open the comparing interface.</a>
 Home--your-recent-uploaded-recordings-title = Your recent uploaded recordings
 
+Home--dark-mode-title = Dark mode
+
 # We replace the elements such as <perf> and <simpleperf> with links to the
 # documentation to use these tools.
 Home--load-files-from-other-tools2 =

src/components/app/Home.css

@@ -88,6 +88,16 @@
   grid-column: 1 / -1; /* from start to end */
 }
 
+.homeDarkModeBox {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+
+#home-dark-mode {
+  vertical-align: middle;
+}
+
 .homeActions > p:first-child,
 .homeRecentUploadedRecordingsTitle {
   margin-top: 0;

src/components/app/Home.tsx

@@ -9,6 +9,11 @@ import { InnerNavigationLink } from 'firefox-profiler/components/shared/InnerNav
 import { ListOfPublishedProfiles } from './ListOfPublishedProfiles';
 
 import explicitConnect from 'firefox-profiler/utils/connect';
+import {
+  isDarkMode,
+  setLightMode,
+  setDarkMode,
+} from 'firefox-profiler/utils/dark-mode';
 import PerfScreenshot from 'firefox-profiler-res/img/jpg/perf-screenshot-2021-05-06.jpg';
 import FirefoxPopupScreenshot from 'firefox-profiler-res/img/jpg/firefox-profiler-button-2021-05-06.jpg';
 import {
@@ -214,6 +219,7 @@ type HomeProps = ConnectedProps<
 
 type HomeState = {
   popupInstallPhase: PopupInstallPhase;
+  darkMode: boolean;
 };
 
 type PopupInstallPhase =
@@ -256,6 +262,7 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
 
     this.state = {
       popupInstallPhase: popupInstallPhase as PopupInstallPhase,
+      darkMode: isDarkMode(),
     };
   }
 
@@ -574,8 +581,18 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
     this.props.triggerLoadingFromUrl(url);
   };
 
+  _onDarkModeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      setDarkMode();
+    } else {
+      setLightMode();
+    }
+    this.setState({ darkMode: isDarkMode() });
+  };
+
   override render() {
     const { specialMessage } = this.props;
+    const { darkMode } = this.state;
 
     return (
       <div className="home">
@@ -686,6 +703,20 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
             {/* End of grid container */}
           </section>
           <DragAndDropOverlay />
+          <div className="homeDarkModeBox">
+            <label className="photon-label" htmlFor="home-dark-mode">
+              <input
+                id="home-dark-mode"
+                className="photon-checkbox photon-checkbox-default"
+                type="checkbox"
+                checked={darkMode}
+                onChange={this._onDarkModeChange}
+              />
+              <Localized id="Home--dark-mode-title">
+                <span>Dark mode</span>
+              </Localized>
+            </label>
+          </div>
         </main>
       </div>
     );

src/index.tsx

@@ -31,14 +31,6 @@ function initTheme() {
     document.documentElement.classList.add('dark-mode');
   }
 }
-window.useDarkMode = function () {
-  window.localStorage.setItem('theme', 'dark');
-  document.documentElement.classList.add('dark-mode');
-};
-window.useLightMode = function () {
-  window.localStorage.removeItem('theme');
-  document.documentElement.classList.remove('dark-mode');
-};
 try {
   initTheme();
 } catch (e) {

src/test/components/__snapshots__/Home.test.tsx.snap

@@ -226,6 +226,23 @@ own importer
         Drop a saved profile here
       </div>
     </div>
+    <div
+      class="homeDarkModeBox"
+    >
+      <label
+        class="photon-label"
+        for="home-dark-mode"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          id="home-dark-mode"
+          type="checkbox"
+        />
+        <span>
+          Dark mode
+        </span>
+      </label>
+    </div>
   </main>
 </div>
 `;
@@ -511,6 +528,23 @@ own importer
         Drop a saved profile here
       </div>
     </div>
+    <div
+      class="homeDarkModeBox"
+    >
+      <label
+        class="photon-label"
+        for="home-dark-mode"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          id="home-dark-mode"
+          type="checkbox"
+        />
+        <span>
+          Dark mode
+        </span>
+      </label>
+    </div>
   </main>
 </div>
 `;
@@ -736,6 +770,23 @@ own importer
         Drop a saved profile here
       </div>
     </div>
+    <div
+      class="homeDarkModeBox"
+    >
+      <label
+        class="photon-label"
+        for="home-dark-mode"
+      >
+        <input
+          class="photon-checkbox photon-checkbox-default"
+          id="home-dark-mode"
+          type="checkbox"
+        />
+        <span>
+          Dark mode
+        </span>
+      </label>
+    </div>
   </main>
 </div>
 `;

src/utils/dark-mode.ts

@@ -37,3 +37,15 @@ export function maybeLightDark(value: string | [string, string]): string {
   }
   return lightDark(value[0], value[1]);
 }
+
+export function setDarkMode() {
+  _isDarkMode = true;
+  window.localStorage.setItem('theme', 'dark');
+  document.documentElement.classList.add('dark-mode');
+}
+
+export function setLightMode() {
+  _isDarkMode = false;
+  window.localStorage.removeItem('theme');
+  document.documentElement.classList.remove('dark-mode');
+}