From a63f7c5814e60db7ac0ac740abfd0282dbe8e33e Mon Sep 17 00:00:00 2001 From: fangnx Date: Mon, 5 Aug 2019 16:15:57 -0400 Subject: [PATCH] Fixed #1278: implemented tabbar decorator & supported error marker in editor tabs - Implemented `TabBarDecorator` that provides tabs with decorations, similar to what we already had for tree nodes. - Supported diagnostic problem markers (error, warning, ...) in editor tabs in the main area. Tabs in side bars can be decorated as well in the future using the same code. - Refactored `TreeDecoration` to a more generic `NodeDecoration`, which is currently used for decorating tree nodes and tabbar tabs. Signed-off-by: fangnx --- CHANGELOG.md | 2 + .../browser/frontend-application-module.ts | 7 +- .../src/browser/shell/tab-bar-decorator.ts | 88 ++++ packages/core/src/browser/shell/tab-bars.ts | 88 +++- .../core/src/browser/tree/tree-decorator.ts | 414 +----------------- .../core/src/browser/tree/tree-widget.tsx | 4 +- .../core/src/browser/widget-decoration.ts | 334 ++++++++++++++ .../problem/problem-frontend-module.ts | 5 +- .../problem/problem-tabbar-decorator.ts | 168 +++++++ .../src/browser/tree/typehierarchy-tree.ts | 4 +- 10 files changed, 697 insertions(+), 417 deletions(-) create mode 100644 packages/core/src/browser/shell/tab-bar-decorator.ts create mode 100644 packages/core/src/browser/widget-decoration.ts create mode 100644 packages/markers/src/browser/problem/problem-tabbar-decorator.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 4861220896e8c..916799d3b2544 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - [task] displayed the customized tasks as "configured tasks" in the task quick open [#5777](https://github.com/theia-ide/theia/pull/5777) - [task] allowed users to override any task properties other than the ones used in the task definition [#5777](https://github.com/theia-ide/theia/pull/5777) - [outline] added `OutlineViewTreeModel` for the outline view tree widget [#5687](https://github.com/theia-ide/theia/pull/5687) +- [core] supported diagnostic marker in the tab bar [#5845](https://github.com/theia-ide/theia/pull/5845) Breaking changes: @@ -21,6 +22,7 @@ Breaking changes: - `Source Control` and `Explorer` are view containers now and previous layout data cannot be loaded for them. Because of it the layout is completely reset. - [vscode] complete support of variable substitution [#5835](https://github.com/theia-ide/theia/pull/5835) - inline `VariableQuickOpenItem` +- [core] refactored `TreeDecoration` to `WidgetDecoration` and moved it to shell, since it is a generic decoration that can be used by different types of nodes (currently by tree nodes and tabbar tabs) [#5845](https://github.com/theia-ide/theia/pull/5845) ## v0.9.0 - [core] added `theia-widget-noInfo` css class to be used by widgets when displaying no information messages [#5717](https://github.com/theia-ide/theia/pull/5717) diff --git a/packages/core/src/browser/frontend-application-module.ts b/packages/core/src/browser/frontend-application-module.ts index 2d246c72d00bd..6fb090dc46a91 100644 --- a/packages/core/src/browser/frontend-application-module.ts +++ b/packages/core/src/browser/frontend-application-module.ts @@ -78,6 +78,7 @@ import { ViewContainer, ViewContainerIdentifier } from './view-container'; import { QuickViewService } from './quick-view-service'; import { QuickTitleBar } from './quick-open/quick-title-bar'; import { DialogOverlayService } from './dialogs'; +import { TabBarDecoratorService, TabBarDecorator } from './shell/tab-bar-decorator'; export const frontendApplicationModule = new ContainerModule((bind, unbind, isBound, rebind) => { const themeService = ThemeService.get(); @@ -114,9 +115,13 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo bind(DockPanelRenderer).toSelf(); bind(TabBarRendererFactory).toFactory(context => () => { const contextMenuRenderer = context.container.get(ContextMenuRenderer); - return new TabBarRenderer(contextMenuRenderer); + const decoratorService = context.container.get(TabBarDecoratorService); + return new TabBarRenderer(contextMenuRenderer, decoratorService); }); + bindContributionProvider(bind, TabBarDecorator); + bind(TabBarDecoratorService).toSelf().inSingletonScope(); + bindContributionProvider(bind, OpenHandler); bind(DefaultOpenerService).toSelf().inSingletonScope(); bind(OpenerService).toService(DefaultOpenerService); diff --git a/packages/core/src/browser/shell/tab-bar-decorator.ts b/packages/core/src/browser/shell/tab-bar-decorator.ts new file mode 100644 index 0000000000000..f71427cf72803 --- /dev/null +++ b/packages/core/src/browser/shell/tab-bar-decorator.ts @@ -0,0 +1,88 @@ +/******************************************************************************** + * Copyright (C) 2019 Ericsson and others. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +import { inject, injectable, named, postConstruct } from 'inversify'; +import { Event, Emitter, Disposable, DisposableCollection, ContributionProvider } from '../../common'; +import { Title, Widget } from '@phosphor/widgets'; +import { WidgetDecoration } from '../widget-decoration'; + +export const TabBarDecorator = Symbol('TabBarDecorator'); + +export interface TabBarDecorator { + + /** + * The unique identifier of the tab bar decorator. + */ + readonly id: string; + + /** + * Event that is fired when any of the available tabbar decorators has changes. + */ + readonly onDidChangeDecorations: Event; + + /** + * Decorate tabs by the underlying URI. + * @returns A map from URI of the tab to its decoration data. + */ + decorate(titles: Title[]): Map; +} + +@injectable() +export class TabBarDecoratorService implements Disposable { + + protected readonly onDidChangeDecorationsEmitter = new Emitter(); + + readonly onDidChangeDecorations = this.onDidChangeDecorationsEmitter.event; + + protected readonly toDispose = new DisposableCollection(); + + @inject(ContributionProvider) @named(TabBarDecorator) + protected readonly contributions: ContributionProvider; + + @postConstruct() + protected init(): void { + const decorators = this.contributions.getContributions(); + + decorators.forEach(decorator => { + decorator.onDidChangeDecorations(() => + this.onDidChangeDecorationsEmitter.fire(undefined) + ); + }); + } + + dispose(): void { + this.toDispose.dispose(); + } + + getDecorations(titles: Title[]): Map { + const decorators = this.contributions.getContributions(); + const changes: Map = new Map(); + for (const decorator of decorators) { + for (const [id, data] of (decorator.decorate(titles)).entries()) { + if (changes.has(id)) { + changes.get(id)!.push(data); + } else { + changes.set(id, [data]); + } + } + } + return changes; + } +} + +export namespace TabBarDecoration { + +} diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts index 68e9632fa7c94..ccf3176522ce0 100644 --- a/packages/core/src/browser/shell/tab-bars.ts +++ b/packages/core/src/browser/shell/tab-bars.ts @@ -17,7 +17,7 @@ import PerfectScrollbar from 'perfect-scrollbar'; import { TabBar, Title, Widget } from '@phosphor/widgets'; import { VirtualElement, h, VirtualDOM, ElementInlineStyle } from '@phosphor/virtualdom'; -import { MenuPath } from '../../common'; +import { DisposableCollection, MenuPath, notEmpty } from '../../common'; import { ContextMenuRenderer } from '../context-menu-renderer'; import { Signal } from '@phosphor/signaling'; import { Message } from '@phosphor/messaging'; @@ -25,6 +25,8 @@ import { ArrayExt } from '@phosphor/algorithm'; import { ElementExt } from '@phosphor/domutils'; import { TabBarToolbarRegistry, TabBarToolbar } from './tab-bar-toolbar'; import { TheiaDockPanel, MAIN_AREA_ID, BOTTOM_AREA_ID } from './theia-dock-panel'; +import { WidgetDecoration } from '../widget-decoration'; +import { TabBarDecoratorService } from './tab-bar-decorator'; /** The class name added to hidden content nodes, which are required to render vertical side bars. */ const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content'; @@ -71,18 +73,31 @@ export class TabBarRenderer extends TabBar.Renderer { */ contextMenuPath?: MenuPath; + protected readonly toDispose = new DisposableCollection(); + // TODO refactor shell, rendered should only receive props with event handlers // events should be handled by clients, like ApplicationShell // right now it is mess: (1) client logic belong to renderer, (2) cyclic dependencies between renderes and clients - constructor(protected readonly contextMenuRenderer?: ContextMenuRenderer) { + constructor( + protected readonly contextMenuRenderer?: ContextMenuRenderer, + protected readonly decoratorService?: TabBarDecoratorService + ) { super(); + if (this.decoratorService) { + this.toDispose.push(this.decoratorService); + this.toDispose.push(this.decoratorService.onDidChangeDecorations(() => this.tabBar && this.tabBar.update())); + } } /** * Render tabs with the default DOM structure, but additionally register a context * menu listener. + * @param {SideBarRenderData} data - data to render the tab. + * @param {boolean} decorateIcon - whether the tab icon should be decorated (e.g., with diagnostic markers). */ - renderTab(data: SideBarRenderData): VirtualElement { + renderTab(data: SideBarRenderData, decorateIcon: boolean = true): VirtualElement { + // TODO: add `renderTabs` in ScrollableTabBar, in which `render(data, true) is called + // This way the default decorateIcon value can be set to `false`, or it can be an optional parameter, const title = data.title; const id = this.createTabId(data.title); const key = this.createTabKey(data); @@ -95,7 +110,7 @@ export class TabBarRenderer extends TabBar.Renderer { oncontextmenu: this.handleContextMenuEvent, ondblclick: this.handleDblClickEvent }, - this.renderIcon(data), + this.renderIcon(data, decorateIcon), this.renderLabel(data), this.renderCloseIcon(data) ); @@ -155,18 +170,75 @@ export class TabBarRenderer extends TabBar.Renderer { return h.div({ className: 'p-TabBar-tabLabel', style }, data.title.label); } + protected getDecorations(tab: string): WidgetDecoration.Data[] { + const tabDecorations = []; + if (this.tabBar && this.decoratorService) { + const allDecorations = this.decoratorService.getDecorations([...this.tabBar.titles]); + if (allDecorations.has(tab)) { + tabDecorations.push(...allDecorations.get(tab)); + } + } + return tabDecorations; + } + + protected getDecorationData(tab: string, key: K): WidgetDecoration.Data[K][] { + return this.getDecorations(tab).filter(data => data[key] !== undefined).map(data => data[key]); + + } + + private getIconClass(iconName: string | string[], additionalClasses: string[] = []): string { + const iconClass = (typeof iconName === 'string') ? ['a', 'fa', `fa-${iconName}`] : ['a'].concat(iconName); + return iconClass.concat(additionalClasses).join(' '); + } + /** * If size information is available for the icon, set it as inline style. Tab padding * is also considered in the `top` position. + * @param {boolean} decorate - whether the icon should be decorated. */ - renderIcon(data: SideBarRenderData): VirtualElement { + renderIcon(data: SideBarRenderData, decorate?: boolean): VirtualElement { let top: string | undefined; if (data.paddingTop) { top = `${data.paddingTop || 0}px`; } - const className = this.createIconClass(data); const style: ElementInlineStyle = { top }; - return h.div({ className, style }, data.title.iconLabel); + const baseClassName = this.createIconClass(data); + + const overlayIcons: VirtualElement[] = []; + const decorationData = this.getDecorationData(data.title.caption, 'iconOverlay'); + + // Check if the tab has decoration markers to be rendered on top. + if (decorate && decorationData.length > 0) { + const baseIcon: VirtualElement = h.div({ className: baseClassName, style }, data.title.iconLabel); + const wrapperClassName: string = WidgetDecoration.Styles.ICON_WRAPPER_CLASS; + decorationData + .filter(notEmpty) + .map(overlay => [overlay.position, overlay] as [WidgetDecoration.IconOverlayPosition, WidgetDecoration.IconOverlay | WidgetDecoration.IconClassOverlay]) + .forEach(([position, overlay]) => { + const iconAdditionalClasses: string[] = [WidgetDecoration.Styles.DECORATOR_SIZE_CLASS, WidgetDecoration.IconOverlayPosition.getStyle(position)]; + const overlayIconStyle = (color?: string) => { + if (color === undefined) { + return {}; + } + return { color }; + }; + // Parse the optional background (if it exists) of the overlay icon. + if (overlay.background) { + const backgroundIconClassName = this.getIconClass(overlay.background.shape, iconAdditionalClasses); + overlayIcons.push( + h.div({ key: data.title.label + '-background', className: backgroundIconClassName, style: overlayIconStyle(overlay.background.color) }) + ); + } + // Parse the overlay icon. + const overlayIcon = (overlay as WidgetDecoration.IconOverlay).icon || (overlay as WidgetDecoration.IconClassOverlay).iconClass; + const overlayIconClassName = this.getIconClass(overlayIcon, iconAdditionalClasses); + overlayIcons.push( + h.span({ key: data.title.label, className: overlayIconClassName, style: overlayIconStyle(overlay.color) }) + ); + }); + return h.div({ className: wrapperClassName, style }, [baseIcon, ...overlayIcons]); + } + return h.div({ className: baseClassName, style }, data.title.iconLabel); } protected handleContextMenuEvent = (event: MouseEvent) => { @@ -550,7 +622,7 @@ export class SideTabBar extends ScrollableTabBar { } else { rd = { title, current, zIndex }; } - content[i] = renderer.renderTab(rd); + content[i] = renderer.renderTab(rd, false); } VirtualDOM.render(content, host); } diff --git a/packages/core/src/browser/tree/tree-decorator.ts b/packages/core/src/browser/tree/tree-decorator.ts index d0c5f92142b60..83e51badd3b5b 100644 --- a/packages/core/src/browser/tree/tree-decorator.ts +++ b/packages/core/src/browser/tree/tree-decorator.ts @@ -17,6 +17,7 @@ import { injectable } from 'inversify'; import { Tree, TreeNode } from './tree'; import { Event, Emitter, Disposable, DisposableCollection, MaybePromise } from '../../common'; +import { WidgetDecoration } from '../widget-decoration'; /** * Tree decorator that can change the look and the style of the tree items within a widget. @@ -162,414 +163,21 @@ export abstract class AbstractTreeDecoratorService implements TreeDecoratorServi } /** - * Namespace for the decoration data and the styling refinements for the decorated tree nodes. + * @deprecated import from `@theia/core/lib/browser/widget-decoration` instead. */ -export namespace TreeDecoration { +export import TreeDecoration = WidgetDecoration; +export interface DecoratedTreeNode extends TreeNode { /** - * CSS styles for the tree decorators. + * The additional tree decoration data attached to the tree node itself. */ - export namespace Styles { - export const CAPTION_HIGHLIGHT_CLASS = 'theia-caption-highlight'; - export const CAPTION_PREFIX_CLASS = 'theia-caption-prefix'; - export const CAPTION_SUFFIX_CLASS = 'theia-caption-suffix'; - export const ICON_WRAPPER_CLASS = 'theia-icon-wrapper'; - export const DECORATOR_SIZE_CLASS = 'theia-decorator-size'; - export const TOP_RIGHT_CLASS = 'theia-top-right'; - export const BOTTOM_RIGHT_CLASS = 'theia-bottom-right'; - export const BOTTOM_LEFT_CLASS = 'theia-bottom-left'; - export const TOP_LEFT_CLASS = 'theia-top-left'; - } - - /** - * For the sake of simplicity, we have merged the `font-style`, `font-weight`, and the `text-decoration` together. - */ - export type FontStyle = 'normal' | 'bold' | 'italic' | 'oblique' | 'underline' | 'line-through'; - - /** - * A string that could be: - * - * - one of the browser colors, (E.g.: `blue`, `red`, `magenta`), - * - the case insensitive hexadecimal color code, (for instance, `#ee82ee`, `#20B2AA`, `#f09` ), or - * - either the `rgb()` or the `rgba()` functions. - * - * For more details, see: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value. - * - * Note, it is highly recommended to use one of the predefined colors of Theia, so the desired color will - * look nice with both the `light` and the `dark` theme too. - */ - export type Color = string; - - /** - * Encapsulates styling information of the font. - */ - export interface FontData { - - /** - * Zero to any font style. - */ - readonly style?: FontStyle | FontStyle[]; - - /** - * The color of the font. - */ - readonly color?: Color; - - } - - /** - * Arbitrary information that has to be shown either before or after the caption as a prefix or a suffix. - */ - export interface CaptionAffix { - - /** - * The text content of the prefix or the suffix. - */ - readonly data: string; - - /** - * Font data for customizing the prefix of the suffix. - */ - readonly fontData?: FontData; - - } - - export interface BaseTailDecoration { - - /** - * Optional tooltip for the tail decoration. - */ - readonly tooltip?: string; - } - - /** - * Unlike caption suffixes, tail decorations appears right-aligned after the caption and the caption suffixes (is any). - */ - export interface TailDecoration extends BaseTailDecoration { - /** - * The text content of the tail decoration. - */ - readonly data: string; - - /** - * Font data for customizing the content. - */ - readonly fontData?: FontData; - } - - export interface TailDecorationIcon extends BaseTailDecoration { - /** - * This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`. - * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. - */ - readonly icon: string; - - /** - * The color of the icon. - */ - readonly color?: Color; - } - - export interface TailDecorationIconClass extends BaseTailDecoration { - /** - * This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw'] - * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. - */ - readonly iconClass: string[]; - - /** - * The color of the icon. - */ - readonly color?: Color; - } - - /** - * Enumeration for the quadrant to overlay the image on. - */ - export enum IconOverlayPosition { - - /** - * Overlays the top right quarter of the original image. - */ - TOP_RIGHT, - - /** - * Overlays the bottom right of the original image. - */ - BOTTOM_RIGHT, - - /** - * Overlays the bottom left segment of the original image. - */ - BOTTOM_LEFT, - - /** - * Occupies the top left quarter of the original icon. - */ - TOP_LEFT - - } - - export namespace IconOverlayPosition { - - /** - * Returns with the CSS class style for the enum. - */ - export function getStyle(position: IconOverlayPosition): string { - switch (position) { - case IconOverlayPosition.TOP_RIGHT: return TreeDecoration.Styles.TOP_RIGHT_CLASS; - case IconOverlayPosition.BOTTOM_RIGHT: return TreeDecoration.Styles.BOTTOM_RIGHT_CLASS; - case IconOverlayPosition.BOTTOM_LEFT: return TreeDecoration.Styles.BOTTOM_LEFT_CLASS; - case IconOverlayPosition.TOP_LEFT: return TreeDecoration.Styles.TOP_LEFT_CLASS; - } - } - - } - - /** - * A shape that can be optionally rendered behind the overlay icon. Can be used to further refine colors. - */ - export interface IconOverlayBackground { - - /** - * Either `circle` or `square`. - */ - readonly shape: 'circle' | 'square'; - - /** - * The color of the background shape. - */ - readonly color?: Color; - } - - /** - * Has not effect if the tree node being decorated has no associated icon. - */ - export interface BaseOverlay { - - /** - * The position where the decoration will be placed on the top of the original icon. - */ - readonly position: IconOverlayPosition; - - /** - * The color of the overlaying icon. If not specified, then the default icon color will be used. - */ - readonly color?: Color; - - /** - * The optional background color of the overlay icon. - */ - readonly background?: IconOverlayBackground; - - } - - export interface IconOverlay extends BaseOverlay { - /** - * This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`. - * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. - */ - readonly icon: string; - } - - export interface IconClassOverlay extends BaseOverlay { - /** - * This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw'] - * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. - */ - readonly iconClass: string[]; - } - - /** - * The caption highlighting with the highlighted ranges and an optional background color. - */ - export interface CaptionHighlight { - - /** - * The ranges to highlight in the caption. - */ - readonly ranges: CaptionHighlight.Range[] - - /** - * The optional color of the text data that is being highlighted. Falls back to the default `mark` color values defined under a tree node segment class. - */ - readonly color?: Color; - - /** - * The optional background color of the text data that is being highlighted. - */ - readonly backgroundColor?: Color; - } - - export namespace CaptionHighlight { - - /** - * A pair of offset and length that has to be highlighted as a range. - */ - export interface Range { - - /** - * Zero based offset of the highlighted region. - */ - readonly offset: number; - - /** - * The length of the highlighted region. - */ - readonly length: number; - - } - - export namespace Range { - - /** - * `true` if the `arg` is contained in the range. The ranges are closed ranges, hence the check is inclusive. - */ - export function contains(arg: number, range: Range): boolean { - return arg >= range.offset && arg <= (range.offset + range.length); - } - - } - - /** - * The result of a caption splitting based on the highlighting information. - */ - export interface Fragment { - - /** - * The text data of the fragment. - */ - readonly data: string; - - /** - * Has to be highlighted if defined. - */ - readonly highligh?: true - - } - - /** - * Splits the `caption` argument based on the ranges from the `highlight` argument. - */ - export function split(caption: string, highlight: CaptionHighlight): Fragment[] { - const result: Fragment[] = []; - const ranges = highlight.ranges.slice(); - const containerOf = (index: number) => ranges.findIndex(range => Range.contains(index, range)); - let data = ''; - for (let i = 0; i < caption.length; i++) { - const containerIndex = containerOf(i); - if (containerIndex === -1) { - data += caption[i]; - } else { - if (data.length > 0) { - result.push({ data }); - } - const { length } = ranges.splice(containerIndex, 1).shift()!; - result.push({ data: caption.substr(i, length), highligh: true }); - data = ''; - i = i + length - 1; - } - } - if (data.length > 0) { - result.push({ data }); - } - if (ranges.length !== 0) { - throw new Error('Error occurred when splitting the caption. There was a mismatch between the caption and the corresponding highlighting ranges.'); - } - return result; - } - - } - - /** - * Encapsulates styling information that has to be applied on the tree node which we decorate. - */ - export interface Data { - - /** - * The higher number has higher priority. If not specified, treated as `0`. - * When multiple decorators are available for the same item, and decoration data cannot be merged together, - * then the higher priority item will be applied on the decorated element and the lower priority will be ignored. - */ - readonly priority?: number; - - /** - * The font data for the caption. - */ - readonly fontData?: FontData; - - /** - * The background color of the entire row. - */ - readonly backgroundColor?: Color; - - /** - * Optional, leading prefixes right before the caption. - */ - readonly captionPrefixes?: CaptionAffix[]; - - /** - * Suffixes that might come after the caption as an additional information. - */ - readonly captionSuffixes?: CaptionAffix[]; - - /** - * Optional right-aligned decorations that appear after the node caption and after the caption suffixes (is any). - */ - readonly tailDecorations?: Array; - - /** - * Custom tooltip for the decorated item. Tooltip will be appended to the original tooltip, if any. - */ - readonly tooltip?: string; - - /** - * Sets the color of the icon. Ignored if the decorated item has no icon. - */ - readonly iconColor?: Color; - - /** - * Has not effect if given, but the tree node does not have an associated image. - */ - readonly iconOverlay?: IconOverlay | IconClassOverlay; - - /** - * An array of ranges to highlight the caption. - */ - readonly highlight?: CaptionHighlight; - - } - - export namespace Data { - - /** - * Compares the decoration data based on the priority. Lowest priorities come first. - */ - export const comparePriority = (left: Data, right: Data): number => (left.priority || 0) - (right.priority || 0); - - } - + readonly decorationData: TreeDecoration.Data; +} +export namespace DecoratedTreeNode { /** - * Tree node that can be decorated explicitly, without the tree decorators. + * Type-guard for decorated tree nodes. */ - export interface DecoratedTreeNode extends TreeNode { - - /** - * The additional tree decoration data attached to the tree node itself. - */ - readonly decorationData: Data; - - } - - export namespace DecoratedTreeNode { - - /** - * Type-guard for decorated tree nodes. - */ - export function is(node: TreeNode | undefined): node is DecoratedTreeNode { - return !!node && 'decorationData' in node; - } - + export function is(node: TreeNode | undefined): node is DecoratedTreeNode { + return !!node && 'decorationData' in node; } - } diff --git a/packages/core/src/browser/tree/tree-widget.tsx b/packages/core/src/browser/tree/tree-widget.tsx index 9b910536d60ed..ad718dfcec1d5 100644 --- a/packages/core/src/browser/tree/tree-widget.tsx +++ b/packages/core/src/browser/tree/tree-widget.tsx @@ -25,7 +25,7 @@ import { TreeNode, CompositeTreeNode } from './tree'; import { TreeModel } from './tree-model'; import { ExpandableTreeNode } from './tree-expansion'; import { SelectableTreeNode, TreeSelection } from './tree-selection'; -import { TreeDecoration, TreeDecoratorService } from './tree-decorator'; +import { TreeDecoratorService, TreeDecoration, DecoratedTreeNode } from './tree-decorator'; import { notEmpty } from '../../common/objects'; import { isOSX } from '../../common/os'; import { ReactWidget } from '../widgets/react-widget'; @@ -693,7 +693,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget { protected getDecorations(node: TreeNode): TreeDecoration.Data[] { const decorations: TreeDecoration.Data[] = []; - if (TreeDecoration.DecoratedTreeNode.is(node)) { + if (DecoratedTreeNode.is(node)) { decorations.push(node.decorationData); } if (this.decorations.has(node.id)) { diff --git a/packages/core/src/browser/widget-decoration.ts b/packages/core/src/browser/widget-decoration.ts new file mode 100644 index 0000000000000..ce0596a0adfaa --- /dev/null +++ b/packages/core/src/browser/widget-decoration.ts @@ -0,0 +1,334 @@ +/******************************************************************************** + * Copyright (C) 2019 Ericsson and others. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +/** + * Namespace for the decoration data and the styling refinements for the decorated widgets. + */ +export namespace WidgetDecoration { + + /** + * CSS styles for the decorators. + */ + export namespace Styles { + export const CAPTION_HIGHLIGHT_CLASS = 'theia-caption-highlight'; + export const CAPTION_PREFIX_CLASS = 'theia-caption-prefix'; + export const CAPTION_SUFFIX_CLASS = 'theia-caption-suffix'; + export const ICON_WRAPPER_CLASS = 'theia-icon-wrapper'; + export const DECORATOR_SIZE_CLASS = 'theia-decorator-size'; + export const TOP_RIGHT_CLASS = 'theia-top-right'; + export const BOTTOM_RIGHT_CLASS = 'theia-bottom-right'; + export const BOTTOM_LEFT_CLASS = 'theia-bottom-left'; + export const TOP_LEFT_CLASS = 'theia-top-left'; + } + /** + * For the sake of simplicity, we have merged the `font-style`, `font-weight`, and the `text-decoration` together. + */ + export type FontStyle = 'normal' | 'bold' | 'italic' | 'oblique' | 'underline' | 'line-through'; + /** + * A string that could be: + * + * - one of the browser colors, (E.g.: `blue`, `red`, `magenta`), + * - the case insensitive hexadecimal color code, (for instance, `#ee82ee`, `#20B2AA`, `#f09` ), or + * - either the `rgb()` or the `rgba()` functions. + * + * For more details, see: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value. + * + * Note, it is highly recommended to use one of the predefined colors of Theia, so the desired color will + * look nice with both the `light` and the `dark` theme too. + */ + export type Color = string; + /** + * Encapsulates styling information of the font. + */ + export interface FontData { + /** + * Zero to any font style. + */ + readonly style?: FontStyle | FontStyle[]; + /** + * The color of the font. + */ + readonly color?: Color; + } + /** + * Arbitrary information that has to be shown either before or after the caption as a prefix or a suffix. + */ + export interface CaptionAffix { + /** + * The text content of the prefix or the suffix. + */ + readonly data: string; + /** + * Font data for customizing the prefix of the suffix. + */ + readonly fontData?: FontData; + } + export interface BaseTailDecoration { + /** + * Optional tooltip for the tail decoration. + */ + readonly tooltip?: string; + } + /** + * Unlike caption suffixes, tail decorations appears right-aligned after the caption and the caption suffixes (is any). + */ + export interface TailDecoration extends BaseTailDecoration { + /** + * The text content of the tail decoration. + */ + readonly data: string; + /** + * Font data for customizing the content. + */ + readonly fontData?: FontData; + } + export interface TailDecorationIcon extends BaseTailDecoration { + /** + * This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`. + * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. + */ + readonly icon: string; + /** + * The color of the icon. + */ + readonly color?: Color; + } + export interface TailDecorationIconClass extends BaseTailDecoration { + /** + * This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw'] + * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. + */ + readonly iconClass: string[]; + /** + * The color of the icon. + */ + readonly color?: Color; + } + /** + * Enumeration for the quadrant to overlay the image on. + */ + export enum IconOverlayPosition { + /** + * Overlays the top right quarter of the original image. + */ + TOP_RIGHT, + /** + * Overlays the bottom right of the original image. + */ + BOTTOM_RIGHT, + /** + * Overlays the bottom left segment of the original image. + */ + BOTTOM_LEFT, + /** + * Occupies the top left quarter of the original icon. + */ + TOP_LEFT + } + export namespace IconOverlayPosition { + /** + * Returns with the CSS class style for the enum. + */ + export function getStyle(position: IconOverlayPosition): string { + switch (position) { + case IconOverlayPosition.TOP_RIGHT: return WidgetDecoration.Styles.TOP_RIGHT_CLASS; + case IconOverlayPosition.BOTTOM_RIGHT: return WidgetDecoration.Styles.BOTTOM_RIGHT_CLASS; + case IconOverlayPosition.BOTTOM_LEFT: return WidgetDecoration.Styles.BOTTOM_LEFT_CLASS; + case IconOverlayPosition.TOP_LEFT: return WidgetDecoration.Styles.TOP_LEFT_CLASS; + } + } + } + /** + * A shape that can be optionally rendered behind the overlay icon. Can be used to further refine colors. + */ + export interface IconOverlayBackground { + /** + * Either `circle` or `square`. + */ + readonly shape: 'circle' | 'square'; + /** + * The color of the background shape. + */ + readonly color?: Color; + } + /** + * Has not effect if the widget being decorated has no associated icon. + */ + export interface BaseOverlay { + /** + * The position where the decoration will be placed on the top of the original icon. + */ + readonly position: IconOverlayPosition; + /** + * The color of the overlaying icon. If not specified, then the default icon color will be used. + */ + readonly color?: Color; + /** + * The optional background color of the overlay icon. + */ + readonly background?: IconOverlayBackground; + } + export interface IconOverlay extends BaseOverlay { + /** + * This should be the name of the Font Awesome icon with out the `fa fa-` prefix, just the name, for instance `paw`. + * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. + */ + readonly icon: string; + } + export interface IconClassOverlay extends BaseOverlay { + /** + * This should be the entire Font Awesome class array, for instance ['fa', 'fa-paw'] + * For the existing icons, see here: https://fontawesome.com/v4.7.0/icons/. + */ + readonly iconClass: string[]; + } + /** + * The caption highlighting with the highlighted ranges and an optional background color. + */ + export interface CaptionHighlight { + /** + * The ranges to highlight in the caption. + */ + readonly ranges: CaptionHighlight.Range[]; + /** + * The optional color of the text data that is being highlighted. Falls back to the default `mark` color values defined under a widget segment class. + */ + readonly color?: Color; + /** + * The optional background color of the text data that is being highlighted. + */ + readonly backgroundColor?: Color; + } + export namespace CaptionHighlight { + /** + * A pair of offset and length that has to be highlighted as a range. + */ + export interface Range { + /** + * Zero based offset of the highlighted region. + */ + readonly offset: number; + /** + * The length of the highlighted region. + */ + readonly length: number; + } + export namespace Range { + /** + * `true` if the `arg` is contained in the range. The ranges are closed ranges, hence the check is inclusive. + */ + export function contains(arg: number, range: Range): boolean { + return arg >= range.offset && arg <= (range.offset + range.length); + } + } + /** + * The result of a caption splitting based on the highlighting information. + */ + export interface Fragment { + /** + * The text data of the fragment. + */ + readonly data: string; + /** + * Has to be highlighted if defined. + */ + readonly highligh?: true; + } + /** + * Splits the `caption` argument based on the ranges from the `highlight` argument. + */ + export function split(caption: string, highlight: CaptionHighlight): Fragment[] { + const result: Fragment[] = []; + const ranges = highlight.ranges.slice(); + const containerOf = (index: number) => ranges.findIndex(range => Range.contains(index, range)); + let data = ''; + for (let i = 0; i < caption.length; i++) { + const containerIndex = containerOf(i); + if (containerIndex === -1) { + data += caption[i]; + } else { + if (data.length > 0) { + result.push({ data }); + } + const { length } = ranges.splice(containerIndex, 1).shift()!; + result.push({ data: caption.substr(i, length), highligh: true }); + data = ''; + i = i + length - 1; + } + } + if (data.length > 0) { + result.push({ data }); + } + if (ranges.length !== 0) { + throw new Error('Error occurred when splitting the caption. There was a mismatch between the caption and the corresponding highlighting ranges.'); + } + return result; + } + } + /** + * Encapsulates styling information that has to be applied on the widget which we decorate. + */ + export interface Data { + /** + * The higher number has higher priority. If not specified, treated as `0`. + * When multiple decorators are available for the same item, and decoration data cannot be merged together, + * then the higher priority item will be applied on the decorated element and the lower priority will be ignored. + */ + readonly priority?: number; + /** + * The font data for the caption. + */ + readonly fontData?: FontData; + /** + * The background color of the entire row. + */ + readonly backgroundColor?: Color; + /** + * Optional, leading prefixes right before the caption. + */ + readonly captionPrefixes?: CaptionAffix[]; + /** + * Suffixes that might come after the caption as an additional information. + */ + readonly captionSuffixes?: CaptionAffix[]; + /** + * Optional right-aligned decorations that appear after the widget caption and after the caption suffixes (is any). + */ + readonly tailDecorations?: Array; + /** + * Custom tooltip for the decorated item. Tooltip will be appended to the original tooltip, if any. + */ + readonly tooltip?: string; + /** + * Sets the color of the icon. Ignored if the decorated item has no icon. + */ + readonly iconColor?: Color; + /** + * Has not effect if given, but the widget does not have an associated image. + */ + readonly iconOverlay?: IconOverlay | IconClassOverlay; + /** + * An array of ranges to highlight the caption. + */ + readonly highlight?: CaptionHighlight; + } + export namespace Data { + /** + * Compares the decoration data based on the priority. Lowest priorities come first. + */ + export const comparePriority = (left: Data, right: Data): number => (left.priority || 0) - (right.priority || 0); + } +} diff --git a/packages/markers/src/browser/problem/problem-frontend-module.ts b/packages/markers/src/browser/problem/problem-frontend-module.ts index 2ea2fc416c8d9..2b09b201f8ff6 100644 --- a/packages/markers/src/browser/problem/problem-frontend-module.ts +++ b/packages/markers/src/browser/problem/problem-frontend-module.ts @@ -23,8 +23,9 @@ import { ProblemManager } from './problem-manager'; import { WidgetFactory } from '@theia/core/lib/browser/widget-manager'; import { NavigatorTreeDecorator } from '@theia/navigator/lib/browser/navigator-decorator-service'; import { ProblemDecorator } from './problem-decorator'; +import { ProblemTabBarDecorator } from './problem-tabbar-decorator'; import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar'; - +import { TabBarDecorator } from '@theia/core/lib/browser/shell/tab-bar-decorator'; import '../../../src/browser/style/index.css'; export default new ContainerModule(bind => { @@ -44,4 +45,6 @@ export default new ContainerModule(bind => { bind(ProblemDecorator).toSelf().inSingletonScope(); bind(NavigatorTreeDecorator).toService(ProblemDecorator); + bind(ProblemTabBarDecorator).toSelf().inSingletonScope(); + bind(TabBarDecorator).toService(ProblemTabBarDecorator); }); diff --git a/packages/markers/src/browser/problem/problem-tabbar-decorator.ts b/packages/markers/src/browser/problem/problem-tabbar-decorator.ts new file mode 100644 index 0000000000000..a2c65c7845394 --- /dev/null +++ b/packages/markers/src/browser/problem/problem-tabbar-decorator.ts @@ -0,0 +1,168 @@ +/******************************************************************************** + * Copyright (C) 2019 Ericsson and others. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * This Source Code may also be made available under the following Secondary + * Licenses when the conditions for such availability set forth in the Eclipse + * Public License v. 2.0 are satisfied: GNU General Public License, version 2 + * with the GNU Classpath Exception which is available at + * https://www.gnu.org/software/classpath/license.html. + * + * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 + ********************************************************************************/ + +import { inject, injectable, postConstruct } from 'inversify'; +import { Diagnostic, DiagnosticSeverity } from 'vscode-languageserver-types'; +import URI from '@theia/core/lib/common/uri'; +import { notEmpty } from '@theia/core/lib/common/objects'; +import { Event, Emitter } from '@theia/core/lib/common/event'; +import { Title, Widget } from '@phosphor/widgets'; +import { WidgetDecoration } from '@theia/core/lib/browser/widget-decoration'; +import { TabBarDecorator } from '@theia/core/lib/browser/shell/tab-bar-decorator'; +import { Marker } from '../../common/marker'; +import { ProblemManager } from './problem-manager'; +import { WorkspaceService } from '@theia/workspace/lib/browser'; + +@injectable() +export class ProblemTabBarDecorator implements TabBarDecorator { + readonly id = 'theia-problem-tabbar-decorator'; + protected emitter: Emitter; + @inject(ProblemManager) + protected readonly problemManager: ProblemManager; + @inject(WorkspaceService) + protected readonly workspaceService: WorkspaceService; + @postConstruct() + protected init(): void { + this.emitter = new Emitter(); + this.problemManager.onDidChangeMarkers(() => this.fireDidChangeDecorations()); + } + decorate(titles: Title[]): Map { + return this.collectDecorators(titles); + } + get onDidChangeDecorations(): Event { + return this.emitter.event; + } + protected fireDidChangeDecorations(): void { + this.emitter.fire(undefined); + } + /** + * Collect decorators for the tabs. + * @returns {Map} A map from the tab URI to the tab decoration data. + */ + protected collectDecorators(titles: Title[]): Map { + const result: Map> = new Map(); + const markers = this.groupMarkersByURI(this.collectMarkers()); + for (const title of titles) { + // Ensure the title.caption does not contain illegal characters for URI. + try { + const fileUri: URI = new URI(title.caption); + const marker = markers.get(fileUri.withScheme('file').toString()); + if (marker) { + result.set(title.caption, marker); + } + } catch (e) { + } + } + const urlDecoratorMap = new Map(Array.from(result.entries()) + .map(entry => [entry[0], this.toDecorator(entry[1])] as [string, WidgetDecoration.Data])); + return urlDecoratorMap; + } + /** + * Group markers by the URI of the editor they decorate. + * @param {Marker[]} markers - all diagnostic markers collected. + * @returns {Map>} A map from URI of the editor to its diagnostic markers. + */ + protected groupMarkersByURI(markers: Marker[]): Map> { + const result: Map> = new Map(); + for (const [uri, marker] of new Map(markers.map(m => [new URI(m.uri), m] as [URI, Marker])).entries()) { + const uriString = uri.toString(); + result.set(uriString, marker); + } + return result; + } + /** + * Collect all diagnostic markers from the problem manager. + * @returns {Marker[]} An array of diagnostic markers. + */ + protected collectMarkers(): Marker[] { + return Array.from(this.problemManager.getUris()) + .map(str => new URI(str)) + .map(uri => this.problemManager.findMarkers({ uri })) + .map(markers => markers.sort(this.compare.bind(this)).shift()) + .filter(notEmpty) + .filter(this.filterMarker.bind(this)); + } + /** + * Convert a diagnostic marker to a decorator. + * @param {Marker} marker - a diagnostic marker. + * @returns {WidgetDecoration.Data} The decoration data. + */ + protected toDecorator(marker: Marker): WidgetDecoration.Data { + const position = WidgetDecoration.IconOverlayPosition.BOTTOM_RIGHT; + const icon = this.getOverlayIcon(marker); + const color = this.getOverlayIconColor(marker); + return { + iconOverlay: { + position, + icon, + color, + background: { + shape: 'circle', + color: 'var(--theia-layout-color0)' + } + } + }; + } + /** + * Get the appropriate overlay icon for decoration. + * @param {Marker} marker - a diagnostic marker. + * @returns {string} A string representing the overlay icon class. + */ + protected getOverlayIcon(marker: Marker): string { + const { severity } = marker.data; + switch (severity) { + case 1: return 'times-circle'; + case 2: return 'exclamation-circle'; + case 3: return 'info-circle'; + default: return 'hand-o-up'; + } + } + /** + * Get the appropriate overlay icon color for decoration. + * @param {Marker} marker - a diagnostic marker. + * @returns {WidgetDecoration.Color} The decoration color. + */ + protected getOverlayIconColor(marker: Marker): WidgetDecoration.Color { + const { severity } = marker.data; + switch (severity) { + case 1: return 'var(--theia-error-color0)'; + case 2: return 'var(--theia-warn-color0)'; + case 3: return 'var(--theia-info-color0)'; + default: return 'var(--theia-success-color0)'; + } + } + /** + * Filter the diagnostic marker by its severity. + * @param {Marker} marker - a diagnostic marker. + * @returns {boolean} Whether the diagnostic marker is of `Error`, `Warning`, or `Information` severity. + */ + protected filterMarker(marker: Marker): boolean { + const { severity } = marker.data; + return severity === DiagnosticSeverity.Error + || severity === DiagnosticSeverity.Warning + || severity === DiagnosticSeverity.Information; + } + + /** + * Compare the severity of two diagnostic markers. + * @param {Marker} left - a diagnostic marker to be compared. + * @param {Marker} right - a diagnostic marker to be compared. + * @returns {number} Number indicating which marker takes priority (`left` if negative, `right` if positive). + */ + protected compare(left: Marker, right: Marker): number { + return (left.data.severity || Number.MAX_SAFE_INTEGER) - (right.data.severity || Number.MAX_SAFE_INTEGER); + } +} diff --git a/packages/typehierarchy/src/browser/tree/typehierarchy-tree.ts b/packages/typehierarchy/src/browser/tree/typehierarchy-tree.ts index 11c2ac019ea63..25f8fe6f52bb9 100644 --- a/packages/typehierarchy/src/browser/tree/typehierarchy-tree.ts +++ b/packages/typehierarchy/src/browser/tree/typehierarchy-tree.ts @@ -18,7 +18,7 @@ import { injectable } from 'inversify'; import { v4 } from 'uuid'; import URI from '@theia/core/lib/common/uri'; import { Location } from '@theia/editor/lib/browser/editor'; -import { TreeDecoration } from '@theia/core/lib/browser/tree/tree-decorator'; +import { TreeDecoration, DecoratedTreeNode } from '@theia/core/lib/browser/tree/tree-decorator'; import { TreeImpl, TreeNode, CompositeTreeNode, ExpandableTreeNode, SelectableTreeNode } from '@theia/core/lib/browser/tree'; import { TypeHierarchyItem } from '@theia/languages/lib/browser/typehierarchy/typehierarchy-protocol'; import { TypeHierarchyDirection, ResolveTypeHierarchyItemParams } from '@theia/languages/lib/browser/typehierarchy/typehierarchy-protocol'; @@ -113,7 +113,7 @@ export namespace TypeHierarchyTree { } - export interface Node extends CompositeTreeNode, ExpandableTreeNode, SelectableTreeNode, TreeDecoration.DecoratedTreeNode { + export interface Node extends CompositeTreeNode, ExpandableTreeNode, SelectableTreeNode, DecoratedTreeNode { readonly item: TypeHierarchyItem; resolved: boolean; }