black7375 / firefox-ui-fix Goto Github PK
View Code? Open in Web Editor NEW🦊 I respect proton UI and aim to improve it.
License: Mozilla Public License 2.0
🦊 I respect proton UI and aim to improve it.
License: Mozilla Public License 2.0
from Reddit comment
Describe the bug
Missing the divide lines between inactive tabs.
Environment (please complete the following information):
Describe the bug
The menu entry "Neues privates Fenster" is shrinked to "Neues privates Fens...".
See the attached screenshot
Expected behavior
"Neues privates Fens..." should appear as "Neues privates Fenster"
Environment (please complete the following information):
Is your feature request related to a problem? Please describe.
No.
Describe the solution you'd like
Either a version that puts the tabs bar below the address and bookmarks bar OR a piece of code I can plop into the css to do it on my own.
Describe alternatives you've considered
Rolling back firefox.
Describe the bug
The following menu items don't have spacing that accounts for the icons, resulting in the icons starting in the icon gutter:
Expected behavior
The text for menu items without an icon should be aligned with the text for menu items with icons.
Environment (please complete the following information):
Is your feature request related to a problem? Please describe.
The default Firefox close-button behaviour is awkward when more than 9 tabs are visible: the close button only appears after you select one of the tabs (when >9 tabs). In addition, your current userChrome.css shows the close button whenever a pinned tab is active, thereby hiding the pinned tab's favicon.
Describe the solution you'd like
I have long been using the following in my own userChrome.css and I respectfully recommend that you include the following code, or its equivalent, in your own userChrome.css file:
.tabbrowser-tab:not([pinned="true"]):hover .tab-close-button:not([selected="true"]) {
display: -moz-box !important;
}
Currently, just adding the above code to your userChrome.css doesn't work as it should. However, I'd like to request that you replicate (in your own userChrome.css) the behaviour of the above code.
Describe alternatives you've considered
The userChrome.css file included in your otherwise excellent package follows the standard Firefox behaviour described above. I believe that my solution is better.
Describe the bug
With Multi-Account Containers extension installed, the menu to select new tab context doesn't display correctly (height is to low) when opened by dragging the new tab button down with left mouse button.
Expected behavior
The menu should be displayed as in the in the original proton theme or like when right-clicking the new tab button.
Screenshots
Proton - Drag down:
Environment (please complete the following information):
First of all, great job! The theme is REALLY beautiful!
I installed the version at 85d6d04.
I am using GNOME 40 (under Xorg with ArchLinux, didn't try Wayland). I find both dark and light themes have broken tabs. The native theme looks find though. Below are screenshots for all three cases:
Describe the bug
Active pinned tab not displaying the favicon
Expected behavior
Active pinned tab should display the favicon
Screenshots
Environment (please complete the following information):
I've installed this UI fix, but it has a really bad side effect: when a pinned tab is selected, it changes the icon to an X for closing the pinned tab. This makes it way too easy to close a pinned tab by accident, contrary to the idea that a pinned tab should be permanent.
Until you fix this, I will have to return to my previously saved profile.
First of all thanks for this repo. I totally agree with the pro/cons about proton on README.
I added this to my local copy:
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0 !important;
}
It removes the gap between pinned and unpinned tabs. Add it to the repo if you think it is a good addition.
Also, as I use a light theme I needed to tweak line 115 and change the color to var(--tabs-border-color)
to get tab separators showing. I am not using any additional theme on Firefox, but with the previous value the tab separators won't show.
background-color: var(--tabs-border-color) !important;
Thanks again and have a nice day.
Is your feature request related to a problem? Please describe.
https://www.reddit.com/r/firefox/comments/nly44l/this_week_proton_fixwill_be_called_lepton_tab/h075uu4?utm_source=share&utm_medium=web2x&context=3
I prefer when all programs has similar design on the system. Windows 10 by default has light titlebars (light theme by default). But Firefox has light controls with dark titlebar (system theme), but it can be fixed by switching to the light theme. And light theme in your fix differs from original photon
u/Yoskaldyr
Describe the solution you'd like
We can consider adjusting color.
Additional context
It's just something to keep in mind.
Light/Dark UI at v110 nightly
Is your feature request related to a problem? Please describe.
The small line below the favicon is very discreet.
The other active container indicators, like the ones in the address bar, are not as visible in the light theme and make the extensions area even more bloated.
Describe the solution you'd like
The line could be extended to the width of the tab (as it was in the previous design), at least for the active tab.
Is your feature request related to a problem? Please describe.
I was referred to this theme as a solution to get the panel icons back and this certainly works for that, however I am wondering if there is a way to customize which features could be installed. I've manually made an icons only edition here
https://github.com/Possibly-Matt/Firefox-UI-Fix
I quite like the floating style tabs, but I like the tab dividers in this theme.
Describe the solution you'd like
A clear and concise description of what you want to happen.
I'm not too well versed on javascript/css or how other themes do this but perhaps a configuration file could be read by js and only specific css run?
My version wasn't too painful to edit because of the good commenting :) so thanks for that. So really customizing this theme should only take as long
Alternatively multiple versions of the addon but that sounds like such a pain to maintain and ultimately not worth it
Describe the bug
https://www.reddit.com/r/firefox/comments/norrv6/lepton_themes_photon_styled/h0afqee
menu/panel has no icon and instead aligns itself closest to the border.
Additional context
Add any other context about the problem here.
Since some time, Firefox has the annoying feature to select the text in the URL bar, when you click it. There is a fix here:
https://github.com/SebastianSimon/firefox-selection-fix
It looks like you could merge your projects into some project that allows to select which features to restore trying to maintain several fixes to the Firefox UI, that were created when the changes were introduced.
Please make folders in the sidebar of the bookmarks completely flooded color, such as blue. Now their frame look is just terrible.
I also want a dedicated tab to be not just highlighted by a blue stripe from above, but there was a complete fill with color, for better visual perception and speed of finding it among a variety of open tabs.
Describe the bug
A clear and concise description of what the bug is.
Please describe how to get the "compact" menus, with smaller vertical spacing.
Expected behavior
A clear and concise description of what you expected to happen.
I expected the menus to be fixed to look like before release 89.0. They are still too spread out vertically. The toolbars look better, though.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
Additional context
Add any other context about the problem here.
Also, there is no background color difference between the three toolbars, hard to see. Also, the active tab is not well highlighted--my eyes are not that good.
The popup menus of folders in bookmarks toolbar have different style from the popup menu of the bookmarks menu toolbar button.
Hi,
Could we add this to the :root
section of your userChrome.css?
--panelui-subview-transition-duration: 1ms !important;
diff --git a/userChrome.css b/userChrome.css
index 30172b6..bc259b0 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -15,6 +15,8 @@
--arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
--arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
--arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
+
+ --panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */
}
:root[uidensity=compact] {
I just don't want to have an annoyingly animating smartphone UI in the top right corner menu. Unfortunately the sliding animation can neither be turned off by setting the OS preference regarding animations, nor by any other option as it's hardcoded into browser.css (within browser/omni.ja).
Thanks.
Describe the bug
When a pinned tab is selected and active, the close button hides the tab's favicon.
Expected behavior
A pinned tab should not have a close button; this goes against the principle of pinning a tab.
Screenshots
See screenshots attached.
Environment (please complete the following information):
Additional context
I've suggested an alternative approach in a separate feature request: #45
I'm using FF on several machines, work, home, notebook, ...
I love the FF feature, that syncs addons across machines. I install a new machine, login to my FF account, and have all addons installed, including AdBlocker,...
If this were an addon, I wouldn't have to see this ugly proton UI at all :)
Love the project, however, in order to become more user-friendly, can you please update the project's README.org file to become more readable?
For instance:
These are just minor issues. All-in-all the project is already good, I just wanted to suggest some cleanup to the README.org to make it easier to read for newcomers.
Is it be possible to change the tab shape and outlining stroke information?
Describe the bug
In the More Tools submenu, "Extensions for Developers has an eyedropper icon, while the eyedropper has a terminal icon.
Expected behavior
The eye dropper has an eye dropper!
Screenshots
Menu -> More Tools
Environment (please complete the following information):
Additional context
None.
I just wanted to express my gratefulness for you having created this theme.
It looks substantially better compared to the default proton ui and chrome.
Describe the bug
No spacing between menu entry and icon in main menu, see also:
Expected behavior
The same space as in all other menus, see for example the addon overflow menu:
Environment (please complete the following information):
Additional context
Love your work, I love the course Mozilla is taking with proton now.
Thanks for your work! this is more straightful ui.
anyway i wonder is there a way to change Context Menu color?
『context menu color will auto correct depend on Background Tab Text Color your theme used』
https://i.imgur.com/7mqFSic.png
the different color just feel strange, is there a way to change it?thanks!
This is part of the plan I have been thinking about since May, and priorities are subject to change.
The first stage is a really light and less interactive neutrino.
By establishing an overall design and addressing various complaints arising from Proton, users should be free from friction when interacting with browsers.
The result of a CSS setup that builds natural UI/UX that is expected or better from a typical browser.
Color
Icon
Padding
Tab
Installer
Others
The second is the electron, which is light and has various chemical bonds.
Make theme optional and scalable.
It is designed in such a way that what used to be multi-source for several distributions is integrated into one source and each has a default value.
Now distros are just a convention, source management and UI customization are easy.
Various compatibility settings and customs that were difficult to apply as defaults can be easily applied with user.js
.
The source changes by introducing SASS and building it.
It is structured and makes it easy to handle complex or frequently used patterns and backwards compatibility.
Minimalism
Tab
Color
The third is the process of creating Lepton's own UI/UX beyond Firefox itself, which is much more massive than electrons as well as neutrinos.
JS introduces dynamic features and implements UI/UX and features that cannot be done with CSS or normal add-ons.
It covers most of the features that a general user would want, and there are enough killing points to consider if you are a Firefox user or even switch to another browser.
Even if JS is introduced, there should be little performance degradation.
After providing the setting UI, build a complete modern web development environment based on TS and Noder.
Until then, there should be no mangling/compression etc. to make it easy for users to add/remove each features.
UI Custom Setting
Animations
Bookmark Animation - Reference
Component
Tab Manage
Setting
Integrantions
Others
The last fourth is Tau, which is 10 times heavier than Muon, adding features for power users and special users, which are no longer seen as light theme layers.
It can be said that almost all the needs of general users have been met through Stage2.
Now, we focus on thinking of various power users or implementing advanced features.
Dedicated Programs
Powerful Tools
Protocol Supports
Describe the bug
The width of a pinned tab is increased when selected as the active tab, visibly pushing other tabs when going between pinned and normal tabs.
Expected behavior
Pinned tabs having the same width when active, so as to not bump other tabs around.
Environment (please complete the following information):
Additional context
Compact mode is enabled.
I'm not 100% sure this deserves to be called a bug, but I wanted to report it anyway.
Thanks so much for making this fix though!
Describe the bug
Image next to firefox sync information in the hamburger menu seems to be broken when firefox sync is active.
Happens on both lepton and photon, didn't test other branches yet
Expected behavior
The mozilla account avatar displayed
Screenshots
Before (Clean environment) | After photon |
---|---|
Environment (please complete the following information):
Describe the solution you'd like
It would be great if you could add icons to the context menu, when right clicking on a webpage. (Save Page As, Screenshot, Search with Google etc...)
Additional context
Thank you for the great work you have done so far.
Is your feature request related to a problem? Please describe.
The close button for a pinned tab is shown instead of the favicon
Describe the solution you'd like
The close button should be replaced by the favicon for the website for aesthetic reasons. Just like in Photon:
https://i.imgur.com/vLcN3rW.png
The current pinned tab situation in Lepton:
https://i.imgur.com/e6JAFJ3.png
Describe alternatives you've considered
N/A
Additional context
This issue is a feature request, and the fix is merely for aesthetic reasons
For my point of view your proposition create a readibility issue as you have now a unique content block. It complicate to easily identicate different part of the menu. Space with a gray pver a gray doesn't reach contrast ration for accessibility and can be unsee for some user, and by removing the spacing you remove the section view.
- /u/mistic_me_meat
Describe the bug
https://www.reddit.com/r/firefox/comments/norrv6/lepton_themes_photon_styled/h07h7uf/
When I try to move the tabs around they all hide slightly behind the address bar. The problem doesn't occur when using "normal" Lepton theme.
Expected behavior
Tabs should always be visible.
Screenshots
https://www.reddit.com/r/FirefoxCSS/comments/nqddcj/tabs_get_pushed_down_when_dragging/
Feature request.
First and foremost, thank you very much for this black7375! It's a very nice layout and redesign tweaking + blending of Photon and Proton. The bookmarks icon has changed to an outline of the folder instead of the fill in coloured version I had previously. Is there a relatively pain free fix for this?
Describe the solution you'd like
Revert back to filled in bookmarks folder icon, as opposed to the outlined version introduced in Proton.
Is your feature request related to a problem? Please describe.
On Windows 7 the header bar is always in lightmode style. Even when using the darkmode it is also white.
Bugzilla issue for that: https://bugzilla.mozilla.org/show_bug.cgi?id=1702480
Possibly an browser selector can be used, so other designs are not affected.
Describe the solution you'd like
Have a workaround for that, so we can see i can see it in dark again.
Describe alternatives you've considered
Wait until mozilla is fixing it.
Describe the bug
A clear and concise description of what the bug is.
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
about:support
- version
]Additional context
Add any other context about the problem here.
There used to be an option to remove/add these buttons bookmark/container on the address bar via page actions (3 dots button). Now it's gone and these buttons are forced here. I don't use these buttons at all (bookmark via drag and drop, container via shortcut). I must not be alone. I tried to play around with no success so far, any help would be really appreciated !
There is now this bottom border below the tab bar that every theme ignore hence it is colored white and that's annoying.
I can't find these elements in the UI, so if anyone knows these I would be gladly to help !
Describe the solution you'd like
Describe alternatives you've considered
Additional context
FF89 - Windows 10
Describe the bug
black pixels around the selected tab bottom corners
Expected behavior
no black pixels around the selected tab bottom corners
Environment (please complete the following information):
Firefox Version: [write from about:support
- version
]
OS:
5.12.7-arch1-1
)Theme:
Additional context
Using Firefox Nightly --> [90.0a1 (2021-05-14) (64-bit)
]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.