Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up popup.css #180

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft

Clean up popup.css #180

wants to merge 8 commits into from

Conversation

Madis0
Copy link
Contributor

@Madis0 Madis0 commented Nov 8, 2019

The new popups look very Chrome-ish, so the majority of the styles are no longer needed in my opinion. The separator lines and "Permissions" heading are also no longer needed as there are only two sections now. I removed the connection security icon as it didn't match the address bar one and doesn't exist in Chrome's page popup.

Current

However, this is a draft pull request as there is still some work to be done:

  • Align the right arrow correctly with the "Connection secure" text
  • "Clear cookies and site data..." should have a cookie icon
  • "More information" (inside the arrow subsection) should have a certificate icon
  • "Show all downloads" (inside download popup) should have a download icon

@muckSponge
Copy link
Owner

I've got mine looking like this at the moment:
image
But the amount of code required to do it is insane. There's no consistency in the DOM regarding classes or IDs and it seems Mozilla are just using arbitrary text sizes, colours, and layouts all over the place.

You're probably right; brute-forcing all of this CSS takes too much time and energy so we can either massage a few elements into place or apply some kind of resetter to automatically set all panel elements to sane, consistent values and rebuild from there. The latter approach should ideally separate each panel into a new @import to avoid clutter and spaghetti code.

I'm happy to hear your opinions on this. I personally would like a nice, consistent approach to panels but Mozilla obviously isn't heading in that direction and I don't know if it's worth the effort to fight against their anarchist ways.

@Madis0
Copy link
Contributor Author

Madis0 commented Nov 10, 2019

Well, at first I forgot which panels this actually applies to and after a few tries found out it is also the autocomplete, downloads and library panel.

Either way, the point of this PR was to remove that 300 lines of code which was specifically made for the pre-70 info panel that had those huge icons and 3 sections.

I do agree that things should be separated to files where possible, especially the autocompete and "global" popup styles. What I don't like is the buttons you use on the popups, why not use the full-width iconized ones like Chrome now?

@Madis0
Copy link
Contributor Author

Madis0 commented Nov 10, 2019

Made a mockup based on your style:
pilt

@feinir
Copy link

feinir commented Apr 4, 2020

批注 2020-04-04 203407

SearchBar Bug

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.

None yet

3 participants