diff --git a/src/sql/workbench/contrib/queryplan2/browser/constants.ts b/src/sql/workbench/contrib/queryplan2/browser/constants.ts index 78f9b9c16f..e3a2ce7fa4 100644 --- a/src/sql/workbench/contrib/queryplan2/browser/constants.ts +++ b/src/sql/workbench/contrib/queryplan2/browser/constants.ts @@ -248,3 +248,17 @@ export let queryPlanNodeIconPaths = unionAll: imageBasePath + 'union_all.png' }; + +const parentContainer = 'qps-container'; +export const savePlanIconClassNames = [parentContainer, 'save-plan-icon'].join(' '); +export const openPropertiesIconClassNames = [parentContainer, 'open-properties-icon'].join(' '); +export const openQueryIconClassNames = [parentContainer, 'open-query-icon'].join(' '); +export const openPlanFileIconClassNames = [parentContainer, 'open-plan-file-icon'].join(' '); +export const saveIconClassNames = [parentContainer, 'save-icon'].join(' '); +export const searchIconClassNames = [parentContainer, 'search-icon'].join(' '); +export const sortAlphabeticallyIconClassNames = [parentContainer, 'sort-alphabetically-icon'].join(' '); +export const sortByDisplayOrderIconClassNames = [parentContainer, 'sort-display-order-icon'].join(' '); +export const zoomInIconClassNames = [parentContainer, 'zoom-in-icon'].join(' '); +export const zoomOutIconClassNames = [parentContainer, 'zoom-out-icon'].join(' '); +export const customZoomIconClassNames = [parentContainer, 'custom-zoom-icon'].join(' '); +export const zoomToFitIconClassNames = [parentContainer, 'zoom-to-fit-icon'].join(' '); diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/customZoom.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/customZoom.svg new file mode 100644 index 0000000000..3020c8832e --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/customZoom.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openPlanFile.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openPlanFile.svg new file mode 100644 index 0000000000..bfd0622133 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openPlanFile.svg @@ -0,0 +1,16 @@ + + + + + + + + diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openProperties.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openProperties.svg new file mode 100644 index 0000000000..21d5f81609 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openProperties.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openQuery.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openQuery.svg new file mode 100644 index 0000000000..bc2111a73c --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/openQuery.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/save.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/save.svg new file mode 100644 index 0000000000..4d2e37e101 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/save.svg @@ -0,0 +1 @@ +Save_16x \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/search.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/search.svg new file mode 100644 index 0000000000..3bb7e67098 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/search.svg @@ -0,0 +1 @@ +Search_16x \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/sortAlphabetically.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/sortAlphabetically.svg new file mode 100644 index 0000000000..516e490d07 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/sortAlphabetically.svg @@ -0,0 +1 @@ +SortAscending_16x \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/sortByDisplayOrder.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/sortByDisplayOrder.svg new file mode 100644 index 0000000000..15b869a928 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/sortByDisplayOrder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoom.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoom.svg new file mode 100644 index 0000000000..1f7219e29a --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoom.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomIn.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomIn.svg new file mode 100644 index 0000000000..45b1dd3e0e --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomIn.svg @@ -0,0 +1 @@ +ZoomIn_16x \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomOut.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomOut.svg new file mode 100644 index 0000000000..fe41f6a5fd --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomOut.svg @@ -0,0 +1 @@ +ZoomOut_16x \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomToFit.svg b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomToFit.svg new file mode 100644 index 0000000000..9f5b95c4b9 --- /dev/null +++ b/src/sql/workbench/contrib/queryplan2/browser/images/actionIcons/zoomToFit.svg @@ -0,0 +1 @@ +ZoomToFit_16x \ No newline at end of file diff --git a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css index 0c00b98ccb..2be1656020 100644 --- a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css +++ b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css @@ -33,7 +33,6 @@ However we always want it to be the width of the container it is resizing. display: flex; flex-direction: column; position: relative; - border: 1px solid; } /* Container that contains views made by the action-bar actions */ @@ -81,8 +80,6 @@ However we always want it to be the width of the container it is resizing. /* query plan header that contains the relative query cost, query statement and recommendations */ .qps-container .query-plan .plan .header { padding: 5px; - border-top: 1px solid; - border-bottom: 1px solid; font-weight: bolder; } @@ -106,15 +103,14 @@ However we always want it to be the width of the container it is resizing. overflow: hidden; width: 500px; height: calc( 100% - 2px ); - border: 1px solid; display: flex; flex-direction: column; - border: 1px solid; + border-left: 1px solid; } /* Title container of the properties view */ .qps-container .query-plan .properties .title { - line-height: 22px; + line-height: 30px; height: 22px; font-size: 11px; font-weight: bold; @@ -123,11 +119,9 @@ However we always want it to be the width of the container it is resizing. display: flex; align-items: center; box-sizing: border-box; - margin-top: 3px; margin-bottom: 5px; padding-left: 5px; - border-bottom: solid 1px; - flex: 0 0 25px; + flex: 0 0 30px; } /* text in title container of properties view */ @@ -150,6 +144,7 @@ However we always want it to be the width of the container it is resizing. -webkit-margin-before: 0; -webkit-margin-after: 0; flex: 0 0 30px; + margin-top: 5px; } /* Operation name styling in the properties view. */ @@ -171,7 +166,6 @@ However we always want it to be the width of the container it is resizing. overflow-y: scroll; flex: 1; flex-grow: 1; - border-top: 1px solid; } /* Action bar for the query plan */ @@ -220,3 +214,82 @@ However we always want it to be the width of the container it is resizing. padding: 4px; z-index: 3; } + +.qps-container .save-plan-icon { + background-image: url(../images/actionIcons/save.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .open-properties-icon { + background-image: url(../images/actionIcons/openProperties.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .open-query-icon { + background-image: url(../images/actionIcons/openQuery.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .open-plan-file-icon { + background-image: url(../images/actionIcons/openPlanFile.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .search-icon { + background-image: url(../images/actionIcons/search.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .sort-alphabetically-icon { + background-image: url(../images/actionIcons/sortAlphabetically.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .sort-display-order-icon { + background-image: url(../images/actionIcons/sortByDisplayOrder.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .zoom-in-icon { + background-image: url(../images/actionIcons/zoomIn.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .zoom-out-icon { + background-image: url(../images/actionIcons/zoomOut.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .custom-zoom-icon { + background-image: url(../images/actionIcons/customZoom.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + +.qps-container .zoom-to-fit-icon { + background-image: url(../images/actionIcons/zoomToFit.svg); + background-size: 16px 16px; + background-position: center; + background-repeat: no-repeat; +} + + diff --git a/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts b/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts index d3b069611a..eab01bd5f0 100644 --- a/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts +++ b/src/sql/workbench/contrib/queryplan2/browser/queryPlan.ts @@ -13,18 +13,17 @@ import { Registry } from 'vs/platform/registry/common/platform'; import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar'; import * as DOM from 'vs/base/browser/dom'; import * as azdataGraphModule from 'azdataGraph'; -import { queryPlanNodeIconPaths } from 'sql/workbench/contrib/queryplan2/browser/constants'; +import { customZoomIconClassNames, openPlanFileIconClassNames, openPropertiesIconClassNames, openQueryIconClassNames, queryPlanNodeIconPaths, savePlanIconClassNames, searchIconClassNames, zoomInIconClassNames, zoomOutIconClassNames, zoomToFitIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants'; import { isString } from 'vs/base/common/types'; import { PlanHeader } from 'sql/workbench/contrib/queryplan2/browser/planHeader'; import { QueryPlanPropertiesView } from 'sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView'; import { Action } from 'vs/base/common/actions'; -import { Codicon } from 'vs/base/common/codicons'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { openNewQuery } from 'sql/workbench/contrib/query/browser/queryActions'; import { RunQueryOnConnectionMode } from 'sql/platform/connection/common/connectionManagement'; import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { editorBackground, editorWidgetBackground, foreground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { contrastBorder, editorBackground, editorWidgetBackground, foreground, listHoverBackground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import { ISashEvent, ISashLayoutProvider, Orientation, Sash } from 'vs/base/browser/ui/sash/sash'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; @@ -234,7 +233,7 @@ export class QueryPlan2 implements ISashLayoutProvider { const actions = [ new SavePlanFile(), - new OpenGraphFile(), + new OpenPlanFile(), new OpenQueryAction(), new SearchNodeAction(), new ZoomInAction(), @@ -442,7 +441,7 @@ class OpenQueryAction extends Action { public static LABEL = localize('openQueryAction', "Open Query"); constructor() { - super(OpenQueryAction.ID, OpenQueryAction.LABEL, Codicon.dash.classNames); + super(OpenQueryAction.ID, OpenQueryAction.LABEL, openQueryIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -455,7 +454,7 @@ class PropertiesAction extends Action { public static LABEL = localize('queryPlanPropertiesActionLabel', "Properties"); constructor() { - super(PropertiesAction.ID, PropertiesAction.LABEL, Codicon.book.classNames); + super(PropertiesAction.ID, PropertiesAction.LABEL, openPropertiesIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -468,7 +467,7 @@ class ZoomInAction extends Action { public static LABEL = localize('queryPlanZoomInActionLabel', "Zoom In"); constructor() { - super(ZoomInAction.ID, ZoomInAction.LABEL, Codicon.zoomIn.classNames); + super(ZoomInAction.ID, ZoomInAction.LABEL, zoomInIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -481,7 +480,7 @@ class ZoomOutAction extends Action { public static LABEL = localize('queryPlanZoomOutActionLabel', "Zoom Out"); constructor() { - super(ZoomOutAction.ID, ZoomOutAction.LABEL, Codicon.zoomOut.classNames); + super(ZoomOutAction.ID, ZoomOutAction.LABEL, zoomOutIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -494,7 +493,7 @@ class ZoomToFitAction extends Action { public static LABEL = localize('queryPlanFitGraphLabel', "Zoom to fit"); constructor() { - super(ZoomToFitAction.ID, ZoomToFitAction.LABEL, Codicon.debugStop.classNames); + super(ZoomToFitAction.ID, ZoomToFitAction.LABEL, zoomToFitIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -509,7 +508,7 @@ class SavePlanFile extends Action { public static LABEL = localize('queryPlanSavePlanXML', "Save Plan File"); constructor() { - super(SavePlanFile.ID, SavePlanFile.LABEL, Codicon.save.classNames); + super(SavePlanFile.ID, SavePlanFile.LABEL, savePlanIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -521,7 +520,7 @@ class CustomZoomAction extends Action { public static LABEL = localize('queryPlanCustomZoom', "Custom Zoom"); constructor() { - super(CustomZoomAction.ID, CustomZoomAction.LABEL, Codicon.searchStop.classNames); + super(CustomZoomAction.ID, CustomZoomAction.LABEL, customZoomIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -534,7 +533,7 @@ class SearchNodeAction extends Action { public static LABEL = localize('queryPlanSearchNodeAction', "SearchNode"); constructor() { - super(SearchNodeAction.ID, SearchNodeAction.LABEL, Codicon.search.classNames); + super(SearchNodeAction.ID, SearchNodeAction.LABEL, searchIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -542,12 +541,12 @@ class SearchNodeAction extends Action { } } -class OpenGraphFile extends Action { +class OpenPlanFile extends Action { public static ID = 'qp.openGraphFile'; - public static Label = localize('queryPlanOpenGraphFile', "Open Graph File"); + public static Label = localize('queryPlanOpenGraphFile', "Open Plan File"); constructor() { - super(OpenGraphFile.ID, OpenGraphFile.Label, Codicon.output.classNames); + super(OpenPlanFile.ID, OpenPlanFile.Label, openPlanFileIconClassNames); } public override async run(context: QueryPlan2): Promise { @@ -556,14 +555,6 @@ class OpenGraphFile extends Action { } registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { - const menuBackgroundColor = theme.getColor(editorBackground); - if (menuBackgroundColor) { - collector.addRule(` - .qps-container .query-plan .plan .plan-action-container .child { - background-color: ${menuBackgroundColor}; - } - `); - } const recommendationsColor = theme.getColor(textLinkForeground); if (recommendationsColor) { collector.addRule(` @@ -573,23 +564,53 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) = `); } const shadow = theme.getColor(widgetShadow); - const widgetBackgroundColor = theme.getColor(editorWidgetBackground); - if (shadow) { collector.addRule(` .qps-container .query-plan .plan .plan-action-container .child { box-shadow: 0 0 8px 2px ${shadow}; + } + `); + } + + const menuBackgroundColor = theme.getColor(listHoverBackground); + if (menuBackgroundColor) { + collector.addRule(` + .qps-container .query-plan .plan .header, + .qps-container .query-plan .properties .title, + .qps-container .query-plan .properties .table-action-bar { + background-color: ${menuBackgroundColor}; + } + `); + } + + const widgetBackgroundColor = theme.getColor(editorWidgetBackground); + if (widgetBackgroundColor) { + collector.addRule(` + .qps-container .query-plan .plan .plan-action-container .child, + .mxTooltip { background-color: ${widgetBackgroundColor}; } `); } + const widgetBorderColor = theme.getColor(contrastBorder); + if (widgetBorderColor) { + collector.addRule(` + .qps-container .query-plan .plan .plan-action-container .child, + .qps-container .query-plan .plan .header, + .qps-container .query-plan .properties .title, + .qps-container .query-plan .properties .table-action-bar, + .mxTooltip { + border: 1px solid ${widgetBorderColor}; + } + `); + } + const textColor = theme.getColor(foreground); - if (widgetBackgroundColor && foreground) { + if (textColor) { collector.addRule(` .mxTooltip { color: ${textColor}; - background-color: ${widgetBackgroundColor}; } `); } diff --git a/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts b/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts index 59f4fcdad4..0e8db84fe6 100644 --- a/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts +++ b/src/sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView.ts @@ -17,6 +17,7 @@ import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar'; import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import { removeLineBreaks } from 'sql/base/common/strings'; import { isString } from 'vs/base/common/types'; +import { sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants'; export class QueryPlanPropertiesView { @@ -239,7 +240,7 @@ export class SortPropertiesAlphabeticallyAction extends Action { public static LABEL = localize('queryPlanPropertyViewSortAlphabetically', "Alphabetical"); constructor() { - super(SortPropertiesAlphabeticallyAction.ID, SortPropertiesAlphabeticallyAction.LABEL, Codicon.sortPrecedence.classNames); + super(SortPropertiesAlphabeticallyAction.ID, SortPropertiesAlphabeticallyAction.LABEL, sortAlphabeticallyIconClassNames); } public override async run(context: QueryPlanPropertiesView): Promise { @@ -252,7 +253,7 @@ export class SortPropertiesByDisplayOrderAction extends Action { public static LABEL = localize('queryPlanPropertyViewSortByDisplayOrde', "Categorized"); constructor() { - super(SortPropertiesByDisplayOrderAction.ID, SortPropertiesByDisplayOrderAction.LABEL, Codicon.listOrdered.classNames); + super(SortPropertiesByDisplayOrderAction.ID, SortPropertiesByDisplayOrderAction.LABEL, sortByDisplayOrderIconClassNames); } public override async run(context: QueryPlanPropertiesView): Promise {