@theia/core 1.45.0 → 1.46.0-next.106

package/src/browser/style/index.css

@@ -22,18 +22,18 @@
 |----------------------------------------------------------------------------*/
 
 :root {
-  /* Borders: Width and color (dark to bright) */
+    /* Borders: Width and color (dark to bright) */
 
-  --theia-border-width: 1px;
-  --theia-panel-border-width: 1px;
+    --theia-border-width: 1px;
+    --theia-panel-border-width: 1px;
 
-  /* UI fonts: Family, size and color (bright to dark)
+    /* UI fonts: Family, size and color (bright to dark)
      ---------------------------------------------------
      The UI font CSS variables are used for the typography all of the Theia
      user interface elements that are not directly user-generated content.
    */
 
-  --theia-ui-font-scale-factor: 1.2;
+    --theia-ui-font-scale-factor: 1.2;
   --theia-ui-font-size0: calc(
     var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor)
   );
@@ -45,181 +45,186 @@
     var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor)
   );
   --theia-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
-  --theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-  /* Content fonts: Family, size and color (bright to dark)
+    /* Content fonts: Family, size and color (bright to dark)
      Content font variables are used for typography of user-generated content.
    */
 
-  --theia-content-font-size: 13px;
-  --theia-content-line-height: 22px;
+    --theia-content-font-size: 13px;
+    --theia-content-line-height: 22px;
 
-  --theia-code-font-size: 13px;
-  --theia-code-line-height: 17px;
-  --theia-code-padding: 5px;
-  --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono",
-    "Courier New", monospace, "Droid Sans Fallback";
-  --theia-monospace-font-family: monospace;
-  --theia-ui-padding: 6px;
+    --theia-code-font-size: 13px;
+    --theia-code-line-height: 17px;
+    --theia-code-padding: 5px;
+    --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono",
+        "Courier New", monospace, "Droid Sans Fallback";
+    --theia-monospace-font-family: monospace;
+    --theia-ui-padding: 6px;
 
-  /* Icons */
-  --theia-icon-size: 16px;
+    /* Icons */
+    --theia-icon-size: 16px;
 
-  /* Scrollbars */
-  --theia-scrollbar-width: 10px;
-  --theia-scrollbar-rail-width: 10px;
+    /* Scrollbars */
+    --theia-scrollbar-width: 10px;
+    --theia-scrollbar-rail-width: 10px;
 
-  /* Statusbar */
-  --theia-statusBar-font-size: 12px;
+    /* Statusbar */
+    --theia-statusBar-font-size: 12px;
 
-  /* Opacity for disabled mod  */
-  --theia-mod-disabled-opacity: 0.4;
+    /* Opacity for disabled mod  */
+    --theia-mod-disabled-opacity: 0.4;
 }
 
+html,
 body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  font-family: var(--theia-ui-font-family);
-  background: var(--theia-editor-background);
-  color: var(--theia-foreground);
-  border: 1px solid var(--theia-window-activeBorder);
+    height: 100vh;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    font-family: var(--theia-ui-font-family);
+    background: var(--theia-editor-background);
+    color: var(--theia-foreground);
+    border: 1px solid var(--theia-window-activeBorder);
 }
 body:window-inactive,
 body:-moz-window-inactive {
-  border-color: var(--theia-window-inactiveBorder);
+    border-color: var(--theia-window-inactiveBorder);
 }
 
 a {
-  color: var(--theia-textLink-foreground);
+    color: var(--theia-textLink-foreground);
 }
 
 a:active,
 a:hover {
-  color: var(--theia-textLink-activeForeground);
+    color: var(--theia-textLink-activeForeground);
 }
 
 code {
-  color: var(--theia-textPreformat-foreground);
+    color: var(--theia-textPreformat-foreground);
 }
 
 blockquote {
-  margin: 0 7px 0 5px;
-  padding: 0px 16px 0px 10px;
-  background: var(--theia-textBlockQuote-background);
-  border-left: 5px solid var(--theia-textBlockQuote-border);
+    margin: 0 7px 0 5px;
+    padding: 0px 16px 0px 10px;
+    background: var(--theia-textBlockQuote-background);
+    border-left: 5px solid var(--theia-textBlockQuote-border);
 }
 
 .theia-input {
-  background: var(--theia-input-background);
-  color: var(--theia-input-foreground);
-  border: var(--theia-border-width) solid var(--theia-input-border);
-  font-family: var(--theia-ui-font-family);
-  font-size: var(--theia-ui-font-size1);
-  line-height: var(--theia-content-line-height);
-  padding-left: 5px;
-  border-radius: 2px;
+    background: var(--theia-input-background);
+    color: var(--theia-input-foreground);
+    border: var(--theia-border-width) solid var(--theia-input-border);
+    font-family: var(--theia-ui-font-family);
+    font-size: var(--theia-ui-font-size1);
+    line-height: var(--theia-content-line-height);
+    padding-left: 5px;
+    border-radius: 2px;
 }
 
 .theia-input[type="text"] {
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .theia-input::placeholder {
-  color: var(--theia-input-placeholderForeground);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    color: var(--theia-input-placeholderForeground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .theia-maximized {
-  position: fixed !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  width: auto !important;
-  height: auto !important;
-  z-index: 255 !important;
-  background: var(--theia-editor-background);
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: auto !important;
+    height: auto !important;
+    z-index: 255 !important;
+    background: var(--theia-editor-background);
 }
 
 .theia-visible-menu-maximized {
-  top: var(--theia-private-menubar-height) !important;
+    top: var(--theia-private-menubar-height) !important;
 }
 
 .theia-ApplicationShell {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--theia-editor-background);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--theia-editor-background);
 }
 
 .theia-preload {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 50000;
-  background: var(--theia-editor-background);
-  background-size: 60px 60px;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: center;
-  transition: opacity 0.8s;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 50000;
+    background: var(--theia-editor-background);
+    background-size: 60px 60px;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+    transition: opacity 0.8s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .theia-preload::after {
-  animation: 1s theia-preload-rotate infinite;
+    animation: 1s theia-preload-rotate infinite;
   color: #777; /* color works on both light and dark themes */
   content: "\eb19"; /* codicon-load */
-  font: normal normal normal 72px/1 codicon;
+    font: normal normal normal 72px/1 codicon;
 }
 
 @keyframes theia-preload-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 .theia-preload.theia-hidden {
-  opacity: 0;
+    opacity: 0;
 }
 
 .theia-icon {
-  width: 32px;
-  height: 18px;
-  margin: 5px;
-  margin-left: 8px;
+    width: 32px;
+    height: 18px;
+    margin: 5px;
+    margin-left: 8px;
 }
 
 .theia-mod-disabled,
 .theia-mod-disabled:focus {
-  opacity: var(--theia-mod-disabled-opacity) !important;
+    opacity: var(--theia-mod-disabled-opacity) !important;
 }
 
 .theia-header {
-  text-transform: uppercase;
-  font-size: var(--theia-ui-font-size0);
-  font-weight: 700;
+    text-transform: uppercase;
+    font-size: var(--theia-ui-font-size0);
+    font-weight: 700;
 }
 
 .p-Widget {
-  font-size: var(--theia-ui-font-size1);
+    font-size: var(--theia-ui-font-size1);
 }
 
 .p-Widget.p-mod-hidden {
-  display: none !important;
+    display: none !important;
 }
 
 .noselect,
@@ -231,91 +236,91 @@ blockquote {
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
-  -o-user-select: none;
+    -o-user-select: none;
 }
 
 :focus {
-  outline-width: 1px;
-  outline-style: solid;
-  outline-offset: -1px;
-  opacity: 1;
-  outline-color: var(--theia-focusBorder);
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+    opacity: 1;
+    outline-color: var(--theia-focusBorder);
 }
 
 ::selection {
-  background: var(--theia-selection-background);
+    background: var(--theia-selection-background);
 }
 
 .action-label {
-  padding: 2px;
-  border-radius: 5px;
-  cursor: pointer;
+    padding: 2px;
+    border-radius: 5px;
+    cursor: pointer;
 }
 
 .action-label:hover {
-  background-color: var(--theia-toolbar-hoverBackground);
+    background-color: var(--theia-toolbar-hoverBackground);
 }
 
 .theia-button {
-  border: none;
-  color: var(--theia-button-foreground);
-  min-width: 65px;
-  outline: none;
-  cursor: pointer;
-  padding: 4px 9px;
-  margin-left: calc(var(--theia-ui-padding) * 2);
-  border-radius: 2px;
+    border: none;
+    color: var(--theia-button-foreground);
+    min-width: 65px;
+    outline: none;
+    cursor: pointer;
+    padding: 4px 9px;
+    margin-left: calc(var(--theia-ui-padding) * 2);
+    border-radius: 2px;
 }
 
 .theia-button:focus {
-  outline: 1px solid var(--theia-focusBorder);
-  outline-offset: 1px;
+    outline: 1px solid var(--theia-focusBorder);
+    outline-offset: 1px;
 }
 
 .theia-button.secondary {
-  color: var(--theia-secondaryButton-foreground);
+    color: var(--theia-secondaryButton-foreground);
 }
 
 .theia-button[disabled] {
-  opacity: 0.6;
-  color: var(--theia-button-disabledForeground);
-  background-color: var(--theia-button-disabledBackground);
-  cursor: default;
+    opacity: 0.6;
+    color: var(--theia-button-disabledForeground);
+    background-color: var(--theia-button-disabledBackground);
+    cursor: default;
 }
 
 button.secondary[disabled],
 .theia-button.secondary[disabled] {
-  color: var(--theia-secondaryButton-disabledForeground);
-  background-color: var(--theia-secondaryButton-disabledBackground);
+    color: var(--theia-secondaryButton-disabledForeground);
+    background-color: var(--theia-secondaryButton-disabledBackground);
 }
 
 .theia-select {
-  color: var(--dropdown-foreground);
-  font-size: var(--theia-ui-font-size1);
-  border-radius: 2px;
-  border: 1px solid var(--theia-dropdown-border);
-  background: var(--theia-dropdown-background);
-  outline: none;
-  cursor: pointer;
+    color: var(--dropdown-foreground);
+    font-size: var(--theia-ui-font-size1);
+    border-radius: 2px;
+    border: 1px solid var(--theia-dropdown-border);
+    background: var(--theia-dropdown-background);
+    outline: none;
+    cursor: pointer;
 }
 
 .theia-select option {
-  background: var(--theia-dropdown-listBackground);
+    background: var(--theia-dropdown-listBackground);
 }
 
 .theia-transparent-overlay {
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 999;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 999;
 }
 
 .theia-cursor-no-drop,
 .theia-cursor-no-drop:active {
-  cursor: no-drop;
+    cursor: no-drop;
 }
 
 /*-----------------------------------------------------------------------------

package/src/browser/style/select-component.css

@@ -14,6 +14,13 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
+.theia-select-component-container {
+  /* required to set z-index */
+  position: fixed;
+  /* dialog overlay has a z-index of 5000 */
+  z-index: 6000;
+}
+
 .theia-select-component {
   background-color: var(--theia-dropdown-background);
   cursor: pointer;
@@ -64,33 +71,25 @@
   padding: 6px 5px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-description:first-child {
+.theia-select-component-dropdown .theia-select-component-description:first-child {
   border-bottom: 1px solid var(--theia-editorWidget-border);
   margin-bottom: 2px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-description:last-child {
+.theia-select-component-dropdown .theia-select-component-description:last-child {
   border-top: 1px solid var(--theia-editorWidget-border);
   margin-top: 2px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-option
-  .theia-select-component-option-value {
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-value {
   width: 100%;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-option
-  .theia-select-component-option-detail {
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-detail {
   padding-left: 4px;
 }
 
-.theia-select-component-dropdown
-  .theia-select-component-option:not(.selected)
-  .theia-select-component-option-detail {
+.theia-select-component-dropdown .theia-select-component-option:not(.selected) .theia-select-component-option-detail {
   color: var(--theia-textLink-foreground);
 }
 

package/src/browser/style/tabs.css

@@ -123,6 +123,12 @@
   white-space: nowrap;
 }
 
+.p-TabBar-tail {
+  padding-left: 5px;
+  text-align: center;
+  justify-content: center;
+}
+
 .p-TabBar.theia-app-centers .p-TabBar-tabLabelWrapper {
   display: flex;
 }

package/src/browser/tooltip-service.tsx

@@ -19,7 +19,7 @@ import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
 import { ReactRenderer, RendererHost } from './widgets/react-renderer';
 import { CorePreferences } from './core-preferences';
-import { v4 } from 'uuid';
+import { generateUuid } from '../common/uuid';
 
 export const TooltipService = Symbol('TooltipService');
 
@@ -59,7 +59,7 @@ export class TooltipServiceImpl extends ReactRenderer implements TooltipService
         @inject(RendererHost) @optional() host?: RendererHost
     ) {
         super(host);
-        this.tooltipId = v4();
+        this.tooltipId = generateUuid();
     }
 
     @postConstruct()

package/src/browser/tree/index.ts

@@ -26,3 +26,4 @@ export * from './tree-container';
 export * from './tree-decorator';
 export * from './tree-search';
 export * from './tree-compression';
+export * from './tree-preference';

package/src/browser/tree/test/mock-selectable-tree-model.ts

@@ -0,0 +1,109 @@
+// *****************************************************************************
+// Copyright (C) 2023 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { CompositeTreeNode } from '../tree';
+import { SelectableTreeNode } from '../tree-selection';
+import { ExpandableTreeNode } from '../tree-expansion';
+
+export namespace MockSelectableTreeModel {
+
+    export interface SelectableNode {
+        readonly id: string;
+        readonly selected: boolean;
+        readonly focused?: boolean;
+        readonly children?: SelectableNode[];
+    }
+
+    export namespace SelectableNode {
+        export function toTreeNode(root: SelectableNode, parent?: SelectableTreeNode & CompositeTreeNode): SelectableTreeNode {
+            const { id } = root;
+            const name = id;
+            const selected = false;
+            const focus = false;
+            const expanded = true;
+            const node: CompositeTreeNode & SelectableTreeNode = {
+                id,
+                name,
+                selected,
+                focus,
+                parent: parent,
+                children: []
+            };
+            const children = (root.children || []).map(child => SelectableNode.toTreeNode(child, node));
+            if (children.length === 0) {
+                return node;
+            } else {
+                node.children = children;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (node as any).expanded = expanded;
+                return node as CompositeTreeNode & SelectableTreeNode & ExpandableTreeNode;
+            }
+        }
+    }
+
+    export const HIERARCHICAL_MOCK_ROOT = () => SelectableNode.toTreeNode({
+        'id': '1',
+        'selected': false,
+        'children': [
+            {
+                'id': '1.1',
+                'selected': false,
+                'children': [
+                    {
+                        'id': '1.1.1',
+                        'selected': false,
+                    },
+                    {
+                        'id': '1.1.2',
+                        'selected': false,
+                    }
+                ]
+            },
+            {
+                'id': '1.2',
+                'selected': false,
+                'children': [
+                    {
+                        'id': '1.2.1',
+                        'selected': false,
+                        'children': [
+                            {
+                                'id': '1.2.1.1',
+                                'selected': false,
+                            },
+                            {
+                                'id': '1.2.1.2',
+                                'selected': false,
+                            }
+                        ]
+                    },
+                    {
+                        'id': '1.2.2',
+                        'selected': false,
+                    },
+                    {
+                        'id': '1.2.3',
+                        'selected': false,
+                    }
+                ]
+            },
+            {
+                'id': '1.3',
+                'selected': false,
+            }
+        ]
+    });
+}