black7375 / black7375/Firefox-UI-Fix

Items in the three-dot button context menus in Firefox View don't have icons

Open
#977 0 comments 0 reactions 0 assignees View on GitHub
Class::Icon Component::UserContents Env::Windows Issue::Bug
Dominant language
SCSS
Stars
5.9k
Forks
202
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

In the new Firefox View, the context menus under the three-dots buttons don't have any icons

#### The affected items from menu 1 are:
- Delete from History,
- Open in New Window,
- Open in New Private Window,
- Copy Link.

#### The affected items from menu 2 are:
- Move Tab,
- Pin Tab,
- Mute Tab,
- Copy Link,
- Send Tab to Device.

### Expected behavior

Implement appropriate icons for Firefox View three-dots button context menus.

### Screenshots

#### Menu 1 screenshot:

![Screenshot 2024-09-03 183527](https://github.com/user-attachments/assets/fd7ef73f-384f-4b10-89e4-1e10d57994b1)

#### Menu 2 screenshot:

![Screenshot 2024-09-03 183644](https://github.com/user-attachments/assets/21cbaf12-e7af-468b-a6df-0ebb00536180)

### OS

Windows 10

### OS - Others

_No response_

### Firefox Version

v130.0.0 (64-bit)

### Distribution

- [X] [Original Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [ ] [Lepton's photon style](https://github.com/black7375/Firefox-UI-Fix/tree/photon-style)
- [ ] [Lepton's proton style](https://github.com/black7375/Firefox-UI-Fix/tree/proton-style)

### Theme

- [X] Light
- [X] Dark
- [ ] Alpenglow (System: Light)
- [ ] Alpenglow (System: Dark)
- [ ] System Default
- [ ] Others: (e.g. [Photon Colors](https://addons.mozilla.org/en-US/firefox/addon/photon-colors/), [Google Chrome Dark](https://addons.mozilla.org/en-US/firefox/addon/google-chrome-dark/), [Fairytale Of Nature](https://addons.mozilla.org/en-US/firefox/addon/fairytale-of-nature/))

### Theme - More Info

_No response_

### `user.js` setup

user.js setup

```javascript
// ** Theme Default Options ****************************************************
// userchrome.css usercontent.css activate
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

// Fill SVG Color
user_pref("svg.context-properties.content.enabled", true);

// Restore Compact Mode - 89 Above
user_pref("browser.compactmode.show", true);

// about:home Search Bar - 89 Above
user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false);

// CSS's `:has()` selector #457 - 103 Above
user_pref("layout.css.has-selector.enabled", true);

// Browser Theme Based Scheme - Will be activate 95 Above
// user_pref("layout.css.prefers-color-scheme.content-override", 3);

// ** Theme Related Options ****************************************************
// == Theme Distribution Settings ==============================================
// The rows that are located continuously must be changed `true`/`false` explicitly because there is a collision.
// https://github.com/black7375/Firefox-UI-Fix/wiki/Options#important
user_pref("userChrome.tab.connect_to_window", true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar", true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding", true); // Original
user_pref("userChrome.tab.photon_like_padding", false); // Photon

user_pref("userChrome.tab.dynamic_separator", true); // Original, Proton
user_pref("userChrome.tab.static_separator", false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab", true); // Original
user_pref("userChrome.tab.newtab_button_smaller", false); // Photon
user_pref("userChrome.tab.newtab_button_proton", false); // Proton

user_pref("userChrome.icon.panel_full", true); // Original, Proton
user_pref("userChrome.icon.panel_photon", false); // Photon

// Original Only
user_pref("userChrome.tab.box_shadow", true);
user_pref("userChrome.tab.bottom_rounded_corner", true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline", false);
user_pref("userChrome.rounding.square_tab", false);

// == Theme Compatibility Settings =============================================
// user_pref("userChrome.compatibility.accent_color", true); // Firefox v103 Below
// user_pref("userChrome.compatibility.covered_header_image", true);
// user_pref("userChrome.compatibility.panel_cutoff", true);
// user_pref("userChrome.compatibility.navbar_top_border", true);
// user_pref("userChrome.compatibility.dynamic_separator", true); // Need dynamic_separator

// user_pref("userChrome.compatibility.os.linux_non_native_titlebar_button", true);
// user_pref("userChrome.compatibility.os.windows_maximized", true);
// user_pref("userChrome.compatibility.os.win11", true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
// user_pref("userChrome.theme.private", true);
// user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
// user_pref("userChrome.theme.monospace", true);
// user_pref("userChrome.theme.transparent.frame", true);
// user_pref("userChrome.theme.transparent.menu", true);
// user_pref("userChrome.theme.transparent.panel", true);
// user_pref("userChrome.theme.non_native_menu", true); // only for linux

// user_pref("userChrome.decoration.disable_panel_animate", true);
// user_pref("userChrome.decoration.disable_sidebar_animate", true);
// user_pref("userChrome.decoration.panel_button_separator", true);
// user_pref("userChrome.decoration.panel_arrow", true);

// user_pref("userChrome.autohide.tab", true);
// user_pref("userChrome.autohide.tab.opacity", true);
// user_pref("userChrome.autohide.tab.blur", true);
// user_pref("userChrome.autohide.tabbar", true);
// user_pref("userChrome.autohide.navbar", true);
// user_pref("userChrome.autohide.bookmarkbar", true);
// user_pref("userChrome.autohide.sidebar", true);
// user_pref("userChrome.autohide.fill_urlbar", true);
// user_pref("userChrome.autohide.back_button", true);
// user_pref("userChrome.autohide.forward_button", true);
// user_pref("userChrome.autohide.page_action", true);
// user_pref("userChrome.autohide.toolbar_overlap", true);
// user_pref("userChrome.autohide.toolbar_overlap.allow_layout_shift", true);

// user_pref("userChrome.hidden.tab_icon", true);
// user_pref("userChrome.hidden.tab_icon.always", true);
// user_pref("userChrome.hidden.tabbar", true);
// user_pref("userChrome.hidden.navbar", true);
// user_pref("userChrome.hidden.private_indicator", true);
// user_pref("userChrome.hidden.titlebar_container", true);
// user_pref("userChrome.hidden.sidebar_header", true);
// user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true);
// user_pref("userChrome.hidden.urlbar_iconbox", true);
// user_pref("userChrome.hidden.urlbar_iconbox.label_only", true);
// user_pref("userChrome.hidden.bookmarkbar_icon", true);
// user_pref("userChrome.hidden.bookmarkbar_label", true);
// user_pref("userChrome.hidden.disabled_menu", true);

// user_pref("userChrome.centered.tab", true);
// user_pref("userChrome.centered.tab.label", true);
// user_pref("userChrome.centered.urlbar", true);
// user_pref("userChrome.centered.bookmarkbar", true);

// user_pref("userChrome.counter.tab", true);
// user_pref("userChrome.counter.bookmark_menu", true);

// user_pref("userChrome.combined.nav_button", true);
// user_pref("userChrome.combined.nav_button.home_button", true);
// user_pref("userChrome.combined.urlbar.nav_button", true);
// user_pref("userChrome.combined.urlbar.home_button", true);
// user_pref("userChrome.combined.urlbar.reload_button", true);
// user_pref("userChrome.combined.sub_button.none_background", true);
// user_pref("userChrome.combined.sub_button.as_normal", true);

// user_pref("userChrome.rounding.square_button", true);
// user_pref("userChrome.rounding.square_dialog", true);
// user_pref("userChrome.rounding.square_panel", true);
// user_pref("userChrome.rounding.square_panelitem", true);
// user_pref("userChrome.rounding.square_menupopup", true);
// user_pref("userChrome.rounding.square_menuitem", true);
// user_pref("userChrome.rounding.square_infobox", true);
// user_pref("userChrome.rounding.square_toolbar", true);
// user_pref("userChrome.rounding.square_field", true);
// user_pref("userChrome.rounding.square_urlView_item", true);
// user_pref("userChrome.rounding.square_checklabel", true);

// user_pref("userChrome.padding.first_tab", true);
// user_pref("userChrome.padding.first_tab.always", true);
// user_pref("userChrome.padding.drag_space", true);
// user_pref("userChrome.padding.drag_space.maximized", true);

// user_pref("userChrome.padding.toolbar_button.compact", true);
// user_pref("userChrome.padding.menu_compact", true);
// user_pref("userChrome.padding.bookmark_menu.compact", true);
// user_pref("userChrome.padding.urlView_expanding", true);
// user_pref("userChrome.padding.urlView_result", true);
// user_pref("userChrome.padding.panel_header", true);

// user_pref("userChrome.urlbar.iconbox_with_separator", true);

// user_pref("userChrome.urlView.as_commandbar", true);
// user_pref("userChrome.urlView.full_width_padding", true);
// user_pref("userChrome.urlView.always_show_page_actions", true);
// user_pref("userChrome.urlView.move_icon_to_left", true);
// user_pref("userChrome.urlView.go_button_when_typing", true);
// user_pref("userChrome.urlView.focus_item_border", true);

// user_pref("userChrome.tabbar.as_titlebar", true);
// user_pref("userChrome.tabbar.fill_width", true);
// user_pref("userChrome.tabbar.multi_row", true);
// user_pref("userChrome.tabbar.unscroll", true);
// user_pref("userChrome.tabbar.on_bottom", true);
// user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom
// user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom
// user_pref("userChrome.tabbar.on_bottom.hidden_single_tab", true); // Need on_bottom
// user_pref("userChrome.tabbar.one_liner", true);
// user_pref("userChrome.tabbar.one_liner.combine_navbar", true); // Need one_liner
// user_pref("userChrome.tabbar.one_liner.tabbar_first", true); // Need one_liner
// user_pref("userChrome.tabbar.one_liner.responsive", true); // Need one_liner

// user_pref("userChrome.tab.bottom_rounded_corner.all", true);
// user_pref("userChrome.tab.bottom_rounded_corner.australis", true);
// user_pref("userChrome.tab.bottom_rounded_corner.edge", true);
// user_pref("userChrome.tab.bottom_rounded_corner.chrome", true);
// user_pref("userChrome.tab.bottom_rounded_corner.chrome_legacy", true);
// user_pref("userChrome.tab.bottom_rounded_corner.wave", true);
// user_pref("userChrome.tab.always_show_tab_icon", true);
// user_pref("userChrome.tab.close_button_at_pinned", true);
// user_pref("userChrome.tab.close_button_at_pinned.always", true);
// user_pref("userChrome.tab.close_button_at_pinned.background", true);
// user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover
// user_pref("userChrome.tab.close_button_at_hover.with_selected", true); // Need close_button_at_hover
// user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label
// user_pref("userChrome.tab.container.on_top", true);
// user_pref("userChrome.tab.container.always_long", true);
// user_pref("userChrome.tab.sound_with_favicons.on_center", true);
// user_pref("userChrome.tab.selected_bold", true);

// user_pref("userChrome.navbar.as_sidebar", true);

// user_pref("userChrome.bookmarkbar.multi_row", true);

// user_pref("userChrome.findbar.floating_on_top", true);

// user_pref("userChrome.panel.remove_strip", true);
// user_pref("userChrome.panel.full_width_separator", true);
// user_pref("userChrome.panel.full_width_padding", true);

// user_pref("userChrome.sidebar.overlap", true);

// user_pref("userChrome.icon.disabled", true);
// user_pref("userChrome.icon.account_image_to_right", true);
// user_pref("userChrome.icon.account_label_to_right", true);
// user_pref("userChrome.icon.menu.full", true);
// user_pref("userChrome.icon.global_menu.mac", true);

// -- User Content -------------------------------------------------------------
// user_pref("userContent.player.ui.twoline", true);

// user_pref("userContent.newTab.hidden_logo", true);
// user_pref("userContent.newTab.background_image", true); // Need wallpaper image to `userContent.css`. :root { --uc-newTab-wallpaper: url("../icons/background_image.png"); }

// user_pref("userContent.page.proton_color.dark_blue_accent", true);
// user_pref("userContent.page.proton_color.system_accent", true);
// user_pref("userContent.page.dark_mode.pdf", true);
// user_pref("userContent.page.monospace", true);

// == Theme Default Settings ===================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.compatibility.theme", true);
user_pref("userChrome.compatibility.os", true);

user_pref("userChrome.theme.built_in_contrast", true);
user_pref("userChrome.theme.system_default", true);
user_pref("userChrome.theme.proton_color", true);
user_pref("userChrome.theme.proton_chrome", true); // Need proton_color
user_pref("userChrome.theme.fully_color", true); // Need proton_color
user_pref("userChrome.theme.fully_dark", true); // Need proton_color

user_pref("userChrome.decoration.cursor", true);
user_pref("userChrome.decoration.field_border", true);
user_pref("userChrome.decoration.download_panel", true);
user_pref("userChrome.decoration.animate", true);

user_pref("userChrome.padding.tabbar_width", true);
user_pref("userChrome.padding.tabbar_height", true);
user_pref("userChrome.padding.toolbar_button", true);
user_pref("userChrome.padding.navbar_width", true);
user_pref("userChrome.padding.urlbar", true);
user_pref("userChrome.padding.bookmarkbar", true);
user_pref("userChrome.padding.infobar", true);
user_pref("userChrome.padding.menu", true);
user_pref("userChrome.padding.bookmark_menu", true);
user_pref("userChrome.padding.global_menubar", true);
user_pref("userChrome.padding.panel", true);
user_pref("userChrome.padding.popup_panel", true);

user_pref("userChrome.tab.multi_selected", true);
user_pref("userChrome.tab.unloaded", true);
user_pref("userChrome.tab.letters_cleary", true);
user_pref("userChrome.tab.close_button_at_hover", true);
user_pref("userChrome.tab.sound_hide_label", true);
user_pref("userChrome.tab.sound_with_favicons", true);
user_pref("userChrome.tab.pip", true);
user_pref("userChrome.tab.container", true);
user_pref("userChrome.tab.crashed", true);

user_pref("userChrome.fullscreen.overlap", true);
user_pref("userChrome.fullscreen.show_bookmarkbar", true);

user_pref("userChrome.icon.library", true);
user_pref("userChrome.icon.panel", true);
user_pref("userChrome.icon.menu", true);
user_pref("userChrome.icon.context_menu", true);
user_pref("userChrome.icon.global_menu", true);
user_pref("userChrome.icon.global_menubar", true);
user_pref("userChrome.icon.1-25px_stroke", true);

// -- User Content -------------------------------------------------------------
user_pref("userContent.player.ui", true);
user_pref("userContent.player.icon", true);
user_pref("userContent.player.noaudio", true);
user_pref("userContent.player.size", true);
user_pref("userContent.player.click_to_play", true);
user_pref("userContent.player.animate", true);

user_pref("userContent.newTab.full_icon", true);
user_pref("userContent.newTab.animate", true);
user_pref("userContent.newTab.pocket_to_last", true);
user_pref("userContent.newTab.searchbar", true);

user_pref("userContent.page.field_border", true);
user_pref("userContent.page.illustration", true);
user_pref("userContent.page.proton_color", true);
user_pref("userContent.page.dark_mode", true); // Need proton_color
user_pref("userContent.page.proton", true); // Need proton_color

// ** Useful Options ***********************************************************
// Tab preview
// https://blog.nightly.mozilla.org/2024/02/06/a-preview-of-tab-previews-these-weeks-in-firefox-issue-153/
user_pref("browser.tabs.cardPreview.enabled", true);

// Paste suggestion at urlbar
// https://blog.nightly.mozilla.org/2023/12/04/url-gonna-want-to-check-this-out-these-weeks-in-firefox-issue-150/
user_pref("browser.urlbar.clipboard.featureGate", true);

// Integrated calculator at urlbar
user_pref("browser.urlbar.suggest.calculator", true);

// Integrated unit convertor at urlbar
// user_pref("browser.urlbar.unitConversion.enabled", true);

// Draw in Titlebar
// user_pref("browser.tabs.drawInTitlebar", true);
// user_pref("browser.tabs.inTitlebar", 1); // Nightly, 96 Above

// Searchbar, Removed from settings starting with FF v122
// user_pref("browser.search.widget.inNavBar", true);

// Firefox view search
// https://blog.nightly.mozilla.org/2023/12/14/better-searching-in-firefox-to-close-out-2023-these-weeks-in-firefox-issue-151/
// user_pref("browser.firefox-view.search.enabled", true);
// user_pref("browser.firefox-view.virtual-list.enabled", true);

// Firefox screenshot
// https://blog.nightly.mozilla.org/2024/01/22/happy-new-year-these-weeks-in-firefox-issue-152/
// user_pref("screenshots.browser.component.enabled", true);

// ** Scrolling Settings *******************************************************
// == Only Sharpen Scrolling ===================================================
// Pref Value Original
/*
user_pref("mousewheel.min_line_scroll_amount", 10); // 5
user_pref("general.smoothScroll.mouseWheel.durationMinMS", 80); // 50
user_pref("general.smoothScroll.currentVelocityWeighting", "0.15"); // "0.25"
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); // "0.4"
*/

// == Smooth Scrolling ==========================================================
// ** Scrolling Options ********************************************************
// based on natural smooth scrolling v2 by aveyo
// this preset will reset couple extra variables for consistency
// Pref Value Original
/*
user_pref("apz.allow_zooming", true); /// true
user_pref("apz.force_disable_desktop_zooming_scrollbars", false); /// false
user_pref("apz.paint_skipping.enabled", true); /// true
user_pref("apz.windows.use_direct_manipulation", true); /// true
user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true); /// false
user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); /// "0.25" <- 1. If scroll too slow, set to "0.15"
user_pref("general.smoothScroll.durationToIntervalRatio", 1000); /// 200
user_pref("general.smoothScroll.lines.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.lines.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.mouseWheel.durationMaxMS", 100); /// 200
user_pref("general.smoothScroll.mouseWheel.durationMinMS", 0); /// 50
user_pref("general.smoothScroll.mouseWheel.migrationPercent", 100); /// 100
user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12); /// 120
user_pref("general.smoothScroll.msdPhysics.enabled", true); /// false
user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200); /// 1250
user_pref("general.smoothScroll.msdPhysics.regularSpringConstant", 200); /// 1000
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS", 10); /// 12
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio", "1.20"); /// "1.3"
user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant", 1000); /// 2000
user_pref("general.smoothScroll.other.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.other.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.pages.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.pages.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.pixels.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.pixels.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.scrollbars.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.scrollbars.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); /// "0.4"
user_pref("layers.async-pan-zoom.enabled", true); /// true
user_pref("layout.css.scroll-behavior.spring-constant", "250.0"); /// "250.0"
user_pref("mousewheel.acceleration.factor", 3); /// 10
user_pref("mousewheel.acceleration.start", -1); /// -1
user_pref("mousewheel.default.delta_multiplier_x", 100); /// 100
user_pref("mousewheel.default.delta_multiplier_y", 100); /// 100
user_pref("mousewheel.default.delta_multiplier_z", 100); /// 100
user_pref("mousewheel.min_line_scroll_amount", 0); /// 5
user_pref("mousewheel.system_scroll_override.enabled", true); /// true <- 2. If scroll too fast, set to false
user_pref("mousewheel.system_scroll_override_on_root_content.enabled", false); /// true
user_pref("mousewheel.transaction.timeout", 1500); /// 1500
user_pref("toolkit.scrollbox.horizontalScrollDistance", 4); /// 5
user_pref("toolkit.scrollbox.verticalScrollDistance", 3); /// 3
*/
```

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating the Firefox View three-dot context-menu styles and icon definitions in the project, then compare both affected menus with existing menu-item icon patterns. Done means the listed items in both menus display appropriate icons in the Original Lepton style under the reported light and dark themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
scss
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.