FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

WebView color scheme (black on black) can make text almost impossible to read · Issue #172 · REditorSupport/vscode-R · GitHub

Repository navigation

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

Closed

Description

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)

Activity

  1. renkun-ken commented on Jan 8, 2020

    Member

    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.

  2. vnijs commented on Jan 8, 2020

    Author

    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)?

  3. renkun-ken commented on Oct 25, 2021

    Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions


      Back | FazBrowse Home | New Git URL