list: use styles

src/vs/base/browser/ui/list/list.css

@@ -61,4 +61,25 @@
 	border-radius: 10px;
 	font-size: 12px;
 	position: absolute;
+}
+
+/* Type filter */
+.monaco-list-type-filter {
+	position: absolute;
+	right: 5px;
+	top: 4px;
+	border-radius: 2px;
+	border-width: 1px;
+	border-style: solid;
+	padding: 0px 3px;
+	max-width: calc(100% - 10px);
+	text-overflow: ellipsis;
+	overflow: hidden;
+	text-align: right;
+	box-sizing: border-box;
+	direction: rtl;
+}
+
+.monaco-list-type-filter:empty {
+	display: none;
 }
\ No newline at end of file

src/vs/base/browser/ui/list/listWidget.ts

@@ -720,6 +720,14 @@ export class DefaultStyleController implements IStyleController {
 			`);
 		}
 
+		if (styles.listMatchesBackground) {
+			content.push(`.monaco-list-type-filter { background-color: ${styles.listMatchesBackground} }`);
+		}
+
+		if (styles.listMatchesOutline) {
+			content.push(`.monaco-list-type-filter { border-color: ${styles.listMatchesOutline} }`);
+		}
+
 		const newStyles = content.join('\n');
 		if (newStyles !== this.styleElement.innerHTML) {
 			this.styleElement.innerHTML = newStyles;
@@ -764,6 +772,8 @@ export interface IListStyles {
 	listInactiveFocusOutline?: Color;
 	listSelectionOutline?: Color;
 	listHoverOutline?: Color;
+	listMatchesBackground?: Color;
+	listMatchesOutline?: Color;
 }
 
 const defaultStyles: IListStyles = {

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -339,7 +339,7 @@ class TypeFilterController<T, TFilterData> implements IDisposable {
 		keyboardNavigationLabelProvider: IKeyboardNavigationLabelProvider<T>
 	) {
 		const container = view.getHTMLElement();
-		this.domNode = append(container, $('.monaco-tl-type-filter'));
+		this.domNode = append(container, $('.monaco-list-type-filter'));
 
 		const isPrintableCharEvent = keyboardNavigationLabelProvider.mightProducePrintableCharacter ? (e: IKeyboardEvent) => keyboardNavigationLabelProvider.mightProducePrintableCharacter!(e) : (e: IKeyboardEvent) => mightProducePrintableCharacter(e);
 		const onInput = Event.chain(domEvent(container, 'keydown'))

src/vs/base/browser/ui/tree/media/tree.css

@@ -65,18 +65,4 @@
 
 .hc-black .monaco-tl-twistie.loading {
 	background-image: url("loading-hc.svg");
-}
-
-.monaco-tl-type-filter {
-	position: absolute;
-	right: 5px;
-	top: 4px;
-	border-radius: 2px;
-	background: #0947718a; /* TODO@joao: theme */
-	border: 1px solid #8080808a;
-	padding: 0px 3px;
-}
-
-.monaco-tl-type-filter:empty {
-	display: none;
 }
\ No newline at end of file

src/vs/platform/theme/common/styler.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
-import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground } from 'vs/platform/theme/common/colorRegistry';
+import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, editorWidgetBorder, inputValidationInfoForeground, inputValidationWarningForeground, inputValidationErrorForeground, menuForeground, menuBackground, menuSelectionForeground, menuSelectionBackground, menuSelectionBorder, menuBorder, menuSeparatorBackground, editorFindMatchHighlight, editorFindMatchHighlightBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
@@ -223,6 +223,8 @@ export interface IListStyleOverrides extends IStyleOverrides {
 	listInactiveFocusOutline?: ColorIdentifier;
 	listSelectionOutline?: ColorIdentifier;
 	listHoverOutline?: ColorIdentifier;
+	listMatchesBackground?: ColorIdentifier;
+	listMatchesOutline?: ColorIdentifier;
 }
 
 export function attachListStyler(widget: IThemable, themeService: IThemeService, overrides?: IListStyleOverrides): IDisposable {
@@ -244,7 +246,9 @@ export const defaultListStyles: IColorMapping = {
 	listDropBackground: listDropBackground,
 	listFocusOutline: activeContrastBorder,
 	listSelectionOutline: activeContrastBorder,
-	listHoverOutline: activeContrastBorder
+	listHoverOutline: activeContrastBorder,
+	listMatchesBackground: editorFindMatchHighlight,
+	listMatchesOutline: editorFindMatchHighlightBorder
 };
 
 export interface IButtonStyleOverrides extends IStyleOverrides {