Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bracket pair color colorizing changes too often #145072

Closed
SimonSiefke opened this issue Mar 14, 2022 · 2 comments
Closed

bracket pair color colorizing changes too often #145072

SimonSiefke opened this issue Mar 14, 2022 · 2 comments
Assignees
@hediet
Labels
bracket-pair-colorization bug Issue identified by VS Code Team member as probable bug verified Verification succeeded
Milestone
March 2022

Comments

@SimonSiefke
Copy link
Contributor

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.65.2
  • OS Version: Ubuntu 21.10

Steps to Reproduce:

  1. Have Bracket Pair Colorizing enabled
  2. Open this file in VSCode
<!DOCTYPE html>
<html>
  <head>
    <script>
      performance.mark('code/didStartRenderer')
    </script>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; img-src 'self' https://vscodeweb.azureedge.net http://localhost:* https: data: blob: vscode-remote-resource:; media-src 'none'; child-src blob:; frame-src 'self' https://vscodeweb.azureedge.net http://localhost:* https://*.vscode-webview.net; object-src 'self'; script-src 'self' 'sha256-iyDBl6JN0EqKAWnhObyiHwcESxFsDvn1NSkaCxbETxw=' 'unsafe-eval' https://vscodeweb.azureedge.net https://ms-vscode.vscode-unpkg.net http://localhost:*; worker-src 'self' blob:; style-src 'self' https://vscodeweb.azureedge.net http://localhost:* 'unsafe-inline' https:; connect-src 'self' https://vscodeweb.azureedge.net http://localhost:* https: ws:; font-src 'self' https://vscodeweb.azureedge.net http://localhost:* https: vscode-remote-resource:; manifest-src 'self'; require-trusted-types-for 'script'; trusted-types TrustedFunctionWorkaround ExtensionScripts amdLoader cellRendererEditorText defaultWorkerFactory diffEditorWidget editorGhostText domLineBreaksComputer editorViewLayer diffReview extensionHostWorker insane dompurify notebookRenderer safeInnerHtml standaloneColorizer tokenizeToString webNestedWorkerExtensionHost webWorkerExtensionHost;"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Code" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@code" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <meta property="og:title" content="Visual Studio Code for the Web" />
    <meta
      property="og:description"
      content="Build with Visual Studio Code, anywhere, anytime, entirely in your browser."
    />
    <meta property="og:image" content="/static/stable/social.png" />
  </head>
  <body></body>
  <script>
    ;(() => {
      var t = {
          97: function (t, e, o) {
            var n,
              i,
              a =
                (this && this.__awaiter) ||
                function (t, e, o, n) {
                  return new (o || (o = Promise))(function (i, a) {
                    function r(t) {
                      try {
                        c(n.next(t))
                      } catch (t) {
                        a(t)
                      }
                    }
                    function s(t) {
                      try {
                        c(n.throw(t))
                      } catch (t) {
                        a(t)
                      }
                    }
                    function c(t) {
                      var e
                      t.done
                        ? i(t.value)
                        : ((e = t.value),
                          e instanceof o
                            ? e
                            : new o(function (t) {
                                t(e)
                              })).then(r, s)
                    }
                    c((n = n.apply(t, e || [])).next())
                  })
                }
            ;(n = [o, e, o(497)]),
              void 0 ===
                (i = function (t, e, o) {
                  'use strict'
                  Object.defineProperty(e, '__esModule', { value: !0 })
                  const n = (t, e) =>
                    new Promise((o, n) => {
                      const i = document.createElement('link')
                      e && i.setAttribute('data-name', e),
                        (i.rel = 'stylesheet'),
                        (i.type = 'text/css'),
                        (i.href = t),
                        (i.onload = o),
                        (i.onerror = () =>
                          n(new Error(`Failed to load stylesheet: ${t}`))),
                        document.head.append(i)
                    })
                  ;(function (t) {
                    var e, i
                    return a(this, void 0, void 0, function* () {
                      let r
                      const s =
                          null === (e = window.trustedTypes) || void 0 === e
                            ? void 0
                            : e.createPolicy('amdLoader', {
                                createScriptURL(t) {
                                  if (void 0 !== r && t.startsWith(r)) return t
                                  if (
                                    t.startsWith('/static/') ||
                                    '/sw.js' === t
                                  )
                                    return t
                                  throw new Error(`Invalid script url: ${t}`)
                                },
                              }),
                        c = (t) =>
                          new Promise((e, o) => {
                            var n
                            performance.mark(`web/willLoadScript:${t}`)
                            const i = document.createElement('script')
                            ;(i.type = 'text/javascript'),
                              (i.onload = e),
                              (i.onerror = () =>
                                o(new Error(`Failed to load script: ${t}`))),
                              (i.src =
                                null !==
                                  (n =
                                    null == s
                                      ? void 0
                                      : s.createScriptURL(t)) && void 0 !== n
                                  ? n
                                  : t),
                              document.head.append(i)
                          }),
                        M = new URL(window.location.href),
                        d = (0, o.getQuality)(M)
                      let l, u
                      if (((0, o.setupQualityHeadLinks)(d), 'dev' === d)) {
                        r = new URL('/vscode-sources', M).href
                        try {
                          const t = yield fetch(`${r}/_builtin`),
                            e = yield t.text(),
                            o = document.createElement('meta')
                          ;(o.id = 'vscode-workbench-builtin-extensions'),
                            o.setAttribute('data-settings', e),
                            document.head.append(o)
                        } catch (t) {
                          throw new Error(
                            "Failed to load dev sources, make sure you're running 'yarn web'."
                          )
                        }
                        yield c(`${r}/out/vs/webPackagePaths.js`), (l = {})
                        for (const e of Object.keys(t.webPackagePaths))
                          l[
                            e
                          ] = `${r}/remote/web/node_modules/${e}/${t.webPackagePaths[e]}`
                      } else {
                        let t = M.searchParams.get('vscode-version')
                        if (!t) {
                          const e = yield fetch(
                            `https://update.code.visualstudio.com/api/update/web-standalone/${d}/latest`
                          )
                          t = (yield e.json()).version
                        }
                        ;(r = `https://vscodeweb.azureedge.net/${d}/${t}`),
                          (u = { quality: d, version: t })
                      }
                      n(
                        `${r}/out/vs/workbench/workbench.web.main.css`,
                        'vs/workbench/workbench.web.main'
                      ),
                        (t.require = {
                          baseUrl: `${r}/out`,
                          trustedTypesPolicy: s,
                          paths: l,
                        }),
                        performance.mark('code/willLoadWorkbenchMain'),
                        yield c(`${r}/out/vs/loader.js`),
                        'dev' !== d &&
                          (yield Promise.all([
                            c(
                              `${r}/out/vs/workbench/workbench.web.main.nls.js`
                            ),
                            c(`${r}/out/vs/workbench/workbench.web.main.js`),
                          ])),
                        yield c('/static/main.js')
                      const { main: D } = yield ((N = 'client/main'),
                      new Promise((e, o) => {
                        performance.mark(`web/willLoadModule:${N}`),
                          t.require([N], e, o)
                      }))
                      var N
                      if ('serviceWorker' in navigator) {
                        const t =
                          null !==
                            (i =
                              null == s
                                ? void 0
                                : s.createScriptURL('/sw.js')) && void 0 !== i
                            ? i
                            : '/sw.js'
                        if (window.location.host.includes('localhost')) {
                          const e =
                            yield navigator.serviceWorker.getRegistration(t)
                          null == e || e.unregister()
                        } else {
                          const e = navigator.serviceWorker.register(t)
                          u &&
                            e.then((t) =>
                              a(this, void 0, void 0, function* () {
                                var e
                                let o =
                                  null !== (e = t.active) && void 0 !== e
                                    ? e
                                    : t.waiting
                                o ||
                                  (o = yield new Promise((e) => {
                                    if (t.active) return e(t.active)
                                    if (!t.installing)
                                      throw new Error(
                                        'Unnexpected service worker state'
                                      )
                                    const o = t.installing,
                                      n = (t) => {
                                        if ('activated' === t.target.state)
                                          return (
                                            o.removeEventListener(
                                              'statechange',
                                              n
                                            ),
                                            e(t.target)
                                          )
                                      }
                                    o.addEventListener('statechange', n)
                                  })),
                                  o.postMessage({ type: 'preload', preload: u })
                              })
                            )
                        }
                      }
                      try {
                        performance.mark('web/willCallMain'),
                          yield D(d, o.DefaultQuality)
                      } finally {
                        performance.mark('web/didCallMain')
                      }
                    })
                  })(self)
                    .catch((t) => {
                      var e
                      console.error(JSON.stringify(t, void 0, 2)),
                        console.error(t),
                        null ===
                          (e = document.getElementById(
                            'monaco-parts-splash'
                          )) ||
                          void 0 === e ||
                          e.remove(),
                        n('/static/base.css')
                      const o = document.createElement('span')
                      ;(o.className = 'branding'),
                        (o.textContent = 'Visual Studio Code')
                      const i = document.createElement('div')
                      i.className = 'message-container'
                      const a = document.createElement('div')
                      ;(a.className = 'message'),
                        (a.textContent =
                          'Fatal Error 🙈 Please check Developer Tools 🐱‍💻'),
                        document.body.appendChild(o),
                        i.appendChild(a),
                        document.body.appendChild(i)
                    })
                    .finally(() => {
                      performance.mark('web/didBootstrap')
                    }),
                    (function () {
                      performance.mark('code/willShowPartsSplash')
                      ;(() => {
                        var t, e
                        const o = localStorage.getItem('monaco-parts-splash')
                        if (!o) return !1
                        let n
                        try {
                          n = JSON.parse(o)
                        } catch (t) {
                          return !1
                        }
                        if (!n || 'object' != typeof n || !n.layoutInfo)
                          return !1
                        const i = document.createElement('style')
                        ;(i.className = 'initialShellColors'),
                          document.head.appendChild(i),
                          (i.textContent = `\n\t\t\tbody {\n\t\t\t\tbackground-color: ${n.colorInfo.editorBackground};\n\t\t\t\tcolor: ${n.colorInfo.foreground}; margin: 0; padding: 0;\n\t\t\t}\n\t\t\t#monaco-parts-splash {\n\t\t\t\ttransition: opacity 0.35s ease-out;\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t#monaco-parts-splash.loading {\n\t\t\t\topacity: 1;\n\t\t\t}`)
                        const { layoutInfo: a, colorInfo: r } = n,
                          s = document.createElement('div')
                        ;(s.id = 'monaco-parts-splash'),
                          (s.className =
                            null !== (t = n.baseTheme) && void 0 !== t
                              ? t
                              : ''),
                          a.windowBorder &&
                            ((s.style.position = 'relative'),
                            (s.style.height = 'calc(100vh - 2px)'),
                            (s.style.width = 'calc(100vw - 2px)'),
                            (s.style.border =
                              '1px solid var(--window-border-color)'),
                            s.style.setProperty(
                              '--window-border-color',
                              null !== (e = r.windowBorder) && void 0 !== e
                                ? e
                                : null
                            ),
                            a.windowBorderRadius &&
                              (s.style.borderRadius = a.windowBorderRadius)),
                          (a.sideBarWidth = Math.min(
                            a.sideBarWidth,
                            window.innerWidth -
                              (a.activityBarWidth + a.editorPartMinWidth)
                          ))
                        const c = document.createElement('div')
                        c.setAttribute(
                          'style',
                          `position: absolute; width: 100%; left: 0; top: 0; height: ${a.titleBarHeight}px; background-color: ${r.titleBarBackground}; -webkit-app-region: drag;`
                        ),
                          s.appendChild(c)
                        const M = document.createElement('div')
                        M.setAttribute(
                          'style',
                          `position: absolute; height: calc(100% - ${a.titleBarHeight}px); top: ${a.titleBarHeight}px; ${a.sideBarSide}: 0; width: ${a.activityBarWidth}px; background-color: ${r.activityBarBackground};`
                        ),
                          s.appendChild(M)
                        const d = document.createElement('div')
                        d.setAttribute(
                          'style',
                          `position: absolute; height: calc(100% - ${a.titleBarHeight}px); top: ${a.titleBarHeight}px; ${a.sideBarSide}: ${a.activityBarWidth}px; width: ${a.sideBarWidth}px; background-color: ${r.sideBarBackground};`
                        ),
                          s.appendChild(d)
                        const l = document.createElement('div')
                        return (
                          l.setAttribute(
                            'style',
                            `position: absolute; width: 100%; bottom: 0; left: 0; height: ${a.statusBarHeight}px; background-color: ${r.statusBarBackground};`
                          ),
                          s.appendChild(l),
                          document.body.appendChild(s),
                          s.classList.add('loading'),
                          !0
                        )
                      })() ||
                        (() => {
                          const t = document.createElement('style')
                          ;(t.textContent =
                            '\n\t\t\thtml, body, #monaco-parts-splash {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\t#monaco-parts-splash {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\ttransition: opacity 0.35s ease-out;\n\t\t\t\topacity: 0;\n\t\t\t\tbackground-color: #fdfdfd;\n\t\t\t\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDQyIDQwIj4KICAgIDxnIG9wYWNpdHk9IjAuMDUiPgogICAgICAgIDxwYXRoIGZpbGw9ImJsYWNrIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMC4yMzU0IDM5Ljg4MzZDMjkuOTE5NSAzOS44ODYyIDI5LjYwNTcgMzkuODI4NyAyOS4zMTA5IDM5LjcxMzlDMjguOTg5NiAzOS41ODg1IDI4LjY5NzcgMzkuMzk3OSAyOC40NTM5IDM5LjE1MzlMMTIuNjk5OSAyNC43Nzk5TDkuMjM5MTcgMjcuNDAzN0w1LjgzNDM0IDI5Ljk4NkM1LjcwNDU0IDMwLjA4NDUgNS41NjIwMSAzMC4xNjI2IDUuNDExNjQgMzAuMjE4OUM1LjIwMjU5IDMwLjI5NzYgNC45NzgzIDMwLjMzMzkgNC43NTE5IDMwLjMyMzlDNC4zNjM2MSAzMC4zMDY4IDMuOTkzNTYgMzAuMTU0MyAzLjcwNTg4IDI5Ljg5MjlMMS41MDU4OCAyNy44OTI5QzEuMzM0NTIgMjcuNzM2OCAxLjE5NzYzIDI3LjU0NjYgMS4xMDM5NiAyNy4zMzQ2QzEuMDEwMjkgMjcuMTIyNSAwLjk2MTkxNCAyNi44OTMzIDAuOTYxOTE0IDI2LjY2MTRDMC45NjE5MTQgMjYuNDI5NiAxLjAxMDI5IDI2LjIwMDQgMS4xMDM5NiAyNS45ODgzQzEuMTk3NjMgMjUuNzc2MiAxLjMzNDUyIDI1LjU4NjEgMS41MDU4OCAyNS40Mjk5TDcuNDU3ODggMTkuOTk5OUw0LjY3MDcyIDE3LjQ1MzJMMS41MDczNCAxNC41Njg5QzEuMzM1ODQgMTQuNDEyOSAxLjE5ODgzIDE0LjIyMjcgMS4xMDUwNyAxNC4wMTA3QzEuMDExMzIgMTMuNzk4NiAwLjk2Mjg5MSAxMy41NjkzIDAuOTYyODkxIDEzLjMzNzRDMC45NjI4OTEgMTMuMTA1NiAxLjAxMTMyIDEyLjg3NjMgMS4xMDUwNyAxMi42NjQyQzEuMTk4ODMgMTIuNDUyMSAxLjMzNTg0IDEyLjI2MiAxLjUwNzM0IDEyLjEwNTlMMy43MDczNCAxMC4xMDU5QzMuNzI5MjYgMTAuMDg2IDMuNzUxNjUgMTAuMDY2NyAzLjc3NDUgMTAuMDQ4QzQuMDUyMTMgOS44MjAyNyA0LjM5NjY2IDkuNjg3ODkgNC43NTY5IDkuNjcxOTZDNS4xNDUxOSA5LjY1NDc5IDUuNTI3MjUgOS43NzQwMSA1LjgzNjg4IDEwLjAwODlMMTIuNjk5OSAxNS4yMTc5TDI4LjQ1MTkgMC44NDM5NDJDMjguNTQ1MiAwLjc1MTY4MiAyOC42NDU1IDAuNjY2NzYzIDI4Ljc1MTkgMC41ODk5NDJDMjkuMTE1MyAwLjMyNTYwMSAyOS41NDM2IDAuMTY0NjMzIDI5Ljk5MTEgMC4xMjQxMzdDMzAuMDkxOSAwLjExNTAyIDMwLjE5MjggMC4xMTIwODYgMzAuMjkzMyAwLjExNTIzNEMzMC42NDQ0IDAuMTIzNzQ4IDMwLjk5MTggMC4yMDY0NDMgMzEuMzExNyAwLjM2MDAyN0wzOS41NDc3IDQuMzIxMDNDMzkuOTcxNiA0LjUyNTIyIDQwLjMyOTIgNC44NDQ4NyA0MC41Nzk1IDUuMjQzMjVDNDAuNzc4NyA1LjU2MDIzIDQwLjkwMzUgNS45MTY4IDQwLjk0NjIgNi4yODYyOUM0MC45NTc0IDYuMzgxNDggNDAuOTYzMiA2LjQ3NzU0IDQwLjk2MzMgNi41NzQwMVY2LjY3Mjk1QzQwLjk2MzMgNi42NTc4MSA0MC45NjMxIDYuNjQyNjggNDAuOTYyNyA2LjYyNzU3VjMzLjM3MDRDNDAuOTYzMSAzMy4zNTUyIDQwLjk2MzMgMzMuMzQwMSA0MC45NjMzIDMzLjMyNDlWMzMuNDE5OUM0MC45NjMzIDMzLjUxNDYgNDAuOTU3OSAzMy42MDkgNDAuOTQ3MiAzMy43MDI1QzQwLjkwNTUgMzQuMDc1NCA0MC43ODAyIDM0LjQzNTUgNDAuNTc5MyAzNC43NTUyQzQwLjMyOSAzNS4xNTM0IDM5Ljk3MTQgMzUuNDcyOSAzOS41NDc3IDM1LjY3N0wzMS4zMTE3IDM5LjYzOEMzMS4wMTkxIDM5Ljc3ODUgMzAuNzAzNyAzOS44NTk2IDMwLjM4MzMgMzkuODc5QzMwLjMzNDEgMzkuODgyIDMwLjI4NDggMzkuODgzNSAzMC4yMzU0IDM5Ljg4MzZaTTMwLjk1MDkgMTAuOTM2OUwxOS4wMDI4IDE5Ljk5ODdMMzAuOTU0OSAyOS4wNjM5TDMwLjk1MDkgMTAuOTM2OVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogICAgPC9nPgo8L3N2Zz4=);\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tbackground-position: 50% 50%;\n\t\t\t\tbackground-size: 300px;\n\t\t\t\tz-index: 100000000000000;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t#monaco-parts-splash.loading {\n\t\t\t\topacity: 1;\n\t\t\t}'),
                            document.head.appendChild(t)
                          const e = document.createElement('div')
                          ;(e.id = 'monaco-parts-splash'),
                            document.body.appendChild(e),
                            setTimeout(() => e.classList.add('loading'), 20)
                        })(),
                        performance.mark('code/didShowPartsSplash')
                    })()
                }.apply(e, n)) || (t.exports = i)
          },
          497: (t, e, o) => {
            var n
            void 0 ===
              (n = function (t, e) {
                'use strict'
                Object.defineProperty(e, '__esModule', { value: !0 }),
                  (e.setupQualityHeadLinks =
                    e.getQuality =
                    e.DefaultQuality =
                      void 0)
                const o = new Set(['stable', 'insider', 'dev'])
                ;(e.DefaultQuality = 'stable'),
                  (e.getQuality = function (t) {
                    var n, i
                    let a = t.searchParams.get('vscode-quality')
                    return (
                      a ||
                        'vscode.dev' !== t.hostname ||
                        (a = e.DefaultQuality),
                      a ||
                        (a =
                          null ===
                            (i =
                              null ===
                                (n = /^(?<quality>[^.]+)\.vscode\.dev$/.exec(
                                  t.hostname
                                )) || void 0 === n
                                ? void 0
                                : n.groups) || void 0 === i
                            ? void 0
                            : i.quality),
                      a || (a = e.DefaultQuality),
                      'insiders' === a
                        ? (a = 'insider')
                        : o.has(a) || (a = e.DefaultQuality),
                      a
                    )
                  }),
                  (e.setupQualityHeadLinks = function (t) {
                    t = 'insider' === t ? 'insider' : 'stable'
                    const e = document.createElement('link')
                    ;(e.rel = 'icon'),
                      (e.href = `/static/${t}/favicon.ico`),
                      (e.type = 'image/x-icon'),
                      document.head.append(e)
                    const o = document.createElement('link')
                    ;(o.rel = 'apple-touch-icon'),
                      (o.href = `/static/${t}/code-192-apple.png`),
                      document.head.append(o)
                    const n = document.createElement('link')
                    ;(n.rel = 'manifest'),
                      (n.href = `/static/${t}/code.webmanifest`),
                      (n.crossOrigin = 'use-credentials'),
                      document.head.append(n)
                  })
              }.apply(e, [o, e])) || (t.exports = n)
          },
        },
        e = {}
      ;(function o(n) {
        var i = e[n]
        if (void 0 !== i) return i.exports
        var a = (e[n] = { exports: {} })
        return t[n].call(a.exports, a, a.exports, o), a.exports
      })(97)
    })()
  </script>
</html>
  1. Reload Window
  2. Bracket pair colorizing happens ~10 times with different colors

bracket-pair-colorizing

Expected behavior: Bracket pair colorizing only happens once
@hediet hediet added bug Issue identified by VS Code Team member as probable bug bracket-pair-colorization labels Mar 16, 2022
@hediet hediet added this to the March 2022 milestone Mar 16, 2022
hediet added a commit that referenced this issue Mar 18, 2022
@hediet
Fixing #145072 by reporting tokenization as incomplete when tokenizat…
db25f1e 
…ion state store is not defined.
@hediet
Copy link
Member

hediet commented Mar 18, 2022 •
edited

Fixed by db25f1e.

It would be awesome if you could verify that this bug is fixed indeed in mondays insider release!

@hediet hediet closed this as completed Mar 18, 2022
@SimonSiefke
Copy link
Contributor Author

Verified. Thanks a lot!

@Tyriar Tyriar added the verified Verification succeeded label Mar 24, 2022
@github-actions github-actions bot locked and limited conversation to collaborators May 2, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@hediet hediet

Labels
bracket-pair-colorization bug Issue identified by VS Code Team member as probable bug verified Verification succeeded
Projects
None yet
Milestone
March 2022
Development

No branches or pull requests
3 participants
@Tyriar @hediet @SimonSiefke