mirror of
https://github.com/microsoft/vscode.git
synced 2026-04-23 10:08:49 +01:00
* Custom Editor exploration For #77131 Adds a prototype of custom editors contributed by extensions. This change does the following: - Introduces a new contribution point for the declarative parts of a custom editor - Adds API for registering a webview editor provider. This lets VS Code decided when to create a webview editor - Adds an `openWith` command that lets you select which editor to use to open a resource from the file explorer - Adds a setting that lets you say that you always want to use a custom editor for a given file extension - Hooks up auto opening of a custom editor when opening a file from quick open or explorer - Adds a new extension that contributes a custom image preview for png and jpg files Still needs a lot of UX work and testing. We are also going to explore a more generic "open handler" based approach for supporting custom editors Revert * Re-use existing custom editor if one is already open * Don't re-create custom editor webview when clicking on already visible custom editor * Move customEditorInput to own file * First draft of serializing custom editor inputs * Use glob patterns instead of simple file extensions for matching custom resoruces for custom editors * Add descriptions * Try opening standard editor while prompting for custom editor * Make sure we hide image status on dispose * Make sure we restore editor group too * Use glob patterns for workbench.editor.custom * Allow users to configure custom editors for additional file types * Use filename glob instead of glob on full resource path * Adding placeholder for prompt open with * Add enableByDefault setting for editor contributions * Enable custom editors by default and add `discretion` enum Changes `enableByDefault` boolean to a `discretion` enum. This should give more flexibility if we want other options (such as forcing a given custom editor to always be used even if there are other default ones) * Allow custom editors to specify both a scheme and filenamePattern they are active for * Rework custom editor setting * Don't allow custom editors to be enabled for all resources by a config mistake * Replace built-in image editor with one from extension * Adding reopen with command * Improve comment * Remove commented code * Localize package.json and remove image * Remove extra lib setting from tsconfig
79 lines
1.8 KiB
CSS
79 lines
1.8 KiB
CSS
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the MIT License. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
|
|
html, body {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
|
|
body img {
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|
|
|
|
.container:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
.container {
|
|
padding: 5px 0 0 10px;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
}
|
|
|
|
.container.image {
|
|
padding: 0;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container.image img {
|
|
padding: 0;
|
|
background-position: 0 0, 8px 8px;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
.container.image img {
|
|
background-image:
|
|
linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)),
|
|
linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230));
|
|
}
|
|
|
|
.vscode-dark.container.image img {
|
|
background-image:
|
|
linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)),
|
|
linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20));
|
|
}
|
|
|
|
.container img.pixelated {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.container img.scale-to-fit {
|
|
max-width: calc(100% - 20px);
|
|
max-height: calc(100% - 20px);
|
|
object-fit: contain;
|
|
}
|
|
|
|
.container img {
|
|
margin: auto;
|
|
}
|
|
|
|
.container.zoom-in {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.container.zoom-out {
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
.container .embedded-link,
|
|
.container .embedded-link:hover {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
margin-left: 5px;
|
|
}
|