Skip to content
This repository was archived by the owner on Nov 6, 2023. It is now read-only.

Conversation

@bershanskiy
Copy link

@bershanskiy bershanskiy commented May 4, 2019

WORK IN PROGRESS! DO NOT MERGE!

This implements some ideas described in #17882, please see that issue for explanation of motivations for this change.

Proposal

  • Make all tabs have the same height by making the UI fill all vertical space. (WIP)
  • Make the tab buttons smaller and fixed to the top of the page. (WIP)
  • Move "HTTPS Everywhere Sites Disabled" list and "User rules" form "General Settings" into separate tabs. (done)
  • Move all check boxes from "General Settings" and "Advanced Settings" onto the same tab called just "General Settings" or similar. (done)
  • May be, for each checkbox item add a small explainer about what exactly it does (to clarify the impact of the setting and to fill up the extra vertical space).

Result (work in progress)

The resulting tabs are:

  • "General Settings"
    • checkbox "Show Counter" (if not removed)
    • checkbox "Dark Mode" (if not removed when media query prefers-color-scheme land in stable releases.)
    • checkbox "Auto-update rulesets"
    • checkbox "Enable mixed content rulesets"
    • checkbox "Show Devtools tab"
  • "Sites Disabled"
  • "Custom Rulesets"
  • "Update Channels" (left intact)

Screenshots

This is already implemented and works as expected. Screenshots are taken in Chrome because Firefox does not support dark mode on Extension pages yet.

Edit: updated screenshot to remove "show counter"
light

dark

eff

@zoracon
Copy link
Contributor

zoracon commented May 10, 2019

Hello, Thank you for this work! There have been a patch made since then to remove the now deprecated "show counter". I plan on doing one more patch that shouldn't effect this branch, but once I do that Monday, I'll pull this down afterwards to my fork and review as soon as I can.

@zoracon
Copy link
Contributor

zoracon commented May 10, 2019

Also, are these dark mode changes also applicable in Chrome/Chromium?

@bershanskiy
Copy link
Author

@zoracon Thanks for your response.

I'll bring this branch up to date before Monday (e.g., remove the "show counter").

Also, are these dark mode changes also applicable in Chrome/Chromium?

The patch does not make any distinctions between Chromium and Firefox, it just has the "Dark Mode" toggle so that anyone with current browser can test it. Ideally, this patch should use the prefers-color-scheme media query, but this media query is not widely supported yet: desktop and Android Firefox 67 (see MDN), macOS Safari 12.1 (see MDN), Chrome/Chromium 76 (source). FYI, Firefox "resist fingerprinting" forces media query to always match for "light" option.

I'm not sure what is the best way forward on this, options are:

  1. use only media query, no toggle, and support dark mode only on newer browsers (low maintenance cost, no JS code).
  2. use manual toggle even if media query is supported, as I do currently (low maintenance cost, but poor user experience)
  3. detect whether media query is supported with JS API and if supported rely on it, otherwise present the manual toggle (higher maintenance cost, but good user experience).

I would very much prefer option 3 (because it has the best UX), but it does have a few edge cases to test.

@bershanskiy
Copy link
Author

Update: I just force-pushed after git pull upstream master --rebase to simplify the review of the commit.

@pipboy96 pipboy96 self-assigned this Sep 10, 2019
@pipboy96
Copy link
Contributor

Can you fix merge conflicts?

@pipboy96 pipboy96 closed this Sep 10, 2019
@pipboy96 pipboy96 reopened this Sep 10, 2019
@bershanskiy
Copy link
Author

@pipboy96 I resolved conflicts via the GitHub online interface, but I'll also test it for real as well. I'll comment when I'm done.

@pipboy96 pipboy96 removed the conflict label Sep 11, 2019
@bershanskiy
Copy link
Author

Update: so something between Git and GitHub was weird and it didn't allow me to push normally, so I force-pushed. The old branch up to this point can be found on 17882-old.

@bershanskiy
Copy link
Author

bershanskiy commented Sep 12, 2019

The DevTools pane no longer shows up, even on the master branch. As far as I see, the panel code was removed. Is there a replacement for it? There is still an option to "Show Devtools tab", but I'm not sure what it does.

Edit: fix repository -> branch

@bershanskiy
Copy link
Author

@pipboy96 I removed the explicit option to use dark mode because the prefers-color-scheme media query is supported widely (Chrome 76+ and Firefox 67+). If needed, I can add it back. The only reason to add it back I could think of is to allow it in Firefox 60 ESR and obscure configurations which disable media queries via Firefox fingerprinting flag.

@pipboy96 pipboy96 added the inactive Label for PRs/issues which stay inactive for a long time label Oct 4, 2019
@pipboy96
Copy link
Contributor

pipboy96 commented Oct 4, 2019

@bershanskiy Do you have any plans to continue work on this?

@bershanskiy
Copy link
Author

@pipboy96 Yes, I do. I just got swamped with other stuff.

@pipboy96 pipboy96 removed the inactive Label for PRs/issues which stay inactive for a long time label Oct 5, 2019
@pipboy96 pipboy96 added the inactive Label for PRs/issues which stay inactive for a long time label Feb 27, 2020
@pipboy96
Copy link
Contributor

Related PR: #18992.

@pipboy96
Copy link
Contributor

@bershanskiy If you want to continue work on this, feel free to ask for this PR to be reopened.

@pipboy96 pipboy96 closed this Feb 27, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

inactive Label for PRs/issues which stay inactive for a long time ui

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants