Vscode-jupyter: Interactive window theming is broken for the material theme

[rlukss]

Environment data

• VS Code version: 1.34.0
• Extension version (available under the Extensions sidebar): 2019.5.17059
• OS and version: Ubuntu 18.04 LTS
• Python version (& distribution if applicable, e.g. Anaconda): Python 3.7.3, Anaconda
• Type of virtual environment used (N/A | venv | virtualenv | conda | ...): conda
• Relevant/affected Python packages and their versions: none

Expected behaviour

Correct theming of the Python interactive windows as in the version before. I am using material theme.

Actual behaviour

% 50 of the interactive window are occupied by the following, formated correctly like a markdown section:

Error: Illegal value for token color: at

in MonacoEditor
in div
in Code
in div
in div
in div
in div
in div
in Cell
in ErrorBoundary
in div
in div
in div
in MainPanel

Steps to reproduce:

1. Use Material Theme extension, with material theme chosen
2. Run cell in Python file

Logs

Output for Python in the Output panel (View→Output, change the drop-down the upper-right of the Output panel to Python)

Starting Jedi Python language engine.
##########Linting Output - pylint##########

--------------------------------------------------------------------
Your code has been rated at 10.00/10 (previous run: 10.00/10, +0.00)

----------Generating Tags----------
ctags --options=/home/lukss/.vscode/extensions/ms-python.python-2019.5.17059/resources/ctagOptions --languages=Python --exclude=**/site-packages/** -o /home/lukss/Documents/DSP/stabilimetryAnalysis/.vscode/tags .
##########Linting Output - pylint##########

--------------------------------------------------------------------
Your code has been rated at 10.00/10 (previous run: 10.00/10, +0.00)

Output from Console under the Developer Tools panel (toggle Developer Tools on under Help; turn on source maps to make any tracebacks be useful by running Enable source map support for extension debugging)

Info Python Extension: 2019-05-29 12:44:23: Wait for sys info for 09632ef2-c696-4cc9-85ea-267e4300bdd2 0
workbench.main.js:4167 [Embedded Page] Uncaught Error: Illegal value for token color: 

Error: Illegal value for token color: 
    at ColorMap.getId (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:10100:19)
    at resolveParsedTokenThemeRules (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:10083:58)
    at Function.TokenTheme.createFromParsedTokenTheme (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:10128:16)
    at Function.TokenTheme.createFromRawTokenTheme (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:10125:21)
    at StandaloneTheme.get [as tokenTheme] (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:10570:47)
    at TokenizationSupport2Adapter._toBinaryTokens (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:14348:65)
    at TokenizationSupport2Adapter.tokenize2 (webpack:///./node_modules/monaco-editor/esm/vs/editor/editor.api.js_+_56_modules?:14380:27)
    at ModelLinesTokens._updateTokensUntilLine (webpack:///./node_modules/monaco-editor/esm/vs/editor/common/model/textModel.js_+_10_modules?:4118:46)
    at ModelLinesTokens._tokenizeOneLine (webpack:///./node_modules/monaco-editor/esm/vs/editor/common/model/textModel.js_+_10_modules?:4084:14)
    at TextModel._revalidateTokensNow (webpack:///./node_modules/monaco-editor/esm/vs/editor/common/model/textModel.js_+_10_modules?:5758:52)

[rchiodo]

I'm assuming this is just the material theme that's broken?

[rlukss]

Yes, the standard VS code themes work.

[rchiodo]

Root cause is the material theme has rules with empty colors. The monaco editor doesn't handle this case, so we have to special case it in our theme parsing.

[rlukss]

I have to mention though that before the todays update the theme was working perfectly fine.

[rchiodo]

The new update added intellisense support into the interactive window. That change required a change to the underlying editor we use. The old editor didn't even read themes. The new one is the same one VS code uses and it can read theme values.

The theme values on the Material Theme are missing some foreground values (although this is likely on purpose)

[rlukss]

Nice! Thank you for the explanation!

[rchiodo]

@rlukss I just fixed this in our master branch. In about 30 minutes or so an insider's build will drop with this fix in it if you'd like to try it out.

The insider's build is basically our daily build that contains all of the work we're doing for the next release.

[joeparis]

@rchiodo I'm wondering what the status is of the push for this fix? I'm running version 1.36.0-insider and am still experiencing the same problem when using the Cobalt2 theme. Version details are below:

Version: 1.36.0-insider (user setup)
Commit: c089daa858f34631f5f827ff8a0313bf1e2ded6d
Date: 2019-06-07T05:19:15.188Z
Electron: 4.2.3
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Windows_NT x64 10.0.17763

Thanks!!

[rchiodo]

This fix is in our insider's build. To install our insider's you don't need vscode-insiders, but rather the insider's vsix for our extension. It can be found here

You install this from the extension tab by uninstalling the python extension, clicking the '...' in the upper right, and picking install from vsix.

[rchiodo]

Actually Cobalt2 has another problem. #ccc is one of the token colors and the monaco editor doesn't handle that. So Cobalt2 is actually a separate bug.

[rchiodo]

I ented a new issue for Cobalt2:
https://github.com/microsoft/vscode-python/issues/5950

[joeparis]

This fix is in our insider's build. To install our insider's you don't need vscode-insiders, but rather the insider's vsix for our extension. It can be found here

You install this from the extension tab by uninstalling the python extension, clicking the '...' in the upper right, and picking install from vsix.

You're absolutely right, thanks for the reply and for correcting my poor reading of the initial issue. And thanks again for filing the bug with Cobalt2.

[s3and0s]

This fix is in our insider's build. To install our insider's you don't need vscode-insiders, but rather the insider's vsix for our extension. It can be found here

You install this from the extension tab by uninstalling the python extension, clicking the '...' in the upper right, and picking install from vsix.

@rchiodo I downloaded the VSIX extension and installed it, but found that this version breaks my python interactive window with the error below. I know it's nothing wrong with my jupyter notebook environment because I can successfully run the same code in my terminal.

Failed to connect to Jupyter notebook. TypeError: r.fetch.call is not a function

I have since uninstalled the vsix extension and just switched to another theme (I had Material theme installed), and everything is now working fine.

Should this be another reported issue?

[rchiodo]

Thanks. Yes that's a separate issue. Caused by a recent submission.

I've logged the following bug: https://github.com/microsoft/vscode-python/issues/5956