diff --git a/src/vs/workbench/parts/search/browser/media/searchviewlet.css b/src/vs/workbench/parts/search/browser/media/searchviewlet.css index d866df8c8091d..fd40457833c72 100644 --- a/src/vs/workbench/parts/search/browser/media/searchviewlet.css +++ b/src/vs/workbench/parts/search/browser/media/searchviewlet.css @@ -3,12 +3,16 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.search-viewlet .search-widgets-container { +.vs .panel .search-view .monaco-inputbox { + border: 1px solid #ddd; +} + +.search-view .search-widgets-container { margin: 0px 9px 0 2px; padding-top: 6px; } -.search-viewlet .search-widget .toggle-replace-button { +.search-view .search-widget .toggle-replace-button { position: absolute; top: 0; left: 0; @@ -26,42 +30,42 @@ cursor: pointer; } -.search-viewlet .search-widget .search-container, -.search-viewlet .search-widget .replace-container { +.search-view .search-widget .search-container, +.search-view .search-widget .replace-container { margin-left: 17px; } -.search-viewlet .search-widget .input-box, -.search-viewlet .search-widget .input-box .monaco-inputbox { +.search-view .search-widget .input-box, +.search-view .search-widget .input-box .monaco-inputbox { height: 25px; } -.search-viewlet .search-widget .monaco-findInput { +.search-view .search-widget .monaco-findInput { display: inline-block; vertical-align: middle; } -.search-viewlet .search-widget .replace-container { +.search-view .search-widget .replace-container { margin-top: 6px; position: relative; display: inline-flex; } -.search-viewlet .search-widget .replace-container.disabled { +.search-view .search-widget .replace-container.disabled { display: none; } -.search-viewlet .search-widget .replace-container .monaco-action-bar { +.search-view .search-widget .replace-container .monaco-action-bar { margin-left: 3px; } -.search-viewlet .search-widget .replace-container .monaco-action-bar .action-item .icon { +.search-view .search-widget .replace-container .monaco-action-bar .action-item .icon { background-repeat: no-repeat; width: 20px; height: 25px; } -.search-viewlet .query-clear { +.search-view .query-clear { width: 20px; height: 20px; position: absolute; @@ -70,13 +74,13 @@ cursor: pointer; } -.search-viewlet .query-details { +.search-view .query-details { min-height: 1em; position: relative; margin: 0 0 0 17px; } -.search-viewlet .query-details .more { +.search-view .query-details .more { position: absolute; margin-right: 0.3em; right: 0; @@ -86,38 +90,38 @@ z-index: 2; /* Force it above the search results message, which has a negative top margin */ } -.hc-black .monaco-workbench .search-viewlet .query-details .more, -.vs-dark .monaco-workbench .search-viewlet .query-details .more { +.hc-black .monaco-workbench .search-view .query-details .more, +.vs-dark .monaco-workbench .search-view .query-details .more { background: url('ellipsis-inverse.svg') top center no-repeat; } -.vs .monaco-workbench .search-viewlet .query-details .more { +.vs .monaco-workbench .search-view .query-details .more { background: url('ellipsis.svg') top center no-repeat; } -.search-viewlet .query-details .file-types { +.search-view .query-details .file-types { display: none; } -.search-viewlet .query-details .file-types > .monaco-inputbox { +.search-view .query-details .file-types > .monaco-inputbox { width: 100%; height: 25px; } -.search-viewlet .query-details.more .file-types { +.search-view .query-details.more .file-types { display: inherit; } -.search-viewlet .query-details.more .file-types:last-child { +.search-view .query-details.more .file-types:last-child { padding-bottom: 10px; } -.search-viewlet .query-details .search-pattern-info { +.search-view .query-details .search-pattern-info { width: 16px; height: 16px; } -.search-viewlet .query-details .search-configure-exclusions { +.search-view .query-details .search-configure-exclusions { width: 16px; height: 16px; } @@ -137,7 +141,7 @@ opacity: 0.7; } -.search-viewlet .query-details.more h4 { +.search-view .query-details.more h4 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -147,18 +151,18 @@ font-weight: normal; } -.search-viewlet .messages { +.search-view .messages { margin-top: -5px; cursor: default; } -.search-viewlet .message { +.search-view .message { padding-left: 22px; padding-right: 22px; padding-top: 0px; } -.search-viewlet .message p:first-child { +.search-view .message p:first-child { margin-top: 0px; margin-bottom: 0px; padding-bottom: 4px; @@ -166,72 +170,72 @@ user-select: text; } -.search-viewlet > .results > .monaco-tree .sub-content { +.search-view > .results > .monaco-tree .sub-content { overflow: hidden; } -.search-viewlet .foldermatch, -.search-viewlet .filematch { +.search-view .foldermatch, +.search-view .filematch { display: flex; position: relative; line-height: 22px; padding: 0; } -.search-viewlet .foldermatch .monaco-icon-label, -.search-viewlet .filematch .monaco-icon-label { +.search-view .foldermatch .monaco-icon-label, +.search-view .filematch .monaco-icon-label { flex: 1; } -.search-viewlet .foldermatch .directory, -.search-viewlet .filematch .directory { +.search-view .foldermatch .directory, +.search-view .filematch .directory { opacity: 0.7; font-size: 0.9em; margin-left: 0.8em; } -.search-viewlet .linematch { +.search-view .linematch { position: relative; line-height: 22px; display: flex; } -.search-viewlet .linematch > .match { +.search-view .linematch > .match { flex: 1; overflow: hidden; text-overflow: ellipsis; } -.search-viewlet .linematch.changedOrRemoved { +.search-view .linematch.changedOrRemoved { font-style: italic; } -.search-viewlet .query-clear { +.search-view .query-clear { background: url("action-query-clear.svg") center center no-repeat; } -.search-viewlet .monaco-tree .monaco-tree-row .monaco-action-bar { +.search-view .monaco-tree .monaco-tree-row .monaco-action-bar { line-height: 1em; display: none; padding: 0 0.8em 0 0.4em; } -.search-viewlet .monaco-tree .monaco-tree-row .monaco-action-bar .action-item { +.search-view .monaco-tree .monaco-tree-row .monaco-action-bar .action-item { margin: 0; } -.search-viewlet .monaco-tree .monaco-tree-row.focused .monaco-action-bar { +.search-view .monaco-tree .monaco-tree-row.focused .monaco-action-bar { width: 0; /* in order to support a11y with keyboard, we use width: 0 to hide the actions, which still allows to "Tab" into the actions */ display: block; } -.search-viewlet .monaco-tree .monaco-tree-row:hover:not(.highlighted) .monaco-action-bar, -.search-viewlet .monaco-tree .monaco-tree-row.focused .monaco-action-bar { +.search-view .monaco-tree .monaco-tree-row:hover:not(.highlighted) .monaco-action-bar, +.search-view .monaco-tree .monaco-tree-row.focused .monaco-action-bar { width: inherit; display: block; } -.search-viewlet .monaco-tree .monaco-tree-row .monaco-action-bar .action-label { +.search-view .monaco-tree .monaco-tree-row .monaco-action-bar .action-label { margin-right: 0.2em; margin-top: 4px; background-repeat: no-repeat; @@ -239,47 +243,47 @@ height: 16px; } -.search-viewlet .action-remove { +.search-view .action-remove { background: url("action-remove.svg") center center no-repeat; } -.search-viewlet .action-replace { +.search-view .action-replace { background-image: url('replace.svg'); } -.search-viewlet .action-replace-all { +.search-view .action-replace-all { background: url('replace-all.svg') center center no-repeat; } -.hc-black .search-viewlet .action-replace, -.vs-dark .search-viewlet .action-replace { +.hc-black .search-view .action-replace, +.vs-dark .search-view .action-replace { background-image: url('replace-inverse.svg'); } -.hc-black .search-viewlet .action-replace-all, -.vs-dark .search-viewlet .action-replace-all { +.hc-black .search-view .action-replace-all, +.vs-dark .search-view .action-replace-all { background: url('replace-all-inverse.svg') center center no-repeat; } -.search-viewlet .label { +.search-view .label { font-style: italic; } -.search-viewlet .monaco-count-badge { +.search-view .monaco-count-badge { margin-right: 12px; } -.search-viewlet > .results > .monaco-tree .monaco-tree-row:hover .content .filematch .monaco-count-badge, -.search-viewlet > .results > .monaco-tree .monaco-tree-row:hover .content .foldermatch .monaco-count-badge, -.search-viewlet > .results > .monaco-tree .monaco-tree-row:hover .content .linematch .monaco-count-badge, -.search-viewlet > .results > .monaco-tree.focused .monaco-tree-row.focused .content .filematch .monaco-count-badge, -.search-viewlet > .results > .monaco-tree.focused .monaco-tree-row.focused .content .foldermatch .monaco-count-badge, -.search-viewlet > .results > .monaco-tree.focused .monaco-tree-row.focused .content .linematch .monaco-count-badge { +.search-view > .results > .monaco-tree .monaco-tree-row:hover .content .filematch .monaco-count-badge, +.search-view > .results > .monaco-tree .monaco-tree-row:hover .content .foldermatch .monaco-count-badge, +.search-view > .results > .monaco-tree .monaco-tree-row:hover .content .linematch .monaco-count-badge, +.search-view > .results > .monaco-tree.focused .monaco-tree-row.focused .content .filematch .monaco-count-badge, +.search-view > .results > .monaco-tree.focused .monaco-tree-row.focused .content .foldermatch .monaco-count-badge, +.search-view > .results > .monaco-tree.focused .monaco-tree-row.focused .content .linematch .monaco-count-badge { display: none; } -.search-viewlet .focused .monaco-tree-row.selected:not(.highlighted) > .content.actions .action-remove, -.vs-dark .monaco-workbench .search-viewlet .focused .monaco-tree-row.selected:not(.highlighted) > .content.actions .action-remove { +.search-view .focused .monaco-tree-row.selected:not(.highlighted) > .content.actions .action-remove, +.vs-dark .monaco-workbench .search-view .focused .monaco-tree-row.selected:not(.highlighted) > .content.actions .action-remove { background: url("action-remove-focus.svg") center center no-repeat; } @@ -319,93 +323,93 @@ background: url('stop-inverse.svg') center center no-repeat; } -.vs .monaco-workbench .search-viewlet .query-details .file-types .controls > .custom-checkbox.pattern { +.vs .monaco-workbench .search-view .query-details .file-types .controls > .custom-checkbox.pattern { background: url('pattern.svg') center center no-repeat; } -.vs-dark .monaco-workbench .search-viewlet .query-details .file-types .controls > .custom-checkbox.pattern, -.hc-black .monaco-workbench .search-viewlet .query-details .file-types .controls > .custom-checkbox.pattern { +.vs-dark .monaco-workbench .search-view .query-details .file-types .controls > .custom-checkbox.pattern, +.hc-black .monaco-workbench .search-view .query-details .file-types .controls > .custom-checkbox.pattern { background: url('pattern-dark.svg') center center no-repeat; } -.vs .monaco-workbench .search-viewlet .query-details .file-types .controls>.custom-checkbox.useExcludesAndIgnoreFiles { +.vs .monaco-workbench .search-view .query-details .file-types .controls>.custom-checkbox.useExcludesAndIgnoreFiles { background: url('excludeSettings.svg') center center no-repeat; } -.vs-dark .monaco-workbench .search-viewlet .query-details .file-types .controls>.custom-checkbox.useExcludesAndIgnoreFiles, -.hc-black .monaco-workbench .search-viewlet .query-details .file-types .controls>.custom-checkbox.useExcludesAndIgnoreFiles { +.vs-dark .monaco-workbench .search-view .query-details .file-types .controls>.custom-checkbox.useExcludesAndIgnoreFiles, +.hc-black .monaco-workbench .search-view .query-details .file-types .controls>.custom-checkbox.useExcludesAndIgnoreFiles { background: url('excludeSettings-dark.svg') center center no-repeat; } -.search-viewlet .replace.findInFileMatch { +.search-view .replace.findInFileMatch { text-decoration: line-through; } -.search-viewlet .findInFileMatch, -.search-viewlet .replaceMatch { +.search-view .findInFileMatch, +.search-view .replaceMatch { white-space: pre; } -.hc-black .monaco-workbench .search-viewlet .replaceMatch, -.hc-black .monaco-workbench .search-viewlet .findInFileMatch { +.hc-black .monaco-workbench .search-view .replaceMatch, +.hc-black .monaco-workbench .search-view .findInFileMatch { background: none !important; box-sizing: border-box; } -.monaco-workbench .search-viewlet a.prominent { +.monaco-workbench .search-view a.prominent { text-decoration: underline; } /* Theming */ -.vs .search-viewlet .search-widget .toggle-replace-button:hover { +.vs .viewlet .search-view .search-widget .toggle-replace-button:hover { background-color: rgba(0, 0, 0, 0.1) !important; } -.vs-dark .search-viewlet .search-widget .toggle-replace-button:hover { +.vs-dark .viewlet .search-view .search-widget .toggle-replace-button:hover { background-color: rgba(255, 255, 255, 0.1) !important; } -.vs .search-viewlet .search-widget .toggle-replace-button.collapse { +.vs .search-view .search-widget .toggle-replace-button.collapse { background-image: url('expando-collapsed.svg'); } -.vs .search-viewlet .search-widget .toggle-replace-button.expand { +.vs .search-view .search-widget .toggle-replace-button.expand { background-image: url('expando-expanded.svg'); } -.vs-dark .search-viewlet .query-clear { +.vs-dark .search-view .query-clear { background: url("action-query-clear-dark.svg") center center no-repeat; } -.vs-dark .search-viewlet .action-remove, -.hc-black .search-viewlet .action-remove { +.vs-dark .search-view .action-remove, +.hc-black .search-view .action-remove { background: url("action-remove-dark.svg") center center no-repeat; } -.vs-dark .search-viewlet .message { +.vs-dark .search-view .message { opacity: .5; } -.vs-dark .search-viewlet .foldermatch, -.vs-dark .search-viewlet .filematch { +.vs-dark .search-view .foldermatch, +.vs-dark .search-view .filematch { padding: 0; } -.vs-dark .search-viewlet .search-widget .toggle-replace-button.expand, -.hc-black .search-viewlet .search-widget .toggle-replace-button.expand { +.vs-dark .search-view .search-widget .toggle-replace-button.expand, +.hc-black .search-view .search-widget .toggle-replace-button.expand { background-image: url('expando-expanded-dark.svg'); } -.vs-dark .search-viewlet .search-widget .toggle-replace-button.collapse, -.hc-black .search-viewlet .search-widget .toggle-replace-button.collapse { +.vs-dark .search-view .search-widget .toggle-replace-button.collapse, +.hc-black .search-view .search-widget .toggle-replace-button.collapse { background-image: url('expando-collapsed-dark.svg'); } /* High Contrast Theming */ -.hc-black .monaco-workbench .search-viewlet .foldermatch, -.hc-black .monaco-workbench .search-viewlet .filematch, -.hc-black .monaco-workbench .search-viewlet .linematch { +.hc-black .monaco-workbench .search-view .foldermatch, +.hc-black .monaco-workbench .search-view .filematch, +.hc-black .monaco-workbench .search-view .linematch { line-height: 20px; -} \ No newline at end of file +} diff --git a/src/vs/workbench/parts/search/browser/searchViewlet.ts b/src/vs/workbench/parts/search/browser/searchViewlet.ts index 2bdf4b6c12588..9d8fce8a97a47 100644 --- a/src/vs/workbench/parts/search/browser/searchViewlet.ts +++ b/src/vs/workbench/parts/search/browser/searchViewlet.ts @@ -159,7 +159,7 @@ export class SearchViewlet extends Viewlet { this.viewModel = this.searchWorkbenchService.searchModel; let builder: Builder; parent.div({ - 'class': 'search-viewlet' + 'class': 'search-view' }, (div) => { builder = div; }); @@ -1496,33 +1496,33 @@ export class SearchViewlet extends Viewlet { registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const matchHighlightColor = theme.getColor(editorFindMatchHighlight); if (matchHighlightColor) { - collector.addRule(`.monaco-workbench .search-viewlet .findInFileMatch { background-color: ${matchHighlightColor}; }`); + collector.addRule(`.monaco-workbench .search-view .findInFileMatch { background-color: ${matchHighlightColor}; }`); } const diffInsertedColor = theme.getColor(diffInserted); if (diffInsertedColor) { - collector.addRule(`.monaco-workbench .search-viewlet .replaceMatch { background-color: ${diffInsertedColor}; }`); + collector.addRule(`.monaco-workbench .search-view .replaceMatch { background-color: ${diffInsertedColor}; }`); } const diffRemovedColor = theme.getColor(diffRemoved); if (diffRemovedColor) { - collector.addRule(`.monaco-workbench .search-viewlet .replace.findInFileMatch { background-color: ${diffRemovedColor}; }`); + collector.addRule(`.monaco-workbench .search-view .replace.findInFileMatch { background-color: ${diffRemovedColor}; }`); } const diffInsertedOutlineColor = theme.getColor(diffInsertedOutline); if (diffInsertedOutlineColor) { - collector.addRule(`.monaco-workbench .search-viewlet .replaceMatch:not(:empty) { border: 1px dashed ${diffInsertedOutlineColor}; }`); + collector.addRule(`.monaco-workbench .search-view .replaceMatch:not(:empty) { border: 1px dashed ${diffInsertedOutlineColor}; }`); } const diffRemovedOutlineColor = theme.getColor(diffRemovedOutline); if (diffRemovedOutlineColor) { - collector.addRule(`.monaco-workbench .search-viewlet .replace.findInFileMatch { border: 1px dashed ${diffRemovedOutlineColor}; }`); + collector.addRule(`.monaco-workbench .search-view .replace.findInFileMatch { border: 1px dashed ${diffRemovedOutlineColor}; }`); } const activeContrastBorderColor = theme.getColor(activeContrastBorder); if (activeContrastBorderColor) { collector.addRule(` - .monaco-workbench .search-viewlet .findInFileMatch { border: 1px dashed ${activeContrastBorderColor}; } + .monaco-workbench .search-view .findInFileMatch { border: 1px dashed ${activeContrastBorderColor}; } `); } }); diff --git a/src/vs/workbench/parts/search/electron-browser/search.contribution.ts b/src/vs/workbench/parts/search/electron-browser/search.contribution.ts index f2c681f8adad0..c9da8ade325cb 100644 --- a/src/vs/workbench/parts/search/electron-browser/search.contribution.ts +++ b/src/vs/workbench/parts/search/electron-browser/search.contribution.ts @@ -8,7 +8,7 @@ import 'vs/css!./media/search.contribution'; import { Registry } from 'vs/platform/registry/common/platform'; import { registerSingleton } from 'vs/platform/instantiation/common/extensions'; -import { ViewletRegistry, Extensions as ViewletExtensions, ViewletDescriptor } from 'vs/workbench/browser/viewlet'; +// import { ViewletRegistry, Extensions as ViewletExtensions, ViewletDescriptor } from 'vs/workbench/browser/viewlet'; import { IConfigurationRegistry, Extensions as ConfigurationExtensions, ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry'; import nls = require('vs/nls'); import { TPromise } from 'vs/base/common/winjs.base'; @@ -52,6 +52,7 @@ import { IFileService } from 'vs/platform/files/common/files'; import { distinct } from 'vs/base/common/arrays'; import { getMultiSelectedResources } from 'vs/workbench/parts/files/browser/files'; import { Schemas } from 'vs/base/common/network'; +import { PanelRegistry, Extensions as PanelExtensions, PanelDescriptor } from 'vs/workbench/browser/panel'; registerSingleton(ISearchWorkbenchService, SearchWorkbenchService); replaceContributions(); @@ -279,7 +280,16 @@ class ShowAllSymbolsAction extends Action { } // Register Viewlet -Registry.as(ViewletExtensions.Viewlets).registerViewlet(new ViewletDescriptor( +// Registry.as(ViewletExtensions.Viewlets).registerViewlet(new ViewletDescriptor( +// SearchViewlet, +// Constants.VIEWLET_ID, +// nls.localize('name', "Search"), +// 'search', +// 10 +// )); + +// Register Viewlet +Registry.as(PanelExtensions.Panels).registerPanel(new PanelDescriptor( SearchViewlet, Constants.VIEWLET_ID, nls.localize('name', "Search"), diff --git a/test/smoke/src/areas/search/search.ts b/test/smoke/src/areas/search/search.ts index dbd995bcd723a..f2d98866b0249 100644 --- a/test/smoke/src/areas/search/search.ts +++ b/test/smoke/src/areas/search/search.ts @@ -6,7 +6,7 @@ import { SpectronApplication } from '../../spectron/application'; import { Viewlet } from '../workbench/viewlet'; -const VIEWLET = 'div[id="workbench.view.search"] .search-viewlet'; +const VIEWLET = 'div[id="workbench.view.search"] .search-view'; const INPUT = `${VIEWLET} .search-widget .search-container .monaco-inputbox input`; const INCLUDE_INPUT = `${VIEWLET} .query-details .monaco-inputbox input[aria-label="Search Include Patterns"]`; @@ -84,4 +84,4 @@ export class Search extends Viewlet { async waitForResultText(text: string): Promise { await this.spectron.client.waitForText(`${VIEWLET} .messages[aria-hidden="false"] .message>p`, text); } -} \ No newline at end of file +}