Padding and menu background issues #136

dokax · 2021-08-08T10:57:15Z

Kuzlata · 2021-08-09T10:28:05Z

Same issue on Photon Style and Proton Style.

black7375 · 2021-08-09T15:35:34Z

Bookmarks menu now well visible

How can I check the second and third?

Second: I don't know what the menu is.
In my browser, the Repair text encoding button is displayed as disabled.

dokax · 2021-08-09T16:01:30Z

How can I check the second and third?

Ctrl+H -> View

* In my browser, the `Repair text encoding` button is displayed as disabled.

I don't know why it's disabled in yours, I'm on Firefox 90.0.2

black7375 · 2021-08-09T16:05:58Z

Thank you for the information.
I'll try to find the relevant information tomorrow.

black7375 · 2021-08-10T14:49:41Z

History sorting menu should work fine now

But as I said before, the Repair text encoding button is still disabled, so I'm not sure.

dokax · 2021-08-10T15:53:02Z

Sorting menu is fixed now, but bookmarks menu and repair text encoding menu are still not fixed.

Kuzlata · 2021-08-12T17:17:37Z

I can confirm that bookmarks menu bug was fixed with this commit c458c44
But with the release of v3.0.0 it is not fixed.

Edit: Found the issue. In the latest userChrome.css this line is missing #mainPopupSet > menupopup {
Put it back and it looks fine

AntonZur · 2021-08-13T14:14:45Z

Bookmarks menu bug was fixed, but shadow error in folders in Bookmarks Bar still alive.

black7375 · 2021-08-13T14:23:07Z

@AntonZur
Added as an exception!
Thanks for the detailed report with screenshots.

@Vulatera
Could you test next steps?

Run Browser Toolbox after activate
https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
menupopup's style

/* My environment */
menupopup {
    appearance: none;
    -moz-window-shadow: cliprounded;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    --panel-color: var(--menu-color);
    --panel-border-radius: 4px;
    --panel-padding: 4px 0;
    --panel-border-color: var(--menu-border-color);
    --panel-background: var(--menu-background-color);
    --nested-margin: -6px;
}

arrowscrollbox's style

/* My environment */
:is(panel, menupopup)::part(content) {
    display: -moz-box;
    -moz-box-flex: 1;
    padding: var(--panel-padding);
    color: var(--panel-color);
    background: var(--panel-background);
    border-radius: var(--panel-border-radius);
    border: 1px solid var(--panel-border-color);
    width: var(--panel-width);
}

test

:root,
menupopup {
  --panel-color: var(--menu-color) !important;
  --panel-background: var(--menu-background-color) !important;
}
.menupopup-arrowscrollbox {
  color: var(--panel-color) !important;
  background: var(--panel-background) !important;
}

If my guess is correct, the following script should work.

Improved compatibility will help many people.

Kuzlata · 2021-08-13T20:29:56Z

@black7375
Ok with these steps I am unable to cope with due to the fact my experience in CSS is on a greenhorn level.
Hopefully someone else with more knowledge can do the test.

black7375 · 2021-08-18T15:43:06Z

@dokax

Sorting menu is fixed now, but bookmarks menu and repair text encoding menu are still not fixed.

Maybe it has been fixed!!

Thanks for the report.
A little late.

We are now closing this issue as we believe it has all been resolved.
Other branches(photon-style, proton-style) will be reflected tomorrow.

dokax · 2021-08-19T15:56:43Z

Maybe it has been fixed!!

No, it's still not fixed.
https://imgur.com/9pPPo7R

New issue.

dokax · 2021-08-21T16:33:58Z

Just let you know that I installed the latest version , but it seems still not fixed.

Commits ebe9043 and e92046b seems not working for me.

Thank you for your effort.

black7375 · 2021-08-21T16:43:21Z

Bookmark menu is menu, but it is a kind of edge case that looks like panel, so there are many exceptions.
There was a review of the overall code and it now works on 4e4b27d for me.

But looking at the screenshot of OP, the icons are strangely narrow.

Firefox-UI-Fix/userChrome.css

Lines 1606 to 1607 in 69cbe1d

    
           :not(menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), 
        
           :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),

In my code, if icons exist, I intentionally exclude it from the padding, margin adjust.

dokax · 2021-08-22T04:58:32Z

There was a review of the overall code and it now works on 4e4b27d for me.

It doesn't work for me.

I'm using Win10 21H1 19043.1165

- [lp]: padding-left - [rp]: padding-right - [rm]: margin-right /** Global Menu Bookmark *****************************************************/ /*= Global Menu * menuitem, menu: var(--context-menu-background-padding)[lp] */ menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { padding-inline-start: var(--context-menu-background-padding) !important; } /*= Bookmark * menu: 0.5em[lp] */ menupopup > menu { padding-inline-start: 0.5em; } /*= Result ===== * 0.5em => var(--context-menu-background-padding) */ menupopup:is(#goPopup, #bookmarksMenuPopup) .bookmark-item { padding-inline-start: var(--context-menu-background-padding) !important; } /** Popup Menu Bookmark ******************************************************/ /*= General ================================================================== /* = Arrowpanel * .subviewbutton: var(--arrowpanel-menuitem-padding)[lp] * .menu-text: 16[icon] + 8px[lp] = 24px * * Result: var(--arrowpanel-menuitem-padding) + 24px */ .subviewbutton { padding: var(--arrowpanel-menuitem-padding); } /*= Icon Bookmark * .subviewbutton: var(--arrowpanel-menuitem-padding)[lp] * .menu-iconic-left: 16px[icon] + 3px[rp] + 2px[rm] = 21px * .menu-iconic-text: 8px[lp] * * Result: var(--arrowpanel-menuitem-padding) + 29px */ \#BMB_bookmarksPopup .subviewbutton { padding: var(--arrowpanel-menuitem-padding); } \#BMB_bookmarksPopup hbox.menu-iconic-left { padding-inline-end: 3px !important; margin-inline-end: 2px !important; } \#BMB_bookmarksPopup label.menu-iconic-text { padding-inline-start: 8px; } /*= Result ===== * Diff Length: 24 - 29 = -5 * Reduce Target Length: 8 - 5 = 3 */ \#BMB_bookmarksPopup label.menu-iconic-text { padding-inline-start: 3px !important; } /*= None Icon Bookmark ===================================================== * .subviewbutton: var(--arrowpanel-menuitem-padding)[lp] * .menu-text: 21px[lp] * * Result: var(--arrowpanel-menuitem-padding) + 21px */ \#BMB_bookmarksPopup label.menu-text { margin-inline-start: 21px !important; padding-inline-start: 0 !important; } /*= Result ===== * Diff Length: 24 - 21 = 3 * Increase Target Length: 3 */ menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; }

- [lp]: padding-left - [rp]: padding-right - [rm]: margin-right /** Global Menu Bookmark *****************************************************/ /* None: Mac doesnt have global menu bookmark in browser */ /** Popup Menu Bookmark ******************************************************/ /*= General =================================================================*/ /* = Arrowpanel * .subviewbutton: var(--arrowpanel-menuitem-padding)[lp] * .toolbarbarbutton-icon: 16px[icon] * .toolbarbarbutton-text: var(--arrowpanel-menuicon-padding, 8px)[lp] * * Result: var(--arrowpanel-menuitem-padding) + var(--arrowpanel-menuicon-padding) + 16px */ /* = Icon Bookmark * .subviewbutton: var(--arrowpanel-menuitem-padding)[lp] * .menu-iconic-left: 3px[rm] * .menu-iconic-icon: 16px[icon] + 5px[rm] * * Result: var(--arrowpanel-menuitem-padding) + 24px */ \#BMB_bookmarksPopup .subviewbutton { padding: var(--arrowpanel-menuitem-padding); } \#BMB_bookmarksPopup .subviewbutton > .menu-iconic-left { margin-inline-end: 3px; } .menu-iconic-icon { margin-inline-end: 5px; 8px /*= Result ===== * DONT TOUCH */ /*= Empty Icon at list ======================================================*/ .subviewbutton:not([image], [targetURL], .bookmert-item) > .menu-iconic-left { display: none; } menu, menuitem, menucaption { list-style-iamge: none; } /*= Result ===== * Show Icon */ \#BMB_bookmarksShowAllTop { list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important; } \#BMB_bookmarksShowAllTop > .menu-conic-left { display: -moz-box !important; } /*= None Icon Bookmark ===================================================== * .subviewbutton: var(--context-menu-background-padding)[lp, rp] * .menu-text: 21px[lp] * * Result(Icon): var(--context-menu-background-padding) * Result(Text): var(--context-menu-background-padding) + 21px */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), \#blockedPopupDontShowMessage { /* Icon */ background-position: left var(--context-menu-background-padding) center !important; /* Text */ padding-inline-start: var(--context-menu-background-padding) !important; } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root { --context-menu-background-padding-default: 10px; --context-menu-mac-padding: 21px; } /* .subviewbutton - rp */ :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist), #blockedPopupDontShowMessage { padding-inline-end: var(--context-menu-background-padding) !important; /* same as var(--context-menu-background-padding-default) */ } } /*= Result ===== * Result(Icon): --context-menu-background-padding to var(--arrowpanel-menuitem-padding) * Result(Text): * (var(--arrowpanel-menuitem-padding) + 24px)) - (var(--arrowpanel-menuitem-padding) + 21px) = 3px */ \#BMB_bookmarksPopup { --context-menu-background-padding: var(--arrowpanel-menuitem-padding); } menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) { padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important; }

/* Global */ menupopup > menuitem, menupopup > menu { padding-inline-start: 1em; } .menu-iconic > .menu-iconic-left, .menuitem-iconic > .menu-iconic-left { margin-inline-end: 8px; } /* 16px + 8px => 24px */ menupopup:is(#goPopup, #bookmarksMenuPopup) menuitem:not(.menuitem-iconic, [disabled="true"]), menupopup:is(#goPopup, #bookmarksMenuPopup) menu:not(.menu-iconic) { margin-inline: 0 !important; padding-inline-start: calc(1em + 16px + 8px) !important; background-position: left 1em center !important; } /*BMB*/ #BMB_bookmarksPopup .subviewbutton { padding: var(--arrowpanel-menuitem-padding); /* 5px */ } .subviewbutton { margin-inline: var(--arrowpanel-menuicon-padding); } #BMB_bookmarksPopup .subviewbutton > .menu-iconic-text, #PlacesToolbar menu > .menu-iconic-text, #PlacesToolbar menuitem > .menu-iconic-text, .addon-banner-item > .toolbarbutton-text, .subviewbutton-iconic > .toolbarbutton-text, .subviewbutton[image] > .toolbarbutton-text, .subviewbutton[targetURI] > .toolbarbutton-text, .subviewbutton.bookmark-item > .toolbarbutton-text, .subviewbutton[checked="true"] > .toolbarbutton-text { padding-inline-start: 8px; }

black7375 · 2021-10-10T14:54:51Z

There have been quite a few changes and updates.
Is it the same in the latest version?

black7375 · 2021-10-13T01:49:57Z

It seems to work fine in the latest version.

dokax added the Issue::Bug Something isn't working label Aug 8, 2021

black7375 added Class::Padding Padding and margin related layout Compenent::Panel Panel menu (not pop-up) Env::Windows Issues on Windows10, Windows11, unknown windows labels Aug 9, 2021

black7375 added a commit that referenced this issue Aug 9, 2021

Fix: Bookmarks menu padding and icons #136

c458c44

black7375 added a commit that referenced this issue Aug 10, 2021

Fix: Context Menu - Checked item's padding #136

3071f2b

black7375 added a commit that referenced this issue Aug 13, 2021

Fix: Bookmark Menu - Remove shadow #136 #140

425d4e5

black7375 mentioned this issue Aug 13, 2021

The problem with shadows #160

Closed

12 tasks

black7375 added a commit that referenced this issue Aug 13, 2021

Fix: Book toolbar menu - Remove shadow #136

30b85af

black7375 added a commit that referenced this issue Aug 14, 2021

Fix: Panel - Checkbox item padding #136

6d86cb9

black7375 mentioned this issue Aug 14, 2021

Context menu is white-on-white colors in both light and dark themes #157

Closed

12 tasks

black7375 added a commit that referenced this issue Aug 14, 2021

Fix: Book toolbar menu - Remove shadow again #136

c67462d

black7375 added a commit that referenced this issue Aug 18, 2021

Fix: Menu - Bookmark menu icon align #136

d60cd4d

black7375 closed this as completed Aug 18, 2021

black7375 reopened this Aug 20, 2021

black7375 added a commit that referenced this issue Aug 21, 2021

Fix: Bookmar menu - align #136

e92046b

black7375 added a commit that referenced this issue Aug 21, 2021

Add: Identity Popup - Icons #136

790cccb

black7375 added a commit that referenced this issue Aug 21, 2021

Fix: Bookmark Menu - remove padding at empty item #136

ffce143

black7375 added a commit that referenced this issue Aug 21, 2021

Fix: Bookmark Menu - remove padding at empty item #136

4e4b27d

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Bookmarks menu padding and icons #136

40d31b0

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Context Menu - Checked item's padding #136

26141ef

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Bookmark Menu - Remove shadow #136 #140

4681187

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Book toolbar menu - Remove shadow #136

377d29f

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Panel - Checkbox item padding #136

806c707

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Book toolbar menu - Remove shadow again #136

be91b04

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Menu - Bookmark menu icon align #136

6d91c1a

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Bookmar menu - align #136

ede090f

black7375 added a commit that referenced this issue Aug 25, 2021

Add: Identity Popup - Icons #136

86c52ef

black7375 added a commit that referenced this issue Aug 25, 2021

Fix: Bookmark Menu - remove padding at empty item #136

6da336d

black7375 mentioned this issue Aug 30, 2021

Inconsistent spacing between bookmarks menu folder items #201

Closed

13 tasks

black7375 added a commit that referenced this issue Sep 11, 2021

Fix: Global Bookmark Menu - padding at windows10 #136

96f670d

black7375 added a commit that referenced this issue Sep 12, 2021

Fix: Bookmar Menu - Padding at windows7 #136

d662a23

black7375 closed this as completed Oct 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Padding and menu background issues #136

Padding and menu background issues #136

dokax commented Aug 8, 2021 •

edited by black7375

Loading

Kuzlata commented Aug 9, 2021

black7375 commented Aug 9, 2021

dokax commented Aug 9, 2021

black7375 commented Aug 9, 2021

black7375 commented Aug 10, 2021

dokax commented Aug 10, 2021

Kuzlata commented Aug 12, 2021 •

edited

Loading

AntonZur commented Aug 13, 2021

black7375 commented Aug 13, 2021

Kuzlata commented Aug 13, 2021

black7375 commented Aug 18, 2021

dokax commented Aug 19, 2021 •

edited by black7375

Loading

dokax commented Aug 21, 2021

black7375 commented Aug 21, 2021

dokax commented Aug 22, 2021

black7375 commented Oct 10, 2021

black7375 commented Oct 13, 2021

Padding and menu background issues #136

Padding and menu background issues #136

Comments

dokax commented Aug 8, 2021 • edited by black7375 Loading

Kuzlata commented Aug 9, 2021

black7375 commented Aug 9, 2021

dokax commented Aug 9, 2021

black7375 commented Aug 9, 2021

black7375 commented Aug 10, 2021

dokax commented Aug 10, 2021

Kuzlata commented Aug 12, 2021 • edited Loading

AntonZur commented Aug 13, 2021

black7375 commented Aug 13, 2021

Kuzlata commented Aug 13, 2021

black7375 commented Aug 18, 2021

dokax commented Aug 19, 2021 • edited by black7375 Loading

dokax commented Aug 21, 2021

black7375 commented Aug 21, 2021

dokax commented Aug 22, 2021

black7375 commented Oct 10, 2021

black7375 commented Oct 13, 2021

dokax commented Aug 8, 2021 •

edited by black7375

Loading

Kuzlata commented Aug 12, 2021 •

edited

Loading

dokax commented Aug 19, 2021 •

edited by black7375

Loading