Files
vscode/extensions/image-preview/media/main.css
Matt Bierner 011836a150 Prototyping custom editors (#77789)
* 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
2019-09-10 17:56:57 -07:00

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;
}