Skip to content

Commit

Permalink
More work toward redesigning the UI
Browse files Browse the repository at this point in the history 
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.

Additionally, code has been added to reset
the new popup panel to vertical layout should
the viewport be not wide enough to
accomodate the horizontal layout.

Related feedback:
- https://www.reddit.com/r/uBlockOrigin/comments/g4ufvi/
  • Loading branch information
@gorhill
gorhill committed Apr 21, 2020
1 parent a213c89 commit 5bee332
Show file tree
Hide file tree
Showing 29 changed files with 397 additions and 194 deletions.
8 changes: 4 additions & 4 deletions src/1p-filters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@

<p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p>
<p>
<button id="userFiltersApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
<button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
&ensp;
<button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
<button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
</p>
</div>
<div id="userFilters" class="codeMirrorContainer codeMirrorFillVertical codeMirrorBreakAll" spellcheck="false"></div>
Expand Down
6 changes: 3 additions & 3 deletions src/3p-filters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@

<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div id="actions" class="root">
<button id="buttonApply" class="custom important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="custom important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="custom disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
<button id="buttonApply" class="important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
</div>

<div>
Expand Down
6 changes: 4 additions & 2 deletions src/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,11 @@
</div>
<div class="li"><span data-i18n="aboutDependencies"></span></div>
<div class="liul">
<div class="li"><span><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
<div class="li"><span><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a></span></div>
<div class="li"><span><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
<div class="li"><span><a href="https://github.com/chrismsimpson/Metropolis" target="_blank">Metropolis font family</a> by <a href="https://github.com/chrismsimpson">Chris Simpson</a></span></div>
<div class="li"><span><a href="https://github.com/rsms/inter" target="_blank">Inter font family</a> by <a href="https://github.com/rsms">Rasmus Andersson</a></span></div>
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
<div class="li"><span><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a></span></div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/advanced-settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<div class="body">
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
<p>
<button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
<button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
</div>

<div id="advancedSettings" class="codeMirrorContainer codeMirrorFillVertical"></div>
Expand Down
8 changes: 4 additions & 4 deletions src/cloud-ui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
<title></title>
</head>
<body>
<button id="cloudPush" type="button" class="custom" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
<button id="cloudPush" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<button id="cloudPull" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<span id="cloudError"></span>
<span id="cloudCog" class="fa-icon">cog</span>
<div id="cloudOptions">
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="custom vflex" type="button" data-i18n="genericSubmit"></button>
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="vflex" type="button" data-i18n="genericSubmit"></button>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion src/css/3p-filters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
100% { transform: rotate(360deg); }
}
.root {
background-color: var(--bg-0);
background-color: var(--default-surface);
overflow: auto;
padding: 0.5em 0;
}
Expand Down
8 changes: 1 addition & 7 deletions src/css/cloud-ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
fill: inherit;
}
#cloudWidget #cloudOptions {
background-color: var(--bg-0);
background-color: var(--default-surface);
border: 1px solid var(--bg-1-border);
bottom: 0;
display: none;
Expand All @@ -77,9 +77,3 @@
#cloudWidget #cloudOptions.show {
display: block;
}
#cloudWidget #cloudOptions > div {
background-color: var(--bg-0);
border-radius: 3px;
padding: 1em;
text-align: center;
}
113 changes: 79 additions & 34 deletions src/css/common.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,46 @@
/* https://protocol.mozilla.org/assets/docs/css/protocol.css */
@charset "UTF-8";
@font-face {
font-display: block;
font-family: Inter;
font-style: normal;
font-weight: normal;
src: url('fonts/Inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
src: url('fonts/Inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: Metropolis;
font-style: normal;
font-weight: 600;
src: url('fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2');
}

/* Usage of FontAwesome is deprecated and will be removed eventually */
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
}

/* Common uBO styles */
body {
background-color: var(--bg-0);
background-color: var(--default-surface);
border: 0;
box-sizing: border-box;
color: var(--fg-0);
fill: var(--fg-0);
font: 14px/1.5 sans-serif;
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}
@font-face {
font-family: 'FontAwesome';
font-weight: normal;
font-style: normal;
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
}
.fa {
display: inline-block;
font-family: FontAwesome;
Expand All @@ -39,50 +66,58 @@ hr {
textarea {
font-size: 90%;
}
/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
button.custom {
align-items: flex-end;
button {
align-items: center;
appearance: none;
border: 1px solid transparent;
border-radius: 3px;
background-color: var(--bg-button);
color: var(--fg-button)
border-radius: 4px;
background-color: var(--button-surface);
color: var(--button-ink);
display: inline-flex;
padding: 0.6em 1em;
fill: var(--button-ink);
font-family: Metropolis, sans-serif;
font-weight: 600;
font-size: 14px;
justify-content: center;
letter-spacing: 0.5px;
min-height: 36px;
padding: 0 16px;
-moz-appearance: none;
-webkit-appearance: none;
}
button.custom.vflex {
button.vflex {
height: 100%;
min-height: unset;
padding-bottom: 0;
padding-top: 0;
}
button.custom:hover {
background-color: var(--bg-button-hover);
button:hover {
background-color: var(--button-surface-hover);
}
button.custom.important {
button.important {
background-color: var(--bg-button-important);
}
button.custom.important:hover {
button.important:hover {
background-color: var(--bg-button-important-hover);
}
button.custom.disabled,
button.custom[disabled],
button.custom.important.disabled,
button.custom.important[disabled] {
button.disabled,
button[disabled],
button.important.disabled,
button.important[disabled] {
background-color: var(--bg-button-disabled);
color: var(--fg-button-disabled);
pointer-events: none;
}
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
button.iconifiable > .fa,
button.iconifiable > .fa-icon {
padding-left: 0;
padding-right: 0.4em;
}
button.custom.iconifiable > .fa-icon {
button.iconifiable > .fa-icon {
font-size: 120%;
}
body[dir="rtl"] button.custom.iconifiable > .fa,
body[dir="rtl"] button.custom.iconifiable > .fa-icon {
body[dir="rtl"] button.iconifiable > .fa,
body[dir="rtl"] button.iconifiable > .fa-icon {
padding-left: 0.5em;
}
.hidden {
Expand All @@ -102,26 +137,36 @@ input[type="checkbox"] {
margin-inline-end: 0.4em;
-webkit-margin-end: 0.4em;
}
.fieldset {
margin: 1em 0.5em;
}
.fieldset-header {
color: var(--fieldset-header-ink);
font-family: Metropolis, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.ul {
margin: 1em 0;
}
.li {
align-items: center;
display: flex;
margin: 0.5em 0;
margin: 12px 0;
}
.liul {
margin: 0.5em 0;
margin-inline-start: 2em;
-webkit-margin-start: 2em;
}
@media (max-width: 640px) {
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
button.iconifiable > .fa,
button.iconifiable > .fa-icon {
font-size: 1.2rem;
padding: 0;
}
button.custom.iconifiable > [data-i18n] {
button.iconifiable > [data-i18n] {
display: none;
}
}
Expand Down Expand Up @@ -155,7 +200,7 @@ input[type="checkbox"] {

/* touch-screen devices */
:root.mobile body {
font: 16px/1.5 sans-serif;
font-size: 16px;
}
:root.mobile label {
flex-grow: 1
Expand Down
3 changes: 0 additions & 3 deletions src/css/dashboard-common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,6 @@ a {
.fa-icon.info.important:hover {
color: var(--fg-icon-info-lvl-3);
}
button {
padding: 0.33em;
}
input[type="number"] {
width: 5em;
}
Expand Down
12 changes: 8 additions & 4 deletions src/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ html, body {
width: 100%;
}
#dashboard-nav {
background-color: var(--bg-1);
background-color: var(--default-surface);
border: 0;
border-bottom: 1px solid var(--bg-1-border);
box-shadow: var(--dashboard-bar-shadow);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
Expand All @@ -29,9 +29,13 @@ html, body {
.tabButton {
border: 0;
border-bottom: 3px solid var(--bg-1);
border-top: 3px solid transparent;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
padding: 0.5em 1.4em 0.3em 1.4em;
font-family: Metropolis, sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
padding: 0.5em 1.4em calc(0.5em - 3px);
text-decoration: none;
white-space: nowrap;
}
Expand Down Expand Up @@ -84,7 +88,7 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-surface-hover);
border-color: var(--dashboard-tab-surface-hover);
border-bottom-color: var(--dashboard-tab-surface-hover);
}

/* touch-screen devices */
Expand Down
12 changes: 3 additions & 9 deletions src/css/document-blocked.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
*/

body {
font-size: large;
padding: 0.5em;
text-align: center;
}

Expand All @@ -29,24 +29,18 @@ body {
}
}
body > div {
margin: 0 0 1.5em 0;
margin: 0 0 1em 0;
}
body > div > p,
body > div > div {
margin: 4px 0;
}
body > div > p:first-child {
margin: 1.5em 0 0 0;
margin: 1em 0 0 0;
}
a {
text-decoration: none;
}
button {
cursor: pointer;
margin: 0 1em 0.25em 1em;
padding: 0.25em 0.5em;
font-size: inherit;
}
select {
font: inherit;
padding: 2px;
Expand Down
Binary file added src/css/fonts/Inter/Inter-Regular.woff2
View file
Binary file not shown.
Binary file added src/css/fonts/Inter/Inter-SemiBold.woff2
View file
Binary file not shown.
Loading

38 comments on commit 5bee332

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

capture

Backup to File, Restore from File... and reset to default settings all are placed in the extreme right corner of the Settings page ???

@uBlock-user
Copy link
Contributor

@uBlock-user uBlock-user commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i looks like l in all the panes now where the titles are bold(also in Privacy/Default Behavior) and also in buttons as above ^^^ --

Capture

@gwarser
Copy link
Contributor

@gwarser gwarser commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are placed in the extreme right corner of the Settings page ???

More visible now. But looks like they are somehow related to text labels on the left. Maybe these should be grouped together by some frame?

image

i looks like l

Not for me, but overall contrast is worse.

image

Cloud storage buttons looks better now.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all are placed in the extreme right corner of the Settings page

I was told "Your buttons are on the left, and Fenix buttons are on the right", but I couldn't understand very well this part since the picture which followed showed buttons still on the left. I don't mind putting them back under but I will keep them each on their line instead of having them side by side.

i looks like l in all the panes

It looks fine on my side:

a

overall contrast is worse

Is it just a color issue or a font issue? The font I am using are used in Firefox Preview. I am not sure the instructions I am given take into account that the changes will also affect the desktop version. I suppose I could pick the font according to the media DPI.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@uBlock-user

i looks like l

The font is natively semi-bold, it looks as if the rendering on your side was further bolded by the font rendering engine of the browser. If you inspect the tab button, can you find out its font-weight? It should be 600, which is the native weight of the font.

@uBlock-user
Copy link
Contributor

@uBlock-user uBlock-user commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested both on Firefox 75 and 77, same issue, i looks like l

It should be 600, which is the native weight of the font.

Yes it is 600. So how can this be fixed on my side ?

More visible now.

Yes, but also visually disruptive.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So how can this be fixed on my side ?

I am going to use the new fonts only on mobile devices, I don't know why it renders this way on your side but for now I prefer to be safe.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fenix related suggestions and feedback from the Mozilla team should be kept to fenix only, I don't think they're testing these changes on desktops before suggesting.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be kept to fenix only

I disagree, I will keep applying them to all versions of uBO and adjust as needed. I am getting free advices from people who know better about design than I do so I will use these. Also, I do not have the time to maintain two sets of HTML/CSS/JS for uBO's pages.

Now, I would like to know how it looks on your side if you un-check the Metropolis font:

a

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also something to try: keep Metropolis selected but uncheck font-weight: 600, see if that improves the rendering.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that works.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which one works? Un-checking the font-weight or the font-family?

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

font-family

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not declaring a @font-face for Metropolis with a normal font-weight -- so I am wondering if this is the issue. In the next release I will include the default Metropolis as a last attempt to make it work on your side.

@uBlock-user
Copy link
Contributor

@uBlock-user uBlock-user commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the next release I will include the default Metropolis as a last attempt to make it work on your side.

So the current one is not the default version of this font ?

and will that work ?

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you share a screenshot of the whole pane like I did above? I would like to look more in details at the differences from what I get on my side.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capture

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also wanted to look at the buttons -- they are also using Metropolis fonts.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The a letter is quite different from what I get on my side. I would like to understand why that is.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Capture

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm on Windows 10 build 1909 x64, that's the only difference we have.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gwarser What is your OS?

Also my checkboxes are pretty ugly, I didn't realize other people were getting checkboxes which actually look like checkboxes.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gorhill How about changing Metropolis to Inter, which is what you're using for
Copyright (c) Raymond Hill 2014-present in About ?

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my side, using Inter 600 instead of Metropolis 600 results in a bolder font, I don't like the result -- I can see why they chose Metropolis, it's semi-bold version is a better intermediate between normal and bold. Top is Metropolis 600, bottom is Inter 600:

a

In general I want to stick as much as possible to the advices I am given without second-guessing them, but I will fine tune when the case is made for such need.

So for now in the next release, these are the changes:

  • Declare a Metropolis regular face and see if this makes a difference on your side
  • Use slightly darker inks on non-dense DPI devices -- my understanding is that dense DPI devices have a intrinsically better contrast.

For the buttons I am not yet decided. As @gwarser pointed out, I liked that they are easier to notice and thus to use -- this helps remind people of backing up their settings. However I do think the buttons are related the text on the left, this is where the information about last backup/restore operations appear.

@uBlock-user
Copy link
Contributor

@uBlock-user uBlock-user commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On my side, it's lightens up and appears very sharp and precise without the added bolding I see on Metropolis. I suppose these are differences on Windows and Linux.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

differences on Windows and Linux

Could this be related to the font format? I imported only the woff2 format -- maybe Windows prefers ttf or otf?

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3b3 contains the changes above, but meanwhile after playing more with the CSS values I think I will remove usage of Metropolis and semi-bold for buttons and navigation bar buttons for non-high dpi displays. Probably these semi-bold fonts render optimally on high-dpi devices because of the amount of pixels available. This way I still respect the advices for Firefox Preview while being safer for Firefox desktop.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3b3 contains the changes above

No changes on my side with 3b3.

@gwarser
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it just a color issue or a font issue?

I think it's because of background color.

@gwarser
Copy link
Contributor

@gwarser gwarser commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gwarser What is your OS?

Manjaro KDE

image

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's because of background color.

Well uBO's dashboard is using a lighter white than Firefox's Preferences page. In any case, for non-high dpi I have selected a darker default font color.

@gwarser
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My system default "Noto Sans"

image

@gwarser
Copy link
Contributor

@gwarser gwarser commented on 5bee332 Apr 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously it was completely black font on white background, so it's understandable it looks less contrast now.

And now in b4:

image

@gwarser
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Color of the "Out of date" warning has now too low contrast. Maybe should be changed to "active button" color?

image

I'm not sure it's good or bad. If people stop noticing they may stop worrying so much about out of date filters.

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 5bee332 Apr 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's currently blended with an alpha of 0.5, this does not help. I will revise to use non-blended colors from https://protocol.mozilla.org/fundamentals/color.html. I think Yellow-50 would be ok, no opacity.

@gwarser
Copy link
Contributor

@gwarser gwarser commented on 5bee332 May 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was told "Your buttons are on the left, and Fenix buttons are on the right", but I couldn't understand very well this part since the picture which followed showed buttons still on the left.

I think this quote was about screenshot:

image

uBlockOrigin/uBlock-issues#1027 (comment)

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense, I misunderstood. So I should just put them back under, but having all buttons with same width would probably look better.

@uBlock-user
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's what I reported too in 5bee33253f45#commitcomment-38664118

Please sign in to comment.