From 51c4a52db6c3c54fd1ca8672c77467a38c534e86 Mon Sep 17 00:00:00 2001 From: fatadel Date: Thu, 21 May 2026 19:17:59 +0200 Subject: [PATCH 1/3] Replace the footer-links overlay with a settings menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The footer-links overlay was a small floating box pinned to the bottom-right corner of every page that often obstructed the UI underneath, and the app's settings/links were scattered across the overlay and the top bar. Consolidate the overlay's contents (Legal, Privacy, Cookies, language switcher) together with the Docs link and the theme toggle into a single settings menu opened from a cog icon, so all app-wide controls live in one place. The cog is available on every page — home, compare, uploaded recordings, and while viewing a profile. --- locales/en-US/app.ftl | 20 +- res/img/svg/cog-12.svg | 6 + res/img/svg/cog-light-12.svg | 6 + src/components/app/AppHeader.tsx | 4 +- src/components/app/FooterLinks.css | 67 ------ src/components/app/FooterLinks.tsx | 68 ------ src/components/app/LanguageSwitcher.tsx | 7 +- src/components/app/MenuButtons/index.tsx | 11 +- src/components/app/Root.tsx | 2 - src/components/app/SettingsMenu.css | 114 +++++++++ src/components/app/SettingsMenu.tsx | 81 +++++++ ...erLinks.test.tsx => SettingsMenu.test.tsx} | 74 +++--- .../__snapshots__/CompareHome.test.tsx.snap | 34 +-- .../__snapshots__/FooterLinks.test.tsx.snap | 149 ------------ .../__snapshots__/Home.test.tsx.snap | 136 ++--------- .../__snapshots__/MenuButtons.test.tsx.snap | 53 ++--- .../__snapshots__/SettingsMenu.test.tsx.snap | 219 ++++++++++++++++++ .../UploadedRecordingsHome.test.tsx.snap | 68 +----- 18 files changed, 547 insertions(+), 572 deletions(-) create mode 100644 res/img/svg/cog-12.svg create mode 100644 res/img/svg/cog-light-12.svg delete mode 100644 src/components/app/FooterLinks.css delete mode 100644 src/components/app/FooterLinks.tsx create mode 100644 src/components/app/SettingsMenu.css create mode 100644 src/components/app/SettingsMenu.tsx rename src/test/components/{FooterLinks.test.tsx => SettingsMenu.test.tsx} (50%) delete mode 100644 src/test/components/__snapshots__/FooterLinks.test.tsx.snap create mode 100644 src/test/components/__snapshots__/SettingsMenu.test.tsx.snap diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index be577ee3a9..556b551b30 100644 --- a/locales/en-US/app.ftl +++ b/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 = Docs +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 diff --git a/res/img/svg/cog-12.svg b/res/img/svg/cog-12.svg new file mode 100644 index 0000000000..e0cb45dfe1 --- /dev/null +++ b/res/img/svg/cog-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/res/img/svg/cog-light-12.svg b/res/img/svg/cog-light-12.svg new file mode 100644 index 0000000000..8f02e82250 --- /dev/null +++ b/res/img/svg/cog-light-12.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/components/app/AppHeader.tsx b/src/components/app/AppHeader.tsx index 6dc0eb9649..e4d9a4f37a 100644 --- a/src/components/app/AppHeader.tsx +++ b/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<{}> {
- + { - _onClick = () => { - this.setState({ hide: true }); - }; - - override state = { - hide: false, - }; - - override render() { - if (this.state.hide) { - return null; - } - return ( - - ); - } -} diff --git a/src/components/app/LanguageSwitcher.tsx b/src/components/app/LanguageSwitcher.tsx index b2d0250121..913df025fe 100644 --- a/src/components/app/LanguageSwitcher.tsx +++ b/src/components/app/LanguageSwitcher.tsx @@ -30,12 +30,9 @@ export function LanguageSwitcher(): React.ReactNode { } return ( - + - - - - - - - - - - - - - - - - - - - - - -
- - -`; diff --git a/src/test/components/__snapshots__/Home.test.tsx.snap b/src/test/components/__snapshots__/Home.test.tsx.snap index 11f8ccb4c8..ab7c516333 100644 --- a/src/test/components/__snapshots__/Home.test.tsx.snap +++ b/src/test/components/__snapshots__/Home.test.tsx.snap @@ -31,38 +31,14 @@ exports[`app/Home renders a button to enable the popup in Firefox 1`] = ` class="appHeaderRightControls" >
- - + />
- - + />
- - + />
- - + />
can publish and revert 1`] = ` - - Docs - + - - Docs -