Replace the footer-links overlay with a settings menu

locales/en-US/app.ftl

@@ -315,16 +315,17 @@ ErrorBoundary--report-error-to-developers-description =
 # This is used in a call to action button, displayed inside the error box.
 ErrorBoundary--report-error-on-github = Report the error on GitHub
 
-## Footer Links
-
-FooterLinks--legal = Legal
-FooterLinks--Privacy = Privacy
-FooterLinks--Cookies = Cookies
-FooterLinks--languageSwitcher--select =
+## Settings Menu
+## The settings popup opened from the cog icon in the top bar.
+
+SettingsMenu--button =
+    .title = Settings
+SettingsMenu--docs = Documentation
+SettingsMenu--legal = Legal
+SettingsMenu--privacy = Privacy
+SettingsMenu--cookies = Cookies
+SettingsMenu--language-switcher =
     .title = Change language
-FooterLinks--hide-button =
-    .title = Hide footer links
-    .aria-label = Hide footer links
 
 ## FullTimeline
 ## The timeline component of the full view in the analysis UI at the top of the
@@ -576,7 +577,6 @@ MenuButtons--index--share-error-uploading =
     .label = Error uploading
 
 MenuButtons--index--revert = Revert to Original Profile
-MenuButtons--index--docs = Docs
 
 MenuButtons--permalink--button =
     .label = Permalink

src/components/app/AppHeader.tsx

@@ -9,7 +9,7 @@
 import * as React from 'react';
 
 import { InnerNavigationLink } from 'firefox-profiler/components/shared/InnerNavigationLink';
-import { ThemeToggle } from './ThemeToggle';
+import { SettingsMenu } from './SettingsMenu';
 
 import './AppHeader.css';
 import { Localized } from '@fluent/react';
@@ -44,7 +44,7 @@ export class AppHeader extends React.PureComponent<{}> {
             </span>
           </Localized>
           <div className="appHeaderRightControls">
-            <ThemeToggle />
+            <SettingsMenu buttonClassName="appHeaderSettingsButton" />
             <Localized id="AppHeader--github-icon" attrs={{ title: true }}>
               <a
                 className="appHeaderGithubIcon"

src/components/app/LanguageSwitcher.tsx

@@ -30,12 +30,9 @@ export function LanguageSwitcher(): React.ReactNode {
   }
 
   return (
-    <Localized
-      id="FooterLinks--languageSwitcher--select"
-      attrs={{ title: true }}
-    >
+    <Localized id="SettingsMenu--language-switcher" attrs={{ title: true }}>
       <select
-        className="appFooterLinksLanguageSwitcher"
+        className="settingsMenuLanguageSwitcher"
         onChange={onLocaleChange}
         value={primaryLocale}
       >

src/components/app/MenuButtons/index.tsx

@@ -24,6 +24,7 @@ import {
 /* Note: the order of import is important, from most general to most specific,
  * so that the CSS rules are in the correct order. */
 import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel';
+import { SettingsMenu } from 'firefox-profiler/components/app/SettingsMenu';
 import { MetaInfoPanel } from './MetaInfo';
 import { PublishPanel } from './Publish';
 import { MenuButtonsPermalink } from './Permalink';
@@ -334,15 +335,10 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
         {this._renderMetaInfoButton()}
         {this._renderPublishPanel()}
         {this._renderPermalink()}
-        <a
-          href="/docs/"
-          target="_blank"
-          className="menuButtonsButton menuButtonsButton-hasLeftBorder"
-          title="Open the documentation in a new window"
-        >
-          <Localized id="MenuButtons--index--docs">Docs</Localized>
-          <i className="open-in-new" />
-        </a>
+        <SettingsMenu
+          buttonClassName="menuButtonsButton menuButtonsButton-hasIcon menuButtonsButton-hasLeftBorder menuButtonsSettingsButton"
+          rightAligned
+        />
       </>
     );
   }

src/components/app/Root.tsx

@@ -6,7 +6,6 @@ import { PureComponent } from 'react';
 import { Localized } from '@fluent/react';
 import { Provider } from 'react-redux';
 import { UrlManager } from './UrlManager';
-import { FooterLinks } from './FooterLinks';
 import {
   NonLocalizedErrorBoundary,
   LocalizedErrorBoundary,
@@ -44,7 +43,6 @@ export class Root extends PureComponent<RootProps> {
                     <ServiceWorkerManager />
                     <ProfileLoader />
                     <AppViewRouter />
-                    <FooterLinks />
                     <WindowTitle />
                   </UrlManager>
                 </DragAndDrop>

src/components/app/SettingsMenu.css

@@ -0,0 +1,132 @@
+/* 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/. */
+
+.settingsMenu {
+  --internal-cog-icon: url(../../../res/img/svg/cog-12.svg);
+  --internal-open-in-new-icon: url(../../../res/img/svg/open-in-new-12.svg);
+}
+
+:root.dark-mode {
+  .settingsMenu {
+    --internal-cog-icon: url(../../../res/img/svg/cog-light-12.svg);
+    --internal-open-in-new-icon: url(../../../res/img/svg/open-in-new-light-12.svg);
+  }
+}
+
+.menuButtonsSettingsButton::before {
+  padding-right: 0;
+  background-image: var(--internal-cog-icon);
+}
+
+.appHeaderSettingsButton {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  transition: opacity 250ms var(--animation-curve);
+}
+
+.appHeaderSettingsButton::before {
+  display: block;
+  width: 22px;
+  height: 22px;
+  background: var(--internal-cog-icon) no-repeat center / 22px;
+  content: '';
+}
+
+.appHeaderSettingsButton:hover {
+  opacity: 0.5;
+}
+
+.settingsMenuArrowPanel {
+  min-width: 200px;
+}
+
+.settingsMenuArrowPanel--rightAligned {
+  --offset-from-right: 14px;
+}
+
+.settingsMenuArrowPanel .arrowPanelContent {
+  padding: 0;
+
+  --internal-approx-distance-from-top: 20px;
+  --internal-approx-distance-to-bottom: 5px;
+}
+
+.settingsMenuPanel {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.3;
+}
+
+.settingsMenuRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px;
+}
+
+.settingsMenuRow--theme .themeToggle {
+  width: 100%;
+  margin: 0;
+}
+
+.settingsMenuRow--theme .themeToggleButton {
+  width: auto;
+  flex: 1;
+}
+
+.settingsMenuLinks {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 4px 0;
+  border-top: 1px solid var(--base-border-color);
+  border-bottom: 1px solid var(--base-border-color);
+}
+
+.settingsMenuLink {
+  display: flex;
+  align-items: center;
+  padding: 4px 14px;
+}
+
+.settingsMenuLink .open-in-new {
+  margin-left: auto;
+}
+
+.settingsMenuLink,
+.settingsMenuLink:visited {
+  color: var(--base-foreground-color);
+  text-decoration: none;
+}
+
+.settingsMenuLink:hover {
+  background-color: rgb(0 0 0 / 0.06);
+  text-decoration: none;
+}
+
+:root.dark-mode .settingsMenuLink:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
+.settingsMenuLanguageSwitcher {
+  flex: 1;
+  color: inherit;
+  font: inherit;
+}
+
+:root.dark-mode .settingsMenuLanguageSwitcher {
+  border: 1px solid var(--grey-40);
+  border-radius: 4px;
+  background: var(--grey-60);
+}