PR: Add dark css for the Help and IPython Console plugins #8086

dalthviz · 2018-10-16T22:34:40Z

Pull Request Checklist

Read and followed this repo's Contributing Guidelines
Based this PR on the latest version of the correct branch (master or 3.x)
Followed PEP 8 code style
Described the changes and the motivation for them below
Noted what issue(s) this pull request resolves, creating one if needed
Included a screenshot, if this PR makes any visible changes to the UI

Developer Certificate of Origin Affirmation

By submitting this Pull Request or typing my name below, I affirm the
Developer Certificate of Origin
with respect to both the content of the contribution itself and this post,
and understand I am releasing it under Spyder's MIT (Expat) license.

I certify the above statement is true and correct: dalthviz

Description of Changes

Add CSS for the Help plugin in a dark theme.

Issue(s) Resolved

Part of #8068

Fixes #8087

pep8speaks · 2018-10-16T22:34:42Z

Hello @dalthviz! Thanks for updating the PR.

In the file spyder/app/mainwindow.py, following are the PEP8 issues :

Line 169:1: E402 module level import not at top of file

There are no PEP8 issues in the file spyder/plugins/help/plugin.py !
There are no PEP8 issues in the file spyder/plugins/help/utils/sphinxify.py !
There are no PEP8 issues in the file spyder/plugins/help/utils/sphinxthread.py !
There are no PEP8 issues in the file spyder/plugins/ipythonconsole/plugin.py !
There are no PEP8 issues in the file spyder/plugins/ipythonconsole/widgets/client.py !

Comment last updated on October 28, 2018 at 12:40 Hours UTC

CAM-Gerlach · 2018-10-16T23:34:28Z

Issue(s) Resolved
#8068

That's the Epic tracking everything that needs to be done to get the dark theme fully ready to go, so we don't want to close that just yet. I've created an issue specifically for the help pane, and edited your post above to resolve that instead.

EDIT; Sorry, I didn't see you didn't say "Fixes" there...I already created the issue so I added it there, but my mistake.

CAM-Gerlach

Thanks @dalthviz !

Its not clear what's in scope for this PR, so I'll summarize my comments here and then either implement them here, or open a new issue, add them to #8087 , etc.

The "Usage" screen shown whenever Spyder is opened still has the light theme applied
The syntax highlighting has a light background and mostly a light-background syntax scheme, but function calls and assignments, etc. are picked up by the text -> white rules and are thus invisible.
I suggest a light-medium grey for the code, admonition, signature, etc. boxes if you want to keep using a light theme, since the current very light gray is glaringly bright given the rest of the dark theme. Alternatively, you could use a dark syntax theme and straight black or medium-dark grey for the boxes.
Links are rather dark and hard to read; like the Editor, I suggest a lighter shade of blue/cyan

ccordoba12 · 2018-10-17T02:43:31Z

@dalthviz, please apply the changes in this PR to the IPython console, i.e. to the info_widget of each client, which uses the same CSS as the Help's rich widget.

dalthviz · 2018-10-27T11:42:59Z

@ccordoba12 @CAM-Gerlach a new preview:

dalthviz · 2018-10-27T14:51:39Z

A preview of the highlighting for code:

CAM-Gerlach

Looking much better! A few additional comments:

Can you make the white/light interstitial color (when you trigger introspection and the docstring retrieval and rendering is in progress) the normal dark-theme BG color as well? Its very jarring for it to suddenly flash to white, then back to dark.
Could you make links, titles etc. (stuff colored blue) the same lighter blue color as the header bar? They're still a little hard to read.
I definitely prefer the look of the code blocks in this version, but now the contrast between the code and the background is getting a little low. If it isn't too much work, would you consider instead making the code the standard Spyder dark theme and the code block background a medium-dark gray (darker than the current, but lighter than the background grey)?

Thanks!

CAM-Gerlach · 2018-10-27T17:18:12Z

@ccordoba12 The test failure is the same pylint thing as the other PRs. Its a very quick fix, but I can either simply get the Pylint version and hardcode the expected number of messages accordingly, or (preferred) set a fuzzy range for the number of messages, say 85-99 to be more robust against this happening again, given the seeming likelihood any small variations are unlikely to be due to a problem on Spyder's end.

ccordoba12 · 2018-10-27T17:40:42Z

Ok, thanks for the suggestion @CAM-Gerlach! I'm preparing a PR right now to fix that.

ccordoba12 · 2018-10-27T18:23:23Z

@dalthviz, please rebase in top of master to get the latest fixes to our tests.

dalthviz · 2018-10-27T22:40:04Z

A new preview:

Help plugin

Usage

Docstring

Spyder Tutorial

IPython Console plugin:

Loading message:

Kernel error message:

CAM-Gerlach · 2018-10-27T23:35:28Z

@dalthviz That looks really sharp and clean! Fantastic!

Only thing is I prefer the colors of the title bar and body of the "Usage" and "An error occurred starting the kernel" boxes to be swapped, as you had in your previous GIF—it looks kind of bottom-heavy and unexpected as is, since generally in UIs one sees the stronger color as part of the title + surrounding frame, while the "body" (e.g. TEST, usage instructions) is more neutral.

ccordoba12 · 2018-10-27T23:42:14Z

That looks really sharp and clean! Fantastic!

I instructed @dalthviz to follow this

https://bootswatch.com/darkly/

so that's why it looks so good now!

Only thing is I prefer the colors of the title bar and body of the "Usage" and "An error occurred starting the kernel" boxes to be swapped

That's debatable, but I prefer to follow the Darkly theme as it was designed, so I'm going to merge this one as it is for now. Of course, things can changed latter if others agree.

ccordoba12

Great job @dalthviz! I left some minor comments, then this will be ready.

ccordoba12 · 2018-10-27T23:43:17Z

spyder/app/mainwindow.py

@@ -576,12 +576,19 @@ def setup(self):
        logger.info("Applying theme configuration...")
        ui_theme = CONF.get('color_schemes', 'ui_theme')
        color_scheme = CONF.get('color_schemes', 'selected')
+        from spyder.plugins.help.utils.sphinxify import CSS_PATH, DARK_CSS_PATH


Let's move this import to the top of this file

spyder/plugins/ipythonconsole/plugin.py

ccordoba12 · 2018-10-27T23:50:07Z

spyder/plugins/ipythonconsole/plugin.py

@@ -76,6 +77,10 @@
 dependencies.add("matplotlib", _("Display 2D graphics in the IPython Console"),
                 required_version=MATPLOTLIB_REQVER, optional=True)

+# CSS style
+PLUGINS_PATH = get_module_source_path('spyder', 'plugins')
+CSS_PATH = osp.join(PLUGINS_PATH, 'help', 'utils', 'static', 'css')


There's no need for these two lines because (at the end) CSS_PATH is going to be passed from the main window to this plugin, so please remove them.

ccordoba12 · 2018-10-27T23:50:25Z

spyder/plugins/ipythonconsole/plugin.py

@@ -534,7 +539,7 @@ class IPythonConsole(SpyderPluginWidget):
                             "make it writable.")

    def __init__(self, parent, testing=False, test_dir=None,
-                 test_no_stderr=False):
+                 test_no_stderr=False, css_path=CSS_PATH):


Let's change this to css_path=None

ccordoba12 · 2018-10-27T23:50:49Z

spyder/plugins/ipythonconsole/widgets/client.py

@@ -110,7 +110,8 @@ def __init__(self, plugin, id_,
                 options_button=None,
                 show_elapsed_time=False,
                 reset_warning=True,
-                 ask_before_restart=True):
+                 ask_before_restart=True,
+                 css_path=CSS_PATH):


Let's change this to css_path=None.

ccordoba12 · 2018-10-27T23:52:22Z

spyder/plugins/ipythonconsole/widgets/client.py

@@ -135,6 +136,7 @@ def __init__(self, plugin, id_,
        self.allow_rename = True
        self.stderr_dir = None
        self.is_error_shown = False
+        self.css_path = css_path


Let's change this to

if css_path is None: self.css_path = CSS_PATH else: self.css_path = css_path

This way tests for the IPython console alone will pass without problems.

CAM-Gerlach · 2018-10-28T00:15:11Z

I instructed @dalthviz to follow this

Great call; it looks amazing!

I prefer to follow the Darkly theme as it was designed,

We can always come back to it later and get e.g. @jnsebgosselin to weigh in. However, I'm not sure where in the Darkly theme it is intended to have warning dialogs look like that; the closest I see is

ccordoba12

Thanks a lot @dalthviz!! Really great job here!

Ticonderoga · 2018-12-09T09:44:39Z

The css is realy great !! But it doesn't work for table ! As an example try to get the documentation about scipy.optimize. The background is white and with a white text it becomes unreadable.

Thanks for your work

CAM-Gerlach · 2018-12-09T16:22:37Z

Thanks @Ticonderoga ! Here's an example screenshot of what you're describing; also, it shows the scrollbar is still unthemed. I'll add it to #8068 .

ccordoba12 · 2018-12-09T18:12:41Z

@dalthviz, please solve this problem.

dalthviz added the User Interface (UI) label Oct 16, 2018

dalthviz added this to the v4.0beta2 milestone Oct 16, 2018

dalthviz self-assigned this Oct 16, 2018

dalthviz requested a review from ccordoba12 October 16, 2018 22:34

CAM-Gerlach added type:Enhancement component:Help status:Work In Progress labels Oct 16, 2018

CAM-Gerlach reviewed Oct 17, 2018

View reviewed changes

CAM-Gerlach mentioned this pull request Oct 17, 2018

Add dark theme style to Help pane #8087

Closed

dalthviz changed the title ~~PR: [WIP] Initial css for the Help plugin in a dark theme~~ PR: Initial css for the Help plugin in a dark theme Oct 27, 2018

CAM-Gerlach reviewed Oct 27, 2018

View reviewed changes

ccordoba12 changed the title ~~PR: Initial css for the Help plugin in a dark theme~~ PR: Add dark css for the Help and IPython Console plugins Oct 27, 2018

dalthviz added 5 commits October 27, 2018 21:25

Initial css for the Help plugin in a dark theme.

40532bc

DarkPlugins: dark CSS for the Help and IPython Console plugins

2eb6f07

DarkPlugins: use black color in div.highlight

acedab8

DarkPlugins: change div.highlight pre gray

86c439f

DarkPlugins: update colors following bootswatch scheme

d72e1d1

dalthviz force-pushed the dark_help branch from 3ba20f1 to d72e1d1 Compare October 27, 2018 19:26

dalthviz and others added 2 commits October 28, 2018 00:03

DarkPlugins: update tutorial colors for section header

2e3585f

Merge branch 'master' into dark_help

b3e2181

DarkPlugins: update color for kernel error

85fc3b6

ccordoba12 reviewed Oct 27, 2018

View reviewed changes

ccordoba12 removed the status:Work In Progress label Oct 28, 2018

DarkPlugins: improve css_path handling and code style

5e5f782

dalthviz force-pushed the dark_help branch from e312d8e to 5e5f782 Compare October 28, 2018 12:40

ccordoba12 approved these changes Oct 28, 2018

View reviewed changes

ccordoba12 merged commit a3af9c7 into spyder-ide:master Oct 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR: Add dark css for the Help and IPython Console plugins #8086

PR: Add dark css for the Help and IPython Console plugins #8086

dalthviz commented Oct 16, 2018 •

edited by CAM-Gerlach

Loading

pep8speaks commented Oct 16, 2018 •

edited

Loading

CAM-Gerlach commented Oct 16, 2018 •

edited

Loading

CAM-Gerlach left a comment •

edited

Loading

ccordoba12 commented Oct 17, 2018

dalthviz commented Oct 27, 2018

dalthviz commented Oct 27, 2018

CAM-Gerlach left a comment

CAM-Gerlach commented Oct 27, 2018

ccordoba12 commented Oct 27, 2018

ccordoba12 commented Oct 27, 2018

dalthviz commented Oct 27, 2018

CAM-Gerlach commented Oct 27, 2018

ccordoba12 commented Oct 27, 2018

ccordoba12 left a comment

ccordoba12 Oct 27, 2018

ccordoba12 Oct 27, 2018

ccordoba12 Oct 27, 2018

ccordoba12 Oct 27, 2018

ccordoba12 Oct 27, 2018

CAM-Gerlach commented Oct 28, 2018

ccordoba12 left a comment

Ticonderoga commented Dec 9, 2018 •

edited

Loading

CAM-Gerlach commented Dec 9, 2018 •

edited

Loading

ccordoba12 commented Dec 9, 2018

PR: Add dark css for the Help and IPython Console plugins #8086

PR: Add dark css for the Help and IPython Console plugins #8086

Conversation

dalthviz commented Oct 16, 2018 • edited by CAM-Gerlach Loading

Pull Request Checklist

Developer Certificate of Origin Affirmation

Description of Changes

Issue(s) Resolved

pep8speaks commented Oct 16, 2018 • edited Loading

Comment last updated on October 28, 2018 at 12:40 Hours UTC

CAM-Gerlach commented Oct 16, 2018 • edited Loading

CAM-Gerlach left a comment • edited Loading

Choose a reason for hiding this comment

ccordoba12 commented Oct 17, 2018

dalthviz commented Oct 27, 2018

dalthviz commented Oct 27, 2018

CAM-Gerlach left a comment

Choose a reason for hiding this comment

CAM-Gerlach commented Oct 27, 2018

ccordoba12 commented Oct 27, 2018

ccordoba12 commented Oct 27, 2018

dalthviz commented Oct 27, 2018

Help plugin

Usage

Docstring

Spyder Tutorial

IPython Console plugin:

Loading message:

Kernel error message:

CAM-Gerlach commented Oct 27, 2018

ccordoba12 commented Oct 27, 2018

ccordoba12 left a comment

Choose a reason for hiding this comment

ccordoba12 Oct 27, 2018

Choose a reason for hiding this comment

ccordoba12 Oct 27, 2018

Choose a reason for hiding this comment

ccordoba12 Oct 27, 2018

Choose a reason for hiding this comment

ccordoba12 Oct 27, 2018

Choose a reason for hiding this comment

ccordoba12 Oct 27, 2018

Choose a reason for hiding this comment

CAM-Gerlach commented Oct 28, 2018

ccordoba12 left a comment

Choose a reason for hiding this comment

Ticonderoga commented Dec 9, 2018 • edited Loading

CAM-Gerlach commented Dec 9, 2018 • edited Loading

ccordoba12 commented Dec 9, 2018

dalthviz commented Oct 16, 2018 •

edited by CAM-Gerlach

Loading

pep8speaks commented Oct 16, 2018 •

edited

Loading

CAM-Gerlach commented Oct 16, 2018 •

edited

Loading

CAM-Gerlach left a comment •

edited

Loading

Ticonderoga commented Dec 9, 2018 •

edited

Loading

CAM-Gerlach commented Dec 9, 2018 •

edited

Loading