WebView color scheme (black on black) can make text almost impossible to read

[vnijs]

On my linux boxes, R-help in a WebView looks like the below (left). You can just see the black text on a black background ... but barely. The image below on the left is from VS Code "attached" to a docker container running Ubuntu 18.04. I can replicate when use VS Code SSH to remote server running Ubuntu 18.04. I have VS Code running on my mac and there the help looks fine.

A related issue can be seen in the image on the right which comes from code very similar to the below. Not sure why it looks so faded. This happens on macOS and Ubuntu 18.04 systems. browseURL doesn't seem to do anything on any of my systems.

tf <- tempfile()
cat(knitr::knit2html(text = "## A title"), file = tf)
viewer <- getOption("viewer", default = browseURL)
viewer(tf)
browseURL(tf)

[renkun-ken]

The issue is caused by WebView default styling under dark theme in VSCode (https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content).

I cannot reproduce the dimmed help page. Everything looks normal on my Ubuntu and macOS machines under dark themes. I guess it is related to the VSCode theme you use. Under light theme and official dark themes (Dark (Visual Studio), Dark+ (default)), the display looks normal. Since the WebView triggered by browser command does nothing more than simply show the page, we may need to find a way to override all default styling of WebView from VSCode themes.

I can reproduce your viewer issue, it is also caused by the dark theme. I edit the resulted file by adding color: black; to the CSS styles of body, then the problem is gone.

As for browseURL issue, you may notice an error message in the developer tools:

mainThreadExtensionService.ts:65 [[object Object]]Invalid URL: /tmp/Rtmp44U4Sw/file429b436a82d8
$onExtensionRuntimeError @ mainThreadExtensionService.ts:65
mainThreadExtensionService.ts:66 TypeError [ERR_INVALID_URL]: Invalid URL: /tmp/Rtmp44U4Sw/file429b436a82d8
    at onParseError (internal/url.js:243)
    at new URL (internal/url.js:319)
    at /home/renkun/.vscode/extensions/ikuyadeu.r-1.2.0/dist/extension.js:1
    at b (/home/renkun/.vscode/extensions/ikuyadeu.r-1.2.0/dist/extension.js:1)

browseURL does not work with the temp file because it is only supposed to work with a http URL with an HTTP server backend. Viewing a local file in WebView requires altering the resource paths to comply with WebView API and security policy.

const html = content.toString()
        .replace("<style>body{background-color:white;}</style>",
            "<style>body{background-color:white;color:black;}</style>")
        .replace(/<script src="/g, '<script src="' + panel.webview.asWebviewUri(Uri.file(dir)) + "/")
        .replace(/<link href="/g, '<link href="' + panel.webview.asWebviewUri(Uri.file(dir)) + "/");

Currently, both viewer and browser function are not supported to be called directly by user. Printing an htmlwidget will create a temp file with relatively fixed format so the above editing is done before showing it in WebView. The viewer would not work with any HTML file if it uses any external resources (images, JS, CSS, etc.) unless the same editing is done.

I'll take a look and see if we find a way to override WebView default styling specifid by VSCode theme.

[vnijs]

Thanks for looking into this @renkun-ken. FYI I do actually use the default vscode theme (dark +).

Perhaps this is related to some issues that have been reported for the python interactive window (https://github.com/microsoft/vscode-python/issues/3773)?

[renkun-ken]

This is mostly resolved by the native help viewer. Closing.