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

Redesign dashboard #274

Merged
merged 42 commits into from
Nov 7, 2020
Merged

Redesign dashboard #274

merged 42 commits into from
Nov 7, 2020

Conversation

hawkeye116477
Copy link
Contributor

@hawkeye116477 hawkeye116477 commented Nov 4, 2020

Gorhill together with dashboard redesigned also popup, but because seems that will require more work, so I skipped work for popup for now.

In case of 7e1ac99, I'm not sure if this is needed, cuz I haven't seen now legacy Firefox forks for Android, so maybe class should be added directly instead of.

hawkeye116477 and others added 30 commits October 28, 2020 18:38
This is a first pass in which only the dashboard
navigation widget and the "Settings" pane have
been revisited.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
The changes in this commit are mostly related
to the "Filter lists" pane.

An eye icon has been added, which purpose is
to view the content of a list. Clicking on the
name of the list will toggle the list's
checkbox.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
The dashboard tab buttons have been converted to
`span` tags (from `a` tags), thus eliminating
the unwanted side effect of the text being
rendered as unvisited links (blueish).

The font size intended for touch screens was not
taking effect due to bad cut & paste.

Other minor adjustments to improve consistency
in spacing.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Roughly, the changes in this commit:
- Make it easier to implement a dark theme eventually:
  - Flatten the look of buttons
  - Remove the use of `opacity` style property as a
    color modifier
- Some work toward removing dependency on FontAwesome
  font

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Fine tuned previous work.

Started the use of variable-based color values.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
This commit focuses on implementing the use of
CSS `var(...)` throughout so as to make it easy
to create themes -- a requirement for uBO to
support a dark theme.

There is still work to do regarding converting
uBO's CSS to completely support `var(...)` but
being able to start using theming will help
complete and fine tune CSS `var(...)` support.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Specifically, intended font size was no longer
set properly for mobile in popup panel.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Related feedback:
gorhill/uBlock@e917213#commitcomment-38533349

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
- Allow future dark theme to be enabled programmatically

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
More left to do as per reference documentation:
- https://protocol.mozilla.org/
- https://material.io/

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
As per email feedback from Mozilla's
https://github.com/brampitoyo

This is yet another incremental step toward
redesigning the UI, much more is left to do.
The idea is to align uBO's UI to that of
Firefox Preview.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
One of these must always be present. This commit
fixes a theoretical case where neither of these
classes are set on the body element.
Better constrast for warning color.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Noteworthy:
- Fix button visuals in "My rules" pane
- Keep "Update now" button visible until update
  is completed
- Renaming CSS variables for consistency

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Additionally, an entry for filter list
contributors has been added.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Will `tidy` from now on.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Motivation:
- To align with Firefox Preview's own design
- To uniformize checkbox look and behavior
  across all platforms

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Summary:
- Make checkbox nodes self-contained
  (a > b) instead of (a + b)

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
There is probably more work to do regarding the
shown URL -- it might be better to truncate it
on small screen display since it can be quite
long sometimes.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
Related issue:
- uBlockOrigin/uBlock-issues#1092

As a result of earlier redesign, the magnifier ended
up being too small. The size of the magnifier will now
be dependent on the default font size instead of the
parent font size.
Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
@THEtomaso
Copy link

THEtomaso commented Nov 5, 2020

uiStyles

Yeah, I've already tried messing around with that option, and it really doesn't fix anything, because the only place where size is a real issue is in the blocking window (which I pointed out), and uiStyles doesn't affect it at all!
Just look at it.. it's ridiculously small!

New interface:

ubo-blockingwindow-new

Old interface:

ubo-blockingwindow-old

@hawkeye116477
Copy link
Contributor Author

hawkeye116477 commented Nov 5, 2020

uiStyles doesn't affect it at all!

It affects, font-size is set to body, but doesn't change font-size for elements wrapped in code, cuz gorhill decided that for class code will be slightly smaller size, so it can't be overridden that way.

2020-11-05_11-29

Theoretically I could make switch for UI slightly similar to classic in advanced settings, if someone would like, but that decision belongs to boss. Just adding class classic to html and some css to it would be relevant, probably the only problem would be with these eyes.

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

Sorry, but I've absolutely hated this design, with slightly blurred text and superfluous coloring, since gorhill first released it for the main branch!
Especially that part about having to click on those tiny eye icons, in order to inspect filter assets!!
Is there a way to restore the classic interface?

To be honest, I am not happy either, but I understand that my personal preferences cannot be a reason not to follow the upstream in this matter.

Also, why is everything in uBO's document-blocked.html window so damn small with this design?
It's only half the size of what it used to be.
Almost seems like a deliberate attempt to make things more difficult to read!

Have you, or someone else, tried to raise this issue?

Theoretically I could make switch for UI slightly similar to classic in advanced settings, if someone would like, but that decision belongs to boss

I believe we are free to add advanced settings to adjust the font size on document-blocked.html, provided that the defaults match the upstream style.

@THEtomaso
Copy link

Have you, or someone else, tried to raise this issue?

I searched the repo, but couldn't find any references to it, so I filed a new report here:
uBlockOrigin/uBlock-issues#1326

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

Browser UXP (my res 1440x900)
All much better colors
1.perfect look
ublockTest2
2.a bit small
ublockTest1
3.there is no big difference
ublockTest3

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

3.there is no big difference

This hasn't been updated yet.

@THEtomaso
Copy link

I filed a new report

Well, that was declined real fast.

--

I believe we are free to add advanced settings to adjust the font size on document-blocked.html

Looks like that will be our best solution then.

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

I do not know if the font changed 3.
"%" - it looks different
ublockTest4

@hawkeye116477
Copy link
Contributor Author

hawkeye116477 commented Nov 5, 2020

@AroKol78 Yes, some changes are common for all uBO pages.

@AroKol78

This comment has been minimized.

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

on the occasion Redesign UI
ublockFix0
system uses polish,browser uses english (no languages)

@THEtomaso
Copy link

THEtomaso commented Nov 5, 2020

on the occasion Redesign UI

Considering that the latest beta build contains a new UI, it might be prudent to perform a clean install.
This could help to avoid those type of issues:
1 - Export your custom 'My filters' / 'My rules' / 'Trusted sites' (if any).
2 - Uninstall uBO.
3 - Close Pale Moon.
4 - Delete this file:
C:\Users\*****\AppData\Roaming\Moonchild Productions\Pale Moon\Profiles\*****.default\extension-data\ublock0.sqlite
5 - Reinstall uBO.
6 - Import the stuff that you exported in step 1 (if any).

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

so I did and deleted startupCache.4.little
good detection automatic selection of regions ( Regions, languages (2/34) )
and
ublockFix2

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

@THEtomaso, I am very upset by the way you discussed that issue with Raymond. Is it really so difficult to stop when the decision has already been made and reasoned, even if you disagree? Now I'm not sure if adding a font size adjustment option here would not be considered disrespectful to the project leader.

I'll try to clarify this question after a while, when all this calms down, but for now you have to get around using userContent.css, for example like this:

@-moz-document url-prefix(chrome://ublock0/content/document-blocked.html) {
  body, button, select, .code {
    font-size: 18px !important;
    line-height: 27px !important;
  }
}

@THEtomaso
Copy link

THEtomaso commented Nov 5, 2020

I am very upset by the way you discussed that issue with Raymond.

Agreed.
To be honest, I had a couple of beers, and things didn't quite come out the way that I intended.
I threaded a bit wrong already in the first post.
It was a bit of copy/paste work from my posts here in this thread, and once I realized what I had written, the damage was already done. :(
I really shouldn't have used the word "ridiculously", bacause it made the post sound hostile.
That's why I tried to soften the conversation in my second post, with a joke, which obviously failed too!
Anyway, I didn't try to intentionally make the empty space look bigger than it was, so I felt that I needed to point that out.
In hindsight, I should have chosen my words differently, but developers could also benefit from acting more polite in general, as you're probably well aware of, from other projects (without mentioning names).

--

Now I'm not sure if adding a font size adjustment option here would not be considered disrespectful to the project leader.

I won't use that misplaced word again, but I think that sounds a bit far-fetched.
Such a tweak would be considered very minor, and I'm sure gorhill wouldn't have any objections to it!

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

ublockFix0
system uses polish,browser uses english (no languages)

What is your browser and OS? Can you reproduce this with the latest Firefox and uBO?

@gwarser
Copy link
Contributor

gwarser commented Nov 5, 2020

Missing font glyph for Fullwidth Plus Sign https://unicode-table.com/en/FF0B/

++++

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

Can you reproduce this with the latest Firefox and uBO?

no technical possibility

What is your browser and OS?

ubloc01

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

Well, then it's a browser issue and you have to contact the author(s).

@THEtomaso
Copy link

THEtomaso commented Nov 5, 2020

you have to get around using userContent.css

Actually, it's not that big of a deal for me personally, since I've got perfect eye sight.
I DID however find that blocking dialog unreasonably small, so there's no doubt in my mind that people with poor eye sight will have difficulties reading it, dependig on their system setups!

--

I'll try to clarify this question after a while, when all this calms down

An argument can be made that a considerable amount of users will install blockers, without ever looking at their program settings.
Of course, uBO already comes with a rather forgiving default profile, to cater such users.
Nevertheless, many people that use software in such a manner, also happens to be amongst the group of people that actually HAVE poor eye sight!
Whilst they might get around just fine, whithout ever looking into uBO's settings, the document-blocked.html dialog is something that they more than likely WILL encounter at one time or another!
When this happens, it's imperative that they're able to read, and understand, what's happening!!

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

system uses polish,browser uses english (no languages)

it's not a browser error, it's just switching general.useragent.locale en-US <> pl
ubloc02

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

It is unlikely that one can help you until you provide detailed information about your system and the exact steps to reproduce the issue according to this template. My guess is that you are using Windows XP and your browser simply cannot display woff2 fonts there correctly. In this case, you will have to use the system font or ask the browser dev(s) and/or the relevant community for help.

@AroKol78
Copy link

AroKol78 commented Nov 5, 2020

just switch general.useragent.locale to other than OS and take a look at immediately uBlock
ublockTest11
if os locale = general.useragent.locale then displays well
if os locale <> general.useragent.locale then displays badly

on the occasion Redesign UI

in earlier versions there was also a problem

@JustOff
Copy link
Collaborator

JustOff commented Nov 5, 2020

Can't reproduce. Please follow the instructions provided above.

@gwarser
Copy link
Contributor

gwarser commented Nov 5, 2020

It's displayed correctly on Polish locale because I "translated" "Fullwidth Plus Sign" () to simple "Plus Sign" (+) on Crowdin.

@JustOff JustOff changed the title Redesign UI Redesign dashboard Nov 7, 2020
@JustOff JustOff merged commit 9e791f6 into gorhill:master Nov 7, 2020
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.

6 participants