Skip to content

Commit

Permalink
Introduce and adopt asCSSUrl
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexdima
alexdima committed Aug 16, 2019
1 parent a7cc79a commit 623855b
Show file tree
Hide file tree
Showing 10 changed files with 27 additions and 20 deletions.
7 changes: 7 additions & 0 deletions src/vs/base/browser/dom.ts
View file
Expand Up @@ -1204,3 +1204,10 @@ export function asDomUri(uri: URI): URI {
}
return uri;
}

/**
* returns url('...')
*/
export function asCSSUrl(uri: URI): string {
return `url('${asDomUri(uri).toString(true).replace(/'/g, '%27')}')`;
}
8 changes: 4 additions & 4 deletions src/vs/editor/browser/services/codeEditorServiceImpl.ts
View file
Expand Up @@ -229,11 +229,11 @@ const _CSS_MAP: { [prop: string]: string; } = {
cursor: 'cursor:{0};',
letterSpacing: 'letter-spacing:{0};',

gutterIconPath: 'background:url(\'{0}\') center center no-repeat;',
gutterIconPath: 'background:{0} center center no-repeat;',
gutterIconSize: 'background-size:{0};',

contentText: 'content:\'{0}\';',
contentIconPath: 'content:url(\'{0}\');',
contentIconPath: 'content:{0};',
margin: 'margin:{0};',
width: 'width:{0};',
height: 'height:{0};'
Expand Down Expand Up @@ -399,7 +399,7 @@ class DecorationCSSRules {
if (typeof opts !== 'undefined') {
this.collectBorderSettingsCSSText(opts, cssTextArr);
if (typeof opts.contentIconPath !== 'undefined') {
cssTextArr.push(strings.format(_CSS_MAP.contentIconPath, dom.asDomUri(URI.revive(opts.contentIconPath)).toString(true).replace(/'/g, '%27')));
cssTextArr.push(strings.format(_CSS_MAP.contentIconPath, dom.asCSSUrl(URI.revive(opts.contentIconPath))));
}
if (typeof opts.contentText === 'string') {
const truncated = opts.contentText.match(/^.*$/m)![0]; // only take first line
Expand All @@ -426,7 +426,7 @@ class DecorationCSSRules {
const cssTextArr: string[] = [];

if (typeof opts.gutterIconPath !== 'undefined') {
cssTextArr.push(strings.format(_CSS_MAP.gutterIconPath, dom.asDomUri(URI.revive(opts.gutterIconPath)).toString(true).replace(/'/g, '%27')));
cssTextArr.push(strings.format(_CSS_MAP.gutterIconPath, dom.asCSSUrl(URI.revive(opts.gutterIconPath))));
if (typeof opts.gutterIconSize !== 'undefined') {
cssTextArr.push(strings.format(_CSS_MAP.gutterIconSize, opts.gutterIconSize));
}
Expand Down
6 changes: 3 additions & 3 deletions src/vs/platform/actions/browser/menuEntryActionViewItem.ts
View file
Expand Up @@ -3,7 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { addClasses, createCSSRule, removeClasses, asDomUri } from 'vs/base/browser/dom';
import { addClasses, createCSSRule, removeClasses, asCSSUrl } from 'vs/base/browser/dom';
import { domEvent } from 'vs/base/browser/event';
import { ActionViewItem, Separator } from 'vs/base/browser/ui/actionbar/actionbar';
import { IAction } from 'vs/base/common/actions';
Expand Down Expand Up @@ -244,8 +244,8 @@ export class MenuEntryActionViewItem extends ActionViewItem {
iconClass = MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
} else {
iconClass = ids.nextId();
createCSSRule(`.icon.${iconClass}`, `background-image: url("${asDomUri(item.iconLocation.light || item.iconLocation.dark).toString()}")`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: url("${asDomUri(item.iconLocation.dark).toString()}")`);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.light || item.iconLocation.dark)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.dark)}`);
MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
}

Expand Down
4 changes: 2 additions & 2 deletions src/vs/workbench/api/browser/viewsExtensionPoint.ts
View file
Expand Up @@ -37,7 +37,7 @@ import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
import { IWorkbenchActionRegistry, Extensions as ActionExtensions } from 'vs/workbench/common/actions';
import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
import { createCSSRule, asDomUri } from 'vs/base/browser/dom';
import { createCSSRule, asCSSUrl } from 'vs/base/browser/dom';

export interface IUserFriendlyViewsContainerDescriptor {
id: string;
Expand Down Expand Up @@ -356,7 +356,7 @@ class ViewsExtensionHandler implements IWorkbenchContribution {

// Generate CSS to show the icon in the activity bar
const iconClass = `.monaco-workbench .activitybar .monaco-action-bar .action-label.${cssClass}`;
createCSSRule(iconClass, `-webkit-mask: url('${asDomUri(icon)}') no-repeat 50% 50%; -webkit-mask-size: 24px;`);
createCSSRule(iconClass, `-webkit-mask: ${asCSSUrl(icon)} no-repeat 50% 50%; -webkit-mask-size: 24px;`);
}

return viewContainer;
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/browser/parts/activitybar/activitybarActions.ts
View file
Expand Up @@ -171,7 +171,7 @@ export class PlaceHolderViewletActivityAction extends ViewletActivityAction {
super({ id, name: id, cssClass: `extensionViewlet-placeholder-${id.replace(/\./g, '-')}` }, viewletService, layoutService, telemetryService);

const iconClass = `.monaco-workbench .activitybar .monaco-action-bar .action-label.${this.class}`; // Generate Placeholder CSS to show the icon in the activity bar
DOM.createCSSRule(iconClass, `-webkit-mask: url('${DOM.asDomUri(iconUrl) || ''}') no-repeat 50% 50%; -webkit-mask-size: 24px;`);
DOM.createCSSRule(iconClass, `-webkit-mask: ${DOM.asCSSUrl(iconUrl)} no-repeat 50% 50%; -webkit-mask-size: 24px;`);
}

setActivity(activity: IActivity): void {
Expand Down
4 changes: 2 additions & 2 deletions src/vs/workbench/browser/parts/quickinput/quickInputUtils.ts
View file
Expand Up @@ -22,8 +22,8 @@ export function getIconClass(iconPath: { dark: URI; light?: URI; } | undefined):
iconClass = iconPathToClass[key];
} else {
iconClass = iconClassGenerator.nextId();
dom.createCSSRule(`.${iconClass}`, `background-image: url("${dom.asDomUri(iconPath.light || iconPath.dark).toString()}")`);
dom.createCSSRule(`.vs-dark .${iconClass}, .hc-black .${iconClass}`, `background-image: url("${dom.asDomUri(iconPath.dark).toString()}")`);
dom.createCSSRule(`.${iconClass}`, `background-image: ${dom.asCSSUrl(iconPath.light || iconPath.dark)}`);
dom.createCSSRule(`.vs-dark .${iconClass}, .hc-black .${iconClass}`, `background-image: ${dom.asCSSUrl(iconPath.dark)}`);
iconPathToClass[key] = iconClass;
}

Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/browser/parts/views/customView.ts
View file
Expand Up @@ -756,7 +756,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
templateData.resourceLabel.setResource({ name: label, description }, { title, hideIcon: true, extraClasses: ['custom-view-tree-node-item-resourceLabel'], matches: createMatches(element.filterData) });
}

templateData.icon.style.backgroundImage = iconUrl ? `url('${DOM.asDomUri(iconUrl).toString(true)}')` : '';
templateData.icon.style.backgroundImage = iconUrl ? DOM.asCSSUrl(iconUrl) : '';
DOM.toggleClass(templateData.icon, 'custom-view-tree-node-item-icon', !!iconUrl);
templateData.actionBar.context = <TreeViewItemHandleArg>{ $treeViewId: this.treeViewId, $treeItemHandle: node.handle };
templateData.actionBar.push(this.menus.getResourceActions(node), { icon: true, label: false });
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/contrib/extensions/browser/extensionsWorkbenchService.ts
View file
Expand Up @@ -131,7 +131,7 @@ class Extension implements IExtension {

private get localIconUrl(): string | null {
if (this.local && this.local.manifest.icon) {
return asDomUri(resources.joinPath(this.local.location, this.local.manifest.icon)).toString();
return asDomUri(resources.joinPath(this.local.location, this.local.manifest.icon)).toString(true);
}
return null;
}
Expand Down
6 changes: 3 additions & 3 deletions src/vs/workbench/contrib/webview/browser/webviewEditorInput.ts
View file
Expand Up @@ -39,11 +39,11 @@ class WebviewIconsManager {
this._icons.forEach((value, key) => {
const webviewSelector = `.show-file-icons .webview-${key}-name-file-icon::before`;
if (URI.isUri(value)) {
cssRules.push(`${webviewSelector} { content: ""; background-image: url(${dom.asDomUri(value).toString()}); }`);
cssRules.push(`${webviewSelector} { content: ""; background-image: ${dom.asCSSUrl(value)}; }`);
}
else {
cssRules.push(`.vs ${webviewSelector} { content: ""; background-image: url(${dom.asDomUri(value.light).toString()}); }`);
cssRules.push(`.vs-dark ${webviewSelector} { content: ""; background-image: url(${dom.asDomUri(value.dark).toString()}); }`);
cssRules.push(`.vs ${webviewSelector} { content: ""; background-image: ${dom.asCSSUrl(value.light)}; }`);
cssRules.push(`.vs-dark ${webviewSelector} { content: ""; background-image: ${dom.asCSSUrl(value.dark)}; }`);
}
});
this._styleElement.innerHTML = cssRules.join('\n');
Expand Down
6 changes: 3 additions & 3 deletions src/vs/workbench/services/themes/browser/fileIconThemeData.ts
View file
Expand Up @@ -11,7 +11,7 @@ import * as Json from 'vs/base/common/json';
import { ExtensionData, IThemeExtensionPoint, IFileIconTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { IFileService } from 'vs/platform/files/common/files';
import { getParseErrorMessage } from 'vs/base/common/jsonErrorMessages';
import { asDomUri } from 'vs/base/browser/dom';
import { asCSSUrl } from 'vs/base/browser/dom';

export class FileIconThemeData implements IFileIconTheme {
id: string;
Expand Down Expand Up @@ -332,7 +332,7 @@ function _processIconThemeDocument(id: string, iconThemeDocumentLocation: URI, i
let fonts = iconThemeDocument.fonts;
if (Array.isArray(fonts)) {
fonts.forEach(font => {
let src = font.src.map(l => `url('${asDomUri(resolvePath(l.path))}') format('${l.format}')`).join(', ');
let src = font.src.map(l => `${asCSSUrl(resolvePath(l.path))} format('${l.format}')`).join(', ');
cssRules.push(`@font-face { src: ${src}; font-family: '${font.id}'; font-weight: ${font.weight}; font-style: ${font.style}; }`);
});
cssRules.push(`.show-file-icons .file-icon::before, .show-file-icons .folder-icon::before, .show-file-icons .rootfolder-icon::before { font-family: '${fonts[0].id}'; font-size: ${fonts[0].size || '150%'}}`);
Expand All @@ -343,7 +343,7 @@ function _processIconThemeDocument(id: string, iconThemeDocumentLocation: URI, i
let definition = iconThemeDocument.iconDefinitions[defId];
if (definition) {
if (definition.iconPath) {
cssRules.push(`${selectors.join(', ')} { content: ' '; background-image: url("${asDomUri(resolvePath(definition.iconPath))}"); }`);
cssRules.push(`${selectors.join(', ')} { content: ' '; background-image: ${asCSSUrl(resolvePath(definition.iconPath))}; }`);
}
if (definition.fontCharacter || definition.fontColor) {
let body = '';
Expand Down

0 comments on commit 623855b

Please sign in to comment.