Extension info UI glitches

[devkabiir]

Issue Type: Bug

Quickly switching between extension details causes UI glitches. This is happened before only when network is down or slow. In this particular scenario an extension stylelint.vscode-stylelint was being installed. See screenshots for details. In the second screenshot, it looks as if two different views are overlapped on each other

VS Code version: Code 1.49.0 (e790b931385d72cf5669fcefc51cdf65990efa5d, 2020-09-10T13:22:08.892Z) OS version: Windows_NT x64 10.0.18363

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz (8 x 2808)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: disabled_off
opengl: enabled_on
protected_video_decode: unavailable_off
rasterization: enabled
skia_renderer: disabled_off_ok
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|15.92GB (4.86GB free)| |Process Argv|.| |Screen Reader|no| |VM|0%|

Extensions (125)

Extension|Author (truncated)|Version ---|---|--- vscode-select-line|and|0.0.3 license-header-manager|ang|0.2.5 ng-template|Ang|0.1001.0 inf|bag|0.0.1 spellright|ban|3.0.52 emojis4git|ben|2.1.2 emojisense|bie|0.8.0 markdown-checkbox|bie|0.1.3 markdown-emoji|bie|0.0.9 markdown-footnotes|bie|0.0.7 markdown-image-size|bie|0.0.4 markdown-mermaid|bie|1.8.1 markdown-preview-github-styles|bie|0.1.6 markdown-yaml-preamble|bie|0.0.4 extended-cursormove|Bil|0.0.2 6x09-assembly|bla|0.5.0 todo-language|blu|0.4.0 vscode-tldr|bmu|1.0.0 vscode-tailwindcss|bra|0.4.3 vscode-toggle-quotes|Bri|0.3.3 scratchpads|bue|0.0.7 better-toml|bun|0.3.2 liquibase-snippets|chr|1.3.0 vs-code-schemas-common-list|chr|0.0.2 gitignore|cod|0.6.0 bracket-pair-colorizer|Coe|1.0.61 vscode-svgviewer|css|2.0.0 postcss|css|1.0.9 transformer|dak|1.8.0 git-checkout|dan|1.0.3 dart-code|Dar|3.14.1 flutter|Dar|3.14.1 node-modules-context-menu|dar|0.0.3 midl-webidl-syntax|dav|0.0.1 vscode-markdownlint|Dav|0.36.3 shebang-language-associator|dav|1.1.1 mustache|daw|1.1.1 vscode-eslint|dba|2.1.8 vscode-dash|dee|2.4.0 vscode-faker|dee|1.4.1 githistory|don|0.6.9 xml|Dot|2.5.1 gitlens|eam|10.2.2 EditorConfig|Edi|0.15.1 prettier-vscode|esb|5.6.0 filter-line|eve|2.0.1 vscode-projects-plus|fab|1.23.3 shell-format|fox|7.0.1 git-utils|dev|0.0.1 vscode-pull-request-github|Git|0.20.0 hover|go-|0.1.0 dart-versionlens|gor|0.25.0 gc-excelviewer|Gra|3.0.40 svgeditor|hen|2.9.0 output-colorizer|IBM|0.1.2 badges|idl|1.0.11 bridlensis|idl|1.0.1 reg|ion|1.0.1 code-select-until|jak|0.6.0 vscode-placeholder-images|Jak|0.1.0 paste-from-screenshot|jam|0.0.1 vscode-edit-csv|jan|0.4.2 svg|joc|1.3.9 vscode-google-rich-snippets|jor|1.0.0 intellij-idea-keybindings|k--|0.2.41 better-line-select|kai|1.1.1 vscode-gutter-preview|kis|0.26.2 vscode-commitizen|Kni|0.9.3 regexp-preview|Lou|0.1.5 smalise|Loy|0.0.8 hexinspector|mat|1.0.1 markdown-shortcuts|mdi|0.12.0 rainbow-csv|mec|1.7.1 git-graph|mhu|1.26.0 dotenv|mik|1.0.1 vscode-scss|mrm|0.9.0 language-gettext|mro|0.2.0 hexeditor|ms-|1.3.0 powershell|ms-|2020.6.0 debugger-for-chrome|msj|4.12.10 vscode-paste-image|mus|1.0.4 color-highlight|nau|2.3.0 editorconfiggenerator|nep|0.2.1 vscode-json-editor|nic|0.2.3 angular-console|nrw|13.0.0 github-actions-vscode|Oma|2.7.0 vscode-ios-common-files|Ort|1.0.5 vscode-print|pdc|0.7.15 polacode|pnp|0.3.4 git-file-history|pom|1.0.1 quicktype|qui|12.0.46 vscode-formatall|rat|0.0.2 vscode-xml|red|0.13.0 vscode-yaml|red|0.10.1 vscode-sort-json|ric|1.18.0 vscode-xml-complete|rog|0.2.12 vscode-gtm|s3r|0.2.0 markdown-preview-enhanced|shd|0.5.13 gitconfig|sid|2.0.1 fish-vscode|sky|0.2.1 vscode-bolt-language|smk|1.0.1 rewrap|stk|1.13.0 apklab|Sur|0.8.1 vscode-textlint|tai|0.8.0 vscode-gitmoji-snippets|thi|3.2.0 ghosttext|tok|1.1.0 hosts|tom|1.1.1 write-good-linter|tra|0.1.4 sort-lines|Tyr|1.9.0 incrementor|use|0.1.4 reopenclosedtab|uyi|1.1.0 vscode-ltex|val|7.0.0 liquibase|voi|0.1.1 vscode-icons|vsc|10.2.0 vscode-nginx|wil|0.7.2 vscode-import-cost|wix|2.12.0 change-case|wma|1.0.0 autocomplete-english-word|wus|0.1.7 vscode-surround|yat|1.0.2 FilterText|yhi|0.0.15 licenser|ymo|1.5.0 markdown-all-in-one|yzh|3.3.0 firebase-configuration-schema|zer|1.3.0 editorconfig-vscode-snippet|zgu|0.2.0 vscode-proto3|zxh|0.4.2 (3 theme extensions excluded)

[mjbvz]

I can't repo this. Do you see this for all extensions or just one in particular? How long do the extension pages take to load on the VS Code marketplace website: https://marketplace.visualstudio.com

[devkabiir]

Th extension doesn't matter I think. I have experienced this exact problem in the past year multiple times but it was always very difficult to reproduce. One thing I noticed was that it almost always happended whenever there was too much network usage going on. For example if I was to use vscode in remote containers (docker+python+django) and browsing extensions to install/remove switching between extension to see their info pages would cause this.

I dont really know how to reproduce it because it almost always is fixed if I switch between editor tabs and extension info tab or I look at information for another extension give it minute or if I reload vscode and look at the same extension the UI glitch is gone.

This time I happened to be well equipped with a screen capture tool.

One more thing, if I don't try any "workarounds" such as switching between tabs. The glich stays. I can scroll up and down the extension info tab and the glitch stays.

If none can figure out whats going on feel free to close this issue.

Edit: In the screenshots above you can see that the scroll to top button is overlapoed with another scroll to top button. My guess (due to lack of understanding for vscode internals) at the time was that the webview/tab wasn't being properly disposed or it was being reused or it wasn't being "reset/cleaned" or the content being rendered is being appended instead of being overwritten before being used again for another extension's info.

[mjbvz]

Thanks. This seems like it has the root cause as #107104, namely that we need to more aggressively cancel these request. Closing in favor of that issue