Skip to content

Replace the footer-links overlay with a settings menu#6042

Open
fatadel wants to merge 2 commits into
firefox-devtools:mainfrom
fatadel:update-menu
Open

Replace the footer-links overlay with a settings menu#6042
fatadel wants to merge 2 commits into
firefox-devtools:mainfrom
fatadel:update-menu

Conversation

@fatadel
Copy link
Copy Markdown
Contributor

@fatadel fatadel commented May 21, 2026

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.

Profile

@fatadel fatadel requested a review from a team as a code owner May 21, 2026 17:20
@codecov
Copy link
Copy Markdown

codecov Bot commented May 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.77%. Comparing base (3182970) to head (9df3bb4).
⚠️ Report is 33 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6042      +/-   ##
==========================================
- Coverage   83.78%   83.77%   -0.02%     
==========================================
  Files         329      329              
  Lines       34528    34548      +20     
  Branches     9659     9669      +10     
==========================================
+ Hits        28930    28943      +13     
- Misses       5169     5176       +7     
  Partials      429      429              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fatadel fatadel requested review from canova, fqueze and mstange May 22, 2026 09:01
@mstange
Copy link
Copy Markdown
Contributor

mstange commented May 22, 2026

Looks pretty good to me! But I would suggest the following changes:

/* index-MUJPC5U5.css | https://deploy-preview-6042--perf-html.netlify.app/index-MUJPC5U5.css */

.settingsMenuLink {
  /* padding: 6px 14px; */
  /* font-weight: 600; */
  padding: 4px 14px;
}

.settingsMenuPanel {
  /* font-size: 13px; */
  /* font-weight: 400; */
  font-size: 12px;
}

.arrowPanelContent {
  /* --internal-approx-distance-from-top: 60px; */
  /* --internal-approx-distance-to-bottom: 100px; */
  --internal-approx-distance-from-top: 20px;
  --internal-approx-distance-to-bottom: 5px;
}

This reduces the font-size to something that's less aggressive, and makes it so that the panel doesn't get squished as early when you resize the browser.

@mstange
Copy link
Copy Markdown
Contributor

mstange commented May 22, 2026

The word "Docs" now looks a bit out of place. I think we should change it to "Documentation", now that we're no longer as space constrained horizontally.

@mstange
Copy link
Copy Markdown
Contributor

mstange commented May 22, 2026

Oh and how would you feel about putting a <i class="open-in-new"></i> icon in every link in that menu, just like we had for the old Docs button?

@fatadel
Copy link
Copy Markdown
Contributor Author

fatadel commented May 26, 2026

Thanks for your feedback, @mstange!

I've only now noticed that the arrow looks super weird.

image

However, there is no easy way to make it look good because the cog is at the very top right corner. I can make it look like this compromising the margin on the right.

image

Or I can completely remove the arrow sacrificing consistency with other popovers.

image

What would you prefer @mstange, @canova?

@mstange
Copy link
Copy Markdown
Contributor

mstange commented May 26, 2026

Let's keep the arrow and compromise the right margin a bit. We could also make the arrow a bit smaller, for all panels of this type.

fatadel added 2 commits May 27, 2026 14:48
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.
Shrink the popover arrow from 15px to 10px (affects all popovers).
In the settings menu: rename "Docs" to "Documentation", show an
external-link icon on each link, semi-bold the links, and add a
right-aligned mode so the panel pins to the viewport edge in the
profile-viewer top bar.
@fatadel
Copy link
Copy Markdown
Contributor Author

fatadel commented May 27, 2026

Done ✅
Thanks for the feedback, @mstange! I've now added the changes. Also, slightly reduced the size of the arrow (15px -> 10px) - looks better everywhere to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants