User overrides for CSS `font-family` of theme fonts #7130

telamonian · 2019-08-30T03:08:57Z

References

fixes #4013
fixes #4608
fixes #5673
fixes #9430

followup to #6926

Code changes

Adds some font handling stuff to coreutils, makes use of said stuff in themePlugins.ts

User-facing changes

Adds font family picker menus for each of the fonts defined by a theme:

Backwards-incompatible changes

jupyterlab-dev-mode · 2019-08-30T03:08:58Z

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

telamonian · 2019-09-12T22:01:28Z

From a gitter chat:

The remaining technical hurdle is detecting available fonts client side in the user's browser. I figured out a reasonably robust way to do it, but it works by running through a static list of fonts and checking each one. So there maybe needs to be a survey of the community or something where we collect the lists of fonts that a bunch of devs/users have installed on their systems (matplotlib installs some tools that make this easy to automate).

telamonian · 2019-09-12T22:54:11Z

I just rebased and tested the PR. It should be good to go for others to test now, if they want

telamonian · 2019-09-13T19:31:29Z

From @jasongrout on gitter:

I think eventually we want to probably move those options (if we have them) to a settings editor and out of the menu, and keep the menu for things that change often. But given we don't have a settings editor now, I guess menu it is for things like that. I don't have an opinion about whether it's a good idea to let them be customized, but I tend to err on the side of letting them have capability to do what they want

telamonian · 2019-10-14T16:03:52Z

@tgeorgeux Thoughts? Feelings? Sudden sensations of queasiness at the sight of dingbats:

?

paulo989 · 2020-01-06T01:22:14Z

Hi
I hope to post in the right place. Sorry if this is not the case but you have touched on a subject that interests me.
I am working on a JupyterLab Notebook (not Jupyter Notebook) under Python 3 and I would like to hide / modify / delete the classic code prompt In [].

First of all, I still haven't found which file to modify. Is it a .json .css .py ?

Anyone know how we could go about transforming the prompt Jupyter? 👍
from:
In [1]
at :
=> [1]
or only:
=>
or this :

and ideally be able to change the colors of the prompts as requested in the post cited above?

jasongrout · 2020-01-06T04:40:02Z

I hope to post in the right place.

Can you open a new issue for this discussion? It's significantly different from what is proposed in this PR (where you want to change the actual text, not just the font).

paulo989 · 2020-01-06T21:15:39Z

Hi jasongrout
I can open a new number if necessary for the change of font.
Initially, this is the text that I wanted to modify as indicated above.
I wanted to have => or >>> instead of Out [i].

There was a code that we could put in the file 'ipython_config.py' of 'Jupyter Notebook' and which is this:
from IPython.terminal.prompts import Prompts
from pygments.token import Token
class MyPrompt(Prompts):
def in_prompt_tokens(self, cli=None):
return [(Token.Prompt, ">>> ")]
c.TerminalInteractiveShell.prompts_class = MyPrompt
But now I'm looking for the solution for JupyterLab.
Obviously it is another file which must be modified but I do not know which one and how.

previously, `font.ts` was in @jupyterlab/coreutils, and added a dependency on `@phosphor/widgets` -> `@phosphor/domutils`. `domutils` initializes some static vars using the `navigator` object, which is browser only, and will break code running in a `node` environment. `examples/node` in `@jupyterlab/services` runs in node and imports `services`, so that example was broken. This commit restores `node` compatibility to `services` by moving `font.ts` to `@jupyterlab/ui-components`, which already has a `@phosphor/widgets` dependency

telamonian · 2020-12-06T07:18:55Z

I had completely forgotten about this PR, until some renewed interest in it over at #9430.

@jasongrout @tgeorgeux If the font-picker menus still seem controversial, I'm willing to disable them for now. But honestly I think adding them in is a worthwhile experiment that we should attempt. Everything else in the PR should be unobjectionable, including the support for the font-family overrides in the theme settings requested in #9430.

Overall I think that this PR delivers a straight improvement over our current "Settings -> JupyterLab Theme" menu (in terms of being well organized and easy to read at a glance):

old

VS new

This PR languished for a while, so it would be nice to get it in quickly

telamonian · 2020-12-06T07:25:45Z

@goanpeca As part of rebasing this PR, I ended up having to make changes to the item labels of the "Theme" menu, which I guess are now under the control of the localization system. What's our policy on making changes to localized strings? Is it okay to make edits to those label strings, or should I revert the related changes?

goanpeca · 2020-12-06T14:32:09Z

Hi @telamonian, thanks for bringing this up.

What's our policy on making changes to localized strings? Is it okay to make edits to those label strings, or should I revert the related changes?

It is fine to change them, just make sure the new ones are using the trans.__ ...

Before the final rc is released we will do a final scrape of the strings in their final state.

Cheers!

telamonian · 2020-12-06T14:56:16Z

It is fine to change them, just make sure the new ones are using the trans.__ ...

@goanpeca Great. I just double checked, fixed a couple of strings where I had missed the trans.__. Could you please also take a second to double check the trans.__ related changes in this PR? All the relevant changes are in one file, themeplugins.ts

packages/apputils-extension/src/themesplugins.ts

goanpeca · 2020-12-07T16:29:35Z

packages/apputils-extension/src/themesplugins.ts

+    });
+
+    const incrLabel = trans.__('+ Size');
+    const decrLabel = trans.__('- Size');


Just wondering if using Increase size is prefered over + Size

My sense is that

is more concise and understandable at a quick glance than

so I, at least, prefer it. We can ask everyone's opinion at the meeting

goanpeca · 2020-12-07T16:31:10Z

packages/apputils-extension/src/themesplugins.ts

-          }
+          type: 'submenu',
+          submenu: fontMenu(
+            trans.__('UI Font'),


Not sure about the use of UI, is this consistently use on other places?

Maybe Interface Font is another option that does not rely on shorthands?

Though I agree that the term UI might be opaque for some, Interface Font is too generic and vague. For now, let's just keep things simple and continue to refer to this font the same way we do throughout the codebase and the css, as UI font

goanpeca · 2020-12-07T16:31:37Z

packages/apputils-extension/src/themesplugins.ts

-            label: trans.__('Decrease UI Font Size'),
-            key: 'ui-font-size1'
-          },
+          args: { label: trans.__('UI Font'), key: 'ui-font-size1' },


Same idea from above.

goanpeca

Made some small comments, otherwise looks good :)

…ugins.ts`

telamonian · 2020-12-14T08:31:37Z

@jasongrout This should be ready to go in now. As per the meeting discussion, all of the UI changes have been reverted, and all of the UI specific code has been stripped out. I've thoroughly tested everything else, so it should be good to go.

@blink1073 I wanted to add some unittests for ThemeManager as part of this PR, but the ThemeManager constructor requires ISettingRegistry. So I'd need some flavor of SettingRegistryMock. Do we currently have any such thing in the codebase? The closest thing I was able to find is the code here in @jupyterlab/testutils, but it doesn't really seem to be what I'd need

packages/ui-components/src/font.ts

blink1073

Thanks!

tgeorgeux self-requested a review September 12, 2019 21:53

telamonian added pkg:themes status:Needs Discussion tag:Design and UX labels Sep 12, 2019

telamonian force-pushed the override-theme-font-family branch from 6dedfca to 9fd5d76 Compare September 12, 2019 22:52

telamonian mentioned this pull request Oct 14, 2019

How to change the output cell font-size? #7356

Closed

github-actions bot added pkg:apputils pkg:ui-components labels Jan 3, 2020

paulo989 mentioned this pull request Jan 6, 2020

JupyterLab: How to modify / delete the In[] / Out[] prompts #7745

Open

blink1073 added this to the Future milestone Aug 26, 2020

dakoop mentioned this pull request Aug 31, 2020

Cell Prompt and Code Fonts are Inconsistent #8552

Closed

telamonian mentioned this pull request Dec 6, 2020

Theme User Preferences: "additional property error" #9430

Closed

telamonian added 10 commits December 5, 2020 23:47

exposed system-font-families js package in coreutils

3b09432

trying a different approach based on the fontfaceobserver package

ecef2e5

got a prototype working for detecting a user's valid fonts

e16f3dc

the "Code Font" submenu is now fully functional

c407f72

the labels in the "Code Font" submenu are styled with the relevant font

fc5aa23

integrity

a4c86b8

CSS validation bugfix

f812af5

organized font items into submenus, added remaining font family menus

51ef3f5

added note about avoiding dom-only deps in certain packages

c4a94c9

picked lint

9818614

github-actions bot added pkg:notebook pkg:rendermime labels Dec 6, 2020

add trans.__() to a couple of missed strings in themeplugins.ts

6e785a3

goanpeca reviewed Dec 7, 2020

View reviewed changes

packages/apputils-extension/src/themesplugins.ts Outdated Show resolved Hide resolved

goanpeca reviewed Dec 7, 2020

View reviewed changes

Replace unnecessary template literal with string literal in `themespl…

382e216

…ugins.ts`

telamonian modified the milestones: Future, 3.0 Dec 9, 2020

jasongrout assigned telamonian Dec 9, 2020

telamonian added 2 commits December 14, 2020 03:00

reverted visible changes to "JupyterLab Theme" settings menu UI

b4b279c

fixup theme css override code

99b2144

telamonian mentioned this pull request Dec 14, 2020

09 December 2020 Meeting Minutes jupyterlab/frontends-team-compass#113

Closed

telamonian requested a review from jasongrout December 14, 2020 14:09

jasongrout reviewed Dec 14, 2020

View reviewed changes

packages/ui-components/src/font.ts Outdated Show resolved Hide resolved

removed font.ts

6fdd4f6

telamonian force-pushed the override-theme-font-family branch from 8b92dad to 6fdd4f6 Compare December 14, 2020 19:20

blink1073 approved these changes Dec 14, 2020

View reviewed changes

blink1073 merged commit 05778d1 into jupyterlab:master Dec 14, 2020

telamonian mentioned this pull request Dec 14, 2020

Feature request: an option to change the font #5673

Closed

github-actions bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Jun 13, 2021

github-actions bot locked as resolved and limited conversation to collaborators Jun 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

User overrides for CSS `font-family` of theme fonts #7130

User overrides for CSS `font-family` of theme fonts #7130

telamonian commented Aug 30, 2019 •

edited

jupyterlab-dev-mode bot commented Aug 30, 2019

telamonian commented Sep 12, 2019

telamonian commented Sep 12, 2019

telamonian commented Sep 13, 2019

telamonian commented Oct 14, 2019

paulo989 commented Jan 6, 2020

jasongrout commented Jan 6, 2020

paulo989 commented Jan 6, 2020

telamonian commented Dec 6, 2020 •

edited

telamonian commented Dec 6, 2020

goanpeca commented Dec 6, 2020

telamonian commented Dec 6, 2020

goanpeca Dec 7, 2020

telamonian Dec 9, 2020

goanpeca Dec 7, 2020

telamonian Dec 9, 2020

goanpeca Dec 7, 2020

goanpeca left a comment

telamonian commented Dec 14, 2020 •

edited

blink1073 left a comment

User overrides for CSS font-family of theme fonts #7130

User overrides for CSS font-family of theme fonts #7130

Conversation

telamonian commented Aug 30, 2019 • edited

References

Code changes

User-facing changes

Backwards-incompatible changes

jupyterlab-dev-mode bot commented Aug 30, 2019

telamonian commented Sep 12, 2019

telamonian commented Sep 12, 2019

telamonian commented Sep 13, 2019

telamonian commented Oct 14, 2019

paulo989 commented Jan 6, 2020

jasongrout commented Jan 6, 2020

paulo989 commented Jan 6, 2020

telamonian commented Dec 6, 2020 • edited

telamonian commented Dec 6, 2020

goanpeca commented Dec 6, 2020

telamonian commented Dec 6, 2020

goanpeca Dec 7, 2020

Choose a reason for hiding this comment

telamonian Dec 9, 2020

Choose a reason for hiding this comment

goanpeca Dec 7, 2020

Choose a reason for hiding this comment

telamonian Dec 9, 2020

Choose a reason for hiding this comment

goanpeca Dec 7, 2020

Choose a reason for hiding this comment

goanpeca left a comment

Choose a reason for hiding this comment

telamonian commented Dec 14, 2020 • edited

blink1073 left a comment

Choose a reason for hiding this comment

User overrides for CSS `font-family` of theme fonts #7130

User overrides for CSS `font-family` of theme fonts #7130

telamonian commented Aug 30, 2019 •

edited

telamonian commented Dec 6, 2020 •

edited

telamonian commented Dec 14, 2020 •

edited