add rendering for document symbol detail, #34968

microsoft · Jun 13, 2018 · f7bdfb5 · f7bdfb5
1 parent fc9dab9
commit f7bdfb5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/vs/workbench/parts/outline/electron-browser/outlinePanel.css b/src/vs/workbench/parts/outline/electron-browser/outlinePanel.css
@@ -97,6 +97,22 @@
  font-weight: bold;
 }
 
+.monaco-workbench .outline-panel .outline-element .outline-element-detail {
+ visibility: hidden;
+ flex: 1;
+ flex-basis: 10%;
+ opacity: 0.8;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 90%;
+ padding-left: 4px;
+ padding-top: 3px;
+}
+
+.monaco-workbench .outline-panel .monaco-tree-row.focused .outline-element .outline-element-detail {
+ visibility: inherit;
+}
+
 .monaco-workbench .outline-panel .outline-element .outline-element-decoration {
  opacity: 0.75;
  font-size: 90%;

diff --git a/src/vs/workbench/parts/outline/electron-browser/outlineTree.ts b/src/vs/workbench/parts/outline/electron-browser/outlineTree.ts
@@ -120,6 +120,7 @@ export interface OutlineTemplate {
  labelContainer: HTMLElement;
  label: HighlightedLabel;
  icon?: HTMLElement;
+ detail?: HTMLElement;
  decoration?: HTMLElement;
 }
 
@@ -147,10 +148,11 @@ export class OutlineRenderer implements IRenderer {
  if (templateId === 'outline-element') {
  const icon = dom.$('.outline-element-icon symbol-icon');
  const labelContainer = dom.$('.outline-element-label');
+ const detail = dom.$('.outline-element-detail');
  const decoration = dom.$('.outline-element-decoration');
  dom.addClass(container, 'outline-element');
- dom.append(container, icon, labelContainer, decoration);
- return { icon, labelContainer, label: new HighlightedLabel(labelContainer), decoration };
+ dom.append(container, icon, labelContainer, detail, decoration);
+ return { icon, labelContainer, label: new HighlightedLabel(labelContainer), detail, decoration };
  }
  if (templateId === 'outline-group') {
  const labelContainer = dom.$('.outline-element-label');
@@ -166,6 +168,7 @@ export class OutlineRenderer implements IRenderer {
  if (element instanceof OutlineElement) {
  template.icon.className = `outline-element-icon symbol-icon ${symbolKindToCssClass(element.symbol.kind)}`;
  template.label.set(element.symbol.name, element.score ? createMatches(element.score[1]) : undefined);
+ template.detail.innerText = element.symbol.detail || '';
  this._renderMarkerInfo(element, template);
 
  }