Load custom CSS functionality and documentation #14743

RRosio · 2023-06-23T07:57:58Z

References

Fixes #12318
Related to #8457

Code changes

The code adds a link to the custom CSS file in the template html page and a handler to either serve the user's local custom CSS file or the placeholder file. There is also a flag added to allow disabling the default behavior that loads custom CSS.

User-facing changes

Users can apply custom styling. I tested this PR by adding some color to the Toolbar etc.

Backwards-incompatible changes

None applicable that I can think of.

jupyterlab-probot · 2023-06-23T07:58:00Z

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

jupyterlab/handlers/custom_css_handler.py

jupyterlab/labapp.py

fcollonval

Thanks for upstreaming this @RRosio

This is a great start but looking at the classical notebook code, I have a couple of questions.

I also think this resolves #14319 but not fully #8457 (that one will requires also adding data attributes on cells).

jupyterlab/labapp.py

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

for more information, see https://pre-commit.ci

…stom path

docs/source/user/custom_css.rst

jupyterlab/labapp.py

…adding tests for CSS and CSS handler.

fcollonval

Thanks @RRosio

To make things easier, I pushed two commits to

Fix the galata tests
Use those to produce the documentation
Fix the Python test
Switch the default behavior to not load custom.css

To explain how I did the integration test,

I'm activating the feature when starting the server only for the documentation test through the command line option.
I capture the custom/custom.css request to return a mocked content.

jupyterlab/tests/test_custom_css_handler.py

krassowski · 2023-11-27T19:37:31Z

...umentation/custom_css.test.ts-snapshots/custom-css-notebook-markdown-documentation-linux.png

The lack on contrast cause by these shadows really makes your eyes burn ;)

krassowski

Thank you @RRosio and @fcollonval! This looks good to me.

krassowski · 2023-11-27T19:40:48Z

The test failure will need to be addressed before merging though - it looks related to different new line encoding:

FAILED jupyterlab/tests/test_custom_css_handler.py::test_CustomCssHandler - AssertionError: assert 'body #top-pa...derline;\r\n}' == 'body #top-pa...underline;\n}'
  - body #top-panel-wrapper,
  + body #top-panel-wrapper,

  ?                         +
  - #jp-top-bar {
  + #jp-top-bar {

  ?              +
  -   background-color: #aecad4 !important;
  +   background-color: #aecad4 !important;

  ?                                        +
  - }
  + }

  ?  +
  - 
  + 

  - body h1 {
  + body h1 {

  ?          +
  -   font-size: 22px;
  +   font-size: 22px;

  ?                   +
  -   margin-bottom: 40px;
  +   margin-bottom: 40px;

  ?                       +
  -   color: #10929e;
  +   color: #10929e;

  ?                  +
  -   text-decoration: underline;
  +   text-decoration: underline;

  ?                              +
    }

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

krassowski · 2023-11-29T17:22:46Z

    [documentation] › test/documentation/custom_css.test.ts:15:7 › Use custom CSS layout › should apply custom CSS to main page 
    [documentation] › test/documentation/custom_css.test.ts:33:7 › Use custom CSS layout › should apply custom CSS to h1 headings

The failures seem related - the snapshots were not updated. I am doing it manually right now.

Actual	Expected

fcollonval · 2023-11-29T17:30:54Z

The snapshots discrepancies are due to the branch not being up-to-date with the main branch I think.

RRosio · 2023-11-29T17:34:26Z

The snapshots discrepancies are due to the branch not being up-to-date with the main branch I think.

Would it be okay to update the branch then?

fcollonval · 2023-11-29T17:42:19Z

Would it be okay to update the branch then?

Now that Mike updated manually the snapshots it should not be needed.

krassowski · 2023-11-29T17:44:14Z

Now that you said it, I decided to merge main anyways just to be sure.

RRosio · 2023-11-29T18:46:54Z

One of the visual regression documentation tests is listed as flaky now rather than failing:

[documentation] › test/documentation/custom_css.test.ts:33:7 › Use custom CSS layout › should apply custom CSS to h1 headings

I saw a few other PRs with some of the same failures so I'm under the impression that the other test failures do not seem to be related?

galata/test/documentation/custom_css.test.ts

krassowski · 2023-11-29T20:02:21Z

Remaining failures are unrelated, merging - thanks again!

* upstream/main: (7628 commits) Adopt ruff format (jupyterlab#15499) Bump scipy from 1.11.3 to 1.11.4 (jupyterlab#15474) [pre-commit.ci] pre-commit autoupdate (jupyterlab#15491) Pin `actions/labeler` to v4 to fix failing CI action (jupyterlab#15496) Add npm provenance issue to the list of release postmortems (jupyterlab#15493) Fix URLs in debugger-extension (jupyterlab#15462) Bump tj-actions/changed-files from 40.0.2 to 40.2.0 (jupyterlab#15471) Bump dessant/lock-threads from 4 to 5 (jupyterlab#15472) Bump pandas from 2.1.2 to 2.1.3 (jupyterlab#15473) Bump actions/github-script from 6 to 7 (jupyterlab#15470) Bump matplotlib from 3.7.2 to 3.8.2 (jupyterlab#15475) Bump rjsf to 5.13.4 (jupyterlab#15469) Don't play with the focus when handling focus event (jupyterlab#15408) [ci skip] Publish 4.1.0a4 Updated light theme visited link colour to make text visible (jupyterlab#15406) Load custom CSS functionality and documentation (jupyterlab#14743) Added alt descriptions to a few icon and images (jupyterlab#15265) More robust galata/UI tests (jupyterlab#15355) Fix Shift + L not working in stdin (jupyterlab#15440) Upgrade releaser workflows for silent support (jupyterlab#15446) ...

load custom CSS functionality and documentation

1d86dfc

Merge branch 'main' into custom_css

e2aa8ec

github-actions bot assigned RRosio Jun 23, 2023

github-actions bot added documentation tag:CSS For general CSS related issues and pecadilloes Design System CSS labels Jun 23, 2023

github-actions bot and others added 2 commits June 23, 2023 08:01

Automatic application of license header

ff0cb82

modify headings

9995064

github-advanced-security bot found potential problems Jun 23, 2023

View reviewed changes

jupyterlab/handlers/custom_css_handler.py Fixed Show fixed Hide fixed

jupyterlab/labapp.py Fixed Show resolved Hide resolved

jtpio added the enhancement label Jun 23, 2023

jtpio added this to the 4.1.0 milestone Jun 23, 2023

fcollonval requested changes Jun 23, 2023

View reviewed changes

jupyterlab/labapp.py Outdated Show resolved Hide resolved

jupyterlab/labapp.py Fixed Show resolved Hide resolved

jupyterlab/labapp.py Outdated Show resolved Hide resolved

RRosio and others added 5 commits June 29, 2023 11:37

Update jupyterlab/labapp.py

410597d

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update jupyterlab/labapp.py

83940ed

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

[pre-commit.ci] auto fixes from pre-commit.com hooks

53e927e

for more information, see https://pre-commit.ci

address review: use web_app.settings static handler and and static cu…

e2d4ea8

…stom path

Merge branch 'main' into custom_css

5557e35

krassowski reviewed Jul 15, 2023

View reviewed changes

docs/source/user/custom_css.rst Outdated Show resolved Hide resolved

krassowski reviewed Jul 15, 2023

View reviewed changes

jupyterlab/labapp.py Outdated Show resolved Hide resolved

krassowski mentioned this pull request Aug 30, 2023

4.1 Release Plan #14613

Closed

14 tasks

fcollonval mentioned this pull request Nov 3, 2023

Weekly Team Meetings: Jul-Dec 2023 jupyterlab/frontends-team-compass#205

Closed

RRosio added 2 commits November 6, 2023 16:14

Merge branch 'main' into custom_css

89fb055

flag set to False by default, handlers only added when flag is True, …

aec36a6

…adding tests for CSS and CSS handler.

github-actions bot added the tag:Testing label Nov 8, 2023

github-actions bot and others added 5 commits November 8, 2023 02:42

Automatic application of license header

b2b8775

Merge branch 'main' into custom_css

2f70bc1

update pytest_plugin custom_css flag and correct flag description

c299147

Improve tests and doc

60d7260

Fix python test

b08bc78

Add missing new CLI option for documentation integration tests

6faa62d

fcollonval reviewed Nov 24, 2023

View reviewed changes

Undo doc conf change

eb67ecc

krassowski reviewed Nov 27, 2023

View reviewed changes

jupyterlab/tests/test_custom_css_handler.py Outdated Show resolved Hide resolved

krassowski reviewed Nov 27, 2023

View reviewed changes

krassowski approved these changes Nov 27, 2023

View reviewed changes

[skip ci] Remove commented code

bc0705b

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

fcollonval approved these changes Nov 28, 2023

View reviewed changes

fcollonval added 2 commits November 28, 2023 14:26

Fix tests

8839c96

Forgot to import the new dependency os

c02e5bc

Update snapshots from CI

289e1b9

Merge branch 'main' into custom_css

cefd5b4

krassowski reviewed Nov 29, 2023

View reviewed changes

galata/test/documentation/custom_css.test.ts Show resolved Hide resolved

Activate the notebook before taking a screenshot

b991b75

krassowski merged commit 7622f44 into jupyterlab:main Nov 29, 2023
75 of 77 checks passed

krassowski added feature and removed enhancement labels Nov 30, 2023

jtpio mentioned this pull request Dec 6, 2023

Remove custom CSS handling in the notebook repo jupyter/notebook#7175

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Load custom CSS functionality and documentation #14743

Load custom CSS functionality and documentation #14743

RRosio commented Jun 23, 2023 •

edited

jupyterlab-probot bot commented Jun 23, 2023

fcollonval left a comment

fcollonval left a comment

krassowski Nov 27, 2023

krassowski left a comment

krassowski commented Nov 27, 2023 •

edited

krassowski commented Nov 29, 2023 •

edited

fcollonval commented Nov 29, 2023

RRosio commented Nov 29, 2023

fcollonval commented Nov 29, 2023

krassowski commented Nov 29, 2023

RRosio commented Nov 29, 2023

krassowski commented Nov 29, 2023

Load custom CSS functionality and documentation #14743

Load custom CSS functionality and documentation #14743

Conversation

RRosio commented Jun 23, 2023 • edited

References

Code changes

User-facing changes

Backwards-incompatible changes

jupyterlab-probot bot commented Jun 23, 2023

fcollonval left a comment

Choose a reason for hiding this comment

fcollonval left a comment

Choose a reason for hiding this comment

krassowski Nov 27, 2023

Choose a reason for hiding this comment

krassowski left a comment

Choose a reason for hiding this comment

krassowski commented Nov 27, 2023 • edited

krassowski commented Nov 29, 2023 • edited

fcollonval commented Nov 29, 2023

RRosio commented Nov 29, 2023

fcollonval commented Nov 29, 2023

krassowski commented Nov 29, 2023

RRosio commented Nov 29, 2023

krassowski commented Nov 29, 2023

RRosio commented Jun 23, 2023 •

edited

krassowski commented Nov 27, 2023 •

edited

krassowski commented Nov 29, 2023 •

edited