microsoft / microsoft/vscode-livepreview

Explain possible Internal (Embedded) vs External Browser version (capabilities) mismatch.

Open
#537 2 comments 0 reactions 1 assignee View on GitHub

@andreamah is already working on this.

Since Aug 31, 2023.

polish
Dominant language
TypeScript
Stars
596
Forks
119
Avg merge
1d 4m
Merged PRs (30d)
5

Description

It seems it might be beneficial to point out that -- especially for cutting-edge web platform features -- the Internal (Embedded) viewer may be few versions behind the External (Desktop) counterpart on the same machine.

STR for the record / those interested:

HTML document
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="dark light">
  <title>useragent string and css color mix support test</title>
  <style>
    .color-mix-support::after {
      content: 'undetermined 🤔.'
    }

    @supports not (color: color-mix(in srgb, black 1%, white 99%)) {
      .color-mix-support::after {
        content: 'NOT implemented 😥.'
      }
    }

    @supports (color: color-mix(in srgb, black 1%, white 99%)) {
      .color-mix-support::after {
        content: 'implemented 🎉.'
      }
    }
  </style>
</head>

<body>
  <p class="color-mix-support"><code>Color-mix</code> support is: </p>
  <script>document.write(navigator.userAgent)</script>
</body>

</html>
In the Embedded / Internal browser of current VSC Insiders:

VSC window with green icon and embedded preview displaying content: Color-mix support is: NOT implemented 😥 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.82.0-insider Chrome/108.0.5359.215 Electron/22.3.18 Safari/537.36

In regular Edge:

Small MS Edge widnow showing document that reads: Color-mix support is:  implemented 🎉 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188

Anecdotally, I've ran into this particular problem in the very first (re-)encounter with this otherwise absolutely awesome extension, and it indeed took me some time to find out why I see different things in the Internal and External views (hence the STRs). For me it was the color-mix() CSS property, that became supported quite recently (2023-03) in Chromium v.111 (that came to Electron in v24 (?)), yet current VSC Electron version v22.3 in Insiders apparently contains only Chrome v.108-ish.


BTW, whilst command is called "Live Preview: Show Preview (Internal Browser)", this feature seems to be consistently called "Embedded [something]" in the Readme. Maybe also opportunity for some unification?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.