Skip to content

Commit

Permalink
Use paginated non virtual list in Settings Editor (#103268)
Browse files Browse the repository at this point in the history
  • Loading branch information
@9at8
9at8 committed Jul 28, 2020
1 parent feb05f7 commit 9d72fcb
Show file tree
Hide file tree
Showing 7 changed files with 719 additions and 278 deletions.
176 changes: 105 additions & 71 deletions src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css
View file

Large diffs are not rendered by default.

34 changes: 34 additions & 0 deletions src/vs/workbench/contrib/preferences/browser/media/settingsListScrollbar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.settings-editor > .settings-body .settings-list-container {
/* Use the hack presented in https://stackoverflow.com/a/38748186/1156119 to get opacity transitions working on the scrollbar */
-webkit-background-clip: text;
background-clip: text;
transition: background-color 800ms linear;
}

.settings-editor > .settings-body .settings-list-container::-webkit-scrollbar {
width: 10px;
}

.settings-editor > .settings-body .settings-list-container::-webkit-scrollbar-thumb {
min-height: 20px;
}

.settings-editor > .settings-body .settings-list-container:focus,
.settings-editor > .settings-body .settings-list-container:hover {
transition: opacity 100ms linear;
cursor: default;
}

.settings-editor > .settings-body .settings-list-container::-webkit-scrollbar-thumb {
transition: background-color 800ms linear;
background-color: inherit;
}

.settings-editor > .settings-body .settings-list-container::-webkit-scrollbar-thumb:window-inactive {
background-color: inherit;
}
106 changes: 53 additions & 53 deletions src/vs/workbench/contrib/preferences/browser/media/settingsWidgets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,109 +3,109 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-item-value > .setting-item-control {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-item-value > .setting-item-control {
width: 100%;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key {
margin-right: 3px;
margin-left: 2px;
}

/* Deal with overflow */
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-sibling,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-sibling,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value {
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-value {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-value {
max-width: 90%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-sibling {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-sibling {
max-width: 10%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input-key {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input-key {
margin-left: 4px;
min-width: 40%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input-key {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input-key {
margin-left: 0;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value {
width: 100%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row:hover .setting-list-object-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row:focus .setting-list-object-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row.selected .setting-list-object-value {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row:hover .setting-list-object-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row:focus .setting-list-object-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row.selected .setting-list-object-value {
margin-right: 44px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-sibling,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-sibling,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-key,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value {
display: inline-block;
line-height: 24px;
}

/* Use monospace to display glob patterns in exclude widget */
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-exclude-widget .setting-list-value,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-exclude-widget .setting-list-sibling {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-exclude-widget .setting-list-value,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-exclude-widget .setting-list-sibling {
font-family: var(--monaco-monospace-font);
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-sibling {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-sibling {
opacity: 0.7;
margin-left: 0.5em;
font-size: 0.9em;
white-space: pre;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row .monaco-action-bar {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row .monaco-action-bar {
display: none;
position: absolute;
right: 0px;
top: 0px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row-header {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row-header {
position: relative;
max-height: 24px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row-header {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row-header {
font-weight: bold;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row-header {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row-header {
display: flex;
padding-right: 4px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row-header,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-row:nth-child(odd):not(:hover):not(:focus):not(.selected),
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-edit-row.setting-list-object-row:nth-child(odd):hover {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-row-header,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-row:nth-child(odd):not(:hover):not(:focus):not(.selected),
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-edit-row.setting-list-object-row:nth-child(odd):hover {
background-color: rgba(130, 130, 130, 0.04);
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row:focus {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row:focus {
outline: none;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover .monaco-action-bar,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected .monaco-action-bar {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row:hover .monaco-action-bar,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row.selected .monaco-action-bar {
display: block;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row .monaco-action-bar .action-label {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row .monaco-action-bar .action-label {
width: 16px;
height: 20px;
padding: 2px;
Expand All @@ -115,56 +115,56 @@
justify-content: center;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-row .monaco-action-bar .setting-listAction-edit {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-row .monaco-action-bar .setting-listAction-edit {
margin-right: 4px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .monaco-text-button {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .monaco-text-button {
width: initial;
padding: 2px 14px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-item-control.setting-list-hide-add-button .setting-list-new-row {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-item-control.setting-list-hide-add-button .setting-list-new-row {
display: none;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .monaco-text-button.setting-list-addButton {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .monaco-text-button.setting-list-addButton {
display: inline-block;
margin-top: 4px;
margin-right: 4px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-edit-row {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-edit-row {
display: flex
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-valueInput,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-siblingInput,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-valueInput,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-siblingInput,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input {
height: 24px;
max-width: 320px;
margin-right: 4px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input {
max-width: unset;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value-container .setting-list-object-input {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value-container .setting-list-object-input {
margin-right: 0;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-ok-button {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-ok-button {
margin: 0 4px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-widget,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-exclude-widget,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-widget,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-exclude-widget,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget {
margin-bottom: 1px;
padding: 1px;
}

.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value-container,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input select {
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-value-container,
.settings-editor > .settings-body > .settings-list-container .setting-item.setting-item-list .setting-list-object-widget .setting-list-object-input select {
width: 100%;
height: 24px;
}
Loading

0 comments on commit 9d72fcb

Please sign in to comment.