@theia/core 1.39.0-next.9 → 1.40.0

package/src/browser/style/icons.css

@@ -11,51 +11,51 @@
  * 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 WITH Classpath-exception-2.0
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
 .theia-open-change-icon {
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    background: var(--theia-icon-open-change) no-repeat;
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  background: var(--theia-icon-open-change) no-repeat;
 }
 
 .theia-open-file-icon {
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    background: var(--theia-icon-open-file) no-repeat;
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  background: var(--theia-icon-open-file) no-repeat;
 }
 
 .theia-open-preview-icon {
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    background: var(--theia-icon-preview) no-repeat;
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  background: var(--theia-icon-preview) no-repeat;
 }
 
 .theia-open-json-icon {
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    background: var(--theia-icon-open-json) no-repeat;
+  width: var(--theia-icon-size);
+  height: var(--theia-icon-size);
+  background: var(--theia-icon-open-json) no-repeat;
 }
 
 .theia-collapse-all-icon {
-    background: var(--theia-icon-collapse-all) center center no-repeat;
+  background: var(--theia-icon-collapse-all) center center no-repeat;
 }
 
 .theia-remove-all-icon {
-	background: var(--theia-icon-remove-all) center center no-repeat;
+  background: var(--theia-icon-remove-all) center center no-repeat;
 }
 
 .theia-add-icon {
-	background: var(--theia-icon-add) center center no-repeat;
+  background: var(--theia-icon-add) center center no-repeat;
 }
 
 @keyframes theia-spin {
-	100% {
-		transform:rotate(360deg);
-	}
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .theia-animation-spin {
-	animation: theia-spin 1.5s linear infinite;
+  animation: theia-spin 1.5s linear infinite;
 }

package/src/browser/style/index.css

@@ -11,24 +11,22 @@
  * 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 WITH Classpath-exception-2.0
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
-@import url('~@phosphor/widgets/style/index.css');
-@import url('~font-awesome/css/font-awesome.min.css');
+@import url("~@phosphor/widgets/style/index.css");
+@import url("~font-awesome/css/font-awesome.min.css");
 
 /*-----------------------------------------------------------------------------
 | General
 |----------------------------------------------------------------------------*/
 
 :root {
-
   /* Borders: Width and color (dark to bright) */
 
   --theia-border-width: 1px;
   --theia-panel-border-width: 1px;
 
-
   /* UI fonts: Family, size and color (bright to dark)
      ---------------------------------------------------
      The UI font CSS variables are used for the typography all of the Theia
@@ -36,10 +34,16 @@
    */
 
   --theia-ui-font-scale-factor: 1.2;
-  --theia-ui-font-size0: calc(var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor));
+  --theia-ui-font-size0: calc(
+    var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor)
+  );
   --theia-ui-font-size1: 13px; /* Base font size */
-  --theia-ui-font-size2: calc(var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor));
-  --theia-ui-font-size3: calc(var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor));
+  --theia-ui-font-size2: calc(
+    var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor)
+  );
+  --theia-ui-font-size3: calc(
+    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;
 
@@ -53,7 +57,8 @@
   --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-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono",
+    "Courier New", monospace, "Droid Sans Fallback";
   --theia-monospace-font-family: monospace;
   --theia-ui-padding: 6px;
 
@@ -86,48 +91,58 @@ body:-moz-window-inactive {
 }
 
 a {
-    color: var(--theia-textLink-foreground);
+  color: var(--theia-textLink-foreground);
 }
 
-a:active, a:hover {
-    color: var(--theia-textLink-activeForeground);
+a:active,
+a:hover {
+  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;
+  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;
 }
 
 .theia-input::placeholder {
-    color: var(--theia-input-placeholderForeground);
+  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 {
@@ -188,7 +203,8 @@ blockquote {
   margin-left: 8px;
 }
 
-.theia-mod-disabled, .theia-mod-disabled:focus {
+.theia-mod-disabled,
+.theia-mod-disabled:focus {
   opacity: var(--theia-mod-disabled-opacity) !important;
 }
 
@@ -209,21 +225,21 @@ blockquote {
 .noselect,
 .no-select {
   -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -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 {
@@ -247,7 +263,8 @@ blockquote {
   outline: none;
   cursor: pointer;
   padding: 4px 9px;
-  margin-left: calc(var(--theia-ui-padding)*2);
+  margin-left: calc(var(--theia-ui-padding) * 2);
+  border-radius: 2px;
 }
 
 .theia-button:focus {
@@ -266,36 +283,38 @@ blockquote {
   cursor: default;
 }
 
-button.secondary[disabled], .theia-button.secondary[disabled] {
-    color: var(--theia-secondaryButton-disabledForeground);
-    background-color: var(--theia-secondaryButton-disabledBackground);
+button.secondary[disabled],
+.theia-button.secondary[disabled] {
+  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: 0;
-    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 {
+.theia-cursor-no-drop,
+.theia-cursor-no-drop:active {
   cursor: no-drop;
 }
 
@@ -303,24 +322,24 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
 | Import children style files
 |----------------------------------------------------------------------------*/
 
-@import './dockpanel.css';
-@import './dialog.css';
-@import './menus.css';
-@import './sidepanel.css';
-@import './tabs.css';
-@import './scrollbars.css';
-@import './tree.css';
-@import './status-bar.css';
-@import './tree-decorators.css';
-@import './about.css';
-@import './search-box.css';
-@import './ansi.css';
-@import './view-container.css';
-@import './notification.css';
-@import './alert-messages.css';
-@import './icons.css';
-@import './widget.css';
-@import './quick-title-bar.css';
-@import './progress-bar.css';
-@import './breadcrumbs.css';
-@import './tooltip.css';
+@import "./dockpanel.css";
+@import "./dialog.css";
+@import "./menus.css";
+@import "./sidepanel.css";
+@import "./tabs.css";
+@import "./scrollbars.css";
+@import "./tree.css";
+@import "./status-bar.css";
+@import "./tree-decorators.css";
+@import "./about.css";
+@import "./search-box.css";
+@import "./ansi.css";
+@import "./view-container.css";
+@import "./notification.css";
+@import "./alert-messages.css";
+@import "./icons.css";
+@import "./widget.css";
+@import "./quick-title-bar.css";
+@import "./progress-bar.css";
+@import "./breadcrumbs.css";
+@import "./tooltip.css";

package/src/browser/style/menus.css

@@ -11,80 +11,80 @@
  * 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 WITH Classpath-exception-2.0
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
 /*-----------------------------------------------------------------------------
 | Variables
 |----------------------------------------------------------------------------*/
 
-
 :root {
   --theia-private-menubar-height: 32px;
   --theia-private-menu-item-height: 24px;
   --theia-menu-z-index: 10000;
 }
 
-
 /*-----------------------------------------------------------------------------
 | MenuBar
 |----------------------------------------------------------------------------*/
 
-
 .p-Widget.p-MenuBar {
+  display: flex;
+  align-items: center; 
   padding-left: 5px;
   font-size: var(--theia-ui-font-size1);
 }
 
-
 .p-MenuBar-menu {
-  transform: translateY(calc(-2*var(--theia-border-width)));
+  transform: translateY(calc(-2 * var(--theia-border-width)));
 }
 
+.p-MenuBar-content {
+  display: flex;
+  align-items: center; 
+}
 
 .p-MenuBar-item {
   padding: 0px 8px;
-  line-height: var(--theia-private-menubar-height);
+  line-height: var(--theia-content-line-height);
+  border-radius: 4px;
 }
 
 .p-MenuBar-item .p-MenuBar-itemLabel {
   white-space: pre;
 }
 
-
 .p-MenuBar-item.p-mod-active {
   background: var(--theia-menubar-selectionBackground);
   color: var(--theia-menubar-selectionForeground);
   opacity: 1;
 }
 
-
 .p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
   z-index: calc(var(--theia-menu-z-index) - 1);
   background: var(--theia-menubar-selectionBackground);
-  border-left: var(--theia-border-width) solid var(--theia-menubar-selectionBorder);
-  border-right: var(--theia-border-width) solid var(--theia-menubar-selectionBorder);
+  border-left: var(--theia-border-width) solid
+    var(--theia-menubar-selectionBorder);
+  border-right: var(--theia-border-width) solid
+    var(--theia-menubar-selectionBorder);
 }
 
-
 .p-MenuBar-item.p-mod-disabled {
   opacity: var(--theia-mod-disabled-opacity);
 }
 
-
 .p-MenuBar-item.p-type-separator {
   margin: 2px;
   padding: 0;
   border: none;
-  border-left: var(--theia-border-width) solid var(--theia-menu-separatorBackground);
+  border-left: var(--theia-border-width) solid
+    var(--theia-menu-separatorBackground);
 }
 
-
 .p-MenuBar-itemMnemonic {
   text-decoration: underline;
 }
 
-
 #theia-top-panel {
   background: var(--theia-titleBar-activeBackground);
   color: var(--theia-titleBar-activeForeground);
@@ -102,15 +102,15 @@
 | Menu
 |----------------------------------------------------------------------------*/
 
-
 .p-Menu {
   z-index: var(--theia-menu-z-index);
-  padding: 4px 0px;
+  padding: 4px;
   background: var(--theia-menu-background);
   color: var(--theia-menu-foreground);
   font-size: var(--theia-ui-font-size1);
   box-shadow: 0px 1px 6px var(--theia-widget-shadow);
   border: 1px solid var(--theia-menu-border);
+  border-radius: 5px;
 }
 
 .p-Menu:focus {
@@ -121,73 +121,88 @@
   min-height: var(--theia-private-menu-item-height);
   max-height: var(--theia-private-menu-item-height);
   padding: 0px;
-  line-height: var(--theia-private-menu-item-height);
+  /** 
+   * FireFox adds 0.5px to all menu items for some reason
+   * Subtracting that amount fixes the behavior on FireFox and doesn't introduce issues on Chromium
+   */
+  line-height: calc(var(--theia-private-menu-item-height) - 0.5px);
+  overflow: hidden;
 }
 
-
 .p-Menu-item.p-mod-active {
-  background: var(--theia-menu-selectionBackground);
   color: var(--theia-menu-selectionForeground);
   border: thin solid var(--theia-menu-selectionBorder);
   opacity: 1;
   cursor: pointer;
 }
 
+/** 
+ * We cannot apply border-radius on items with `display: table-row` 
+ * So we apply it to its first and last child
+ */
+
+.p-Menu-item.p-mod-active > div {
+  background: var(--theia-menu-selectionBackground);
+}
+
+.p-Menu-item.p-mod-active > div:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.p-Menu-item.p-mod-active > div:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
 
 .p-Menu-item.p-mod-disabled {
   opacity: var(--theia-mod-disabled-opacity);
 }
 
-
 .p-Menu-itemIcon {
   width: 21px;
   padding: 0px 2px 0px 4px;
-  margin-top: -2px;
+  height: var(--theia-private-menu-item-height);
 }
 
-
 .p-Menu-itemLabel {
   padding: 0px 32px 0px 2px;
 }
 
-
 .p-Menu-itemMnemonic {
   text-decoration: underline;
 }
 
-
 .p-Menu-itemShortcut {
   padding: 0px;
 }
 
-
 .p-Menu-itemSubmenuIcon {
   width: var(--theia-icon-size);
   padding: 0px 10px 0px 0px;
 }
 
-
-.p-Menu-item[data-type='separator'] > div {
+.p-Menu-item[data-type="separator"] > div {
   padding: 0;
   height: 9px;
   opacity: 0.36;
 }
 
-
-.p-Menu-item[data-type='separator'] > div::after {
-  content: '';
+.p-Menu-item[data-type="separator"] > div::after {
+  content: "";
   display: block;
   position: relative;
   top: 4px;
-  border-top: var(--theia-border-width) solid var(--theia-menu-separatorBackground);
+  border-top: var(--theia-border-width) solid
+    var(--theia-menu-separatorBackground);
 }
 
-.p-Menu-item[data-type='separator'] > div.p-Menu-itemIcon::after {
-  margin-left: 12px;
+.p-Menu-item[data-type="separator"] > div:first-child:after {
+  margin-left: -4px;
 }
 
-.p-Menu-item[data-type='separator'] > div.p-Menu-itemSubmenuIcon::after {
-  margin-right: 12px;
+.p-Menu-item[data-type="separator"] > div:last-child::after {
+  margin-right: -4px;
 }
 
 .p-Menu-itemIcon::before,
@@ -205,13 +220,11 @@
   transform: translateY(20%);
 }
 
-
 .p-Menu-item.p-mod-toggled > .p-Menu-itemIcon::before {
-  content: '\eab2';
+  content: "\eab2";
   transform: scale(0.8) translateY(20%);
 }
 
-
-.p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon::before {
-  content: '\eab6';
+.p-Menu-item[data-type="submenu"] > .p-Menu-itemSubmenuIcon::before {
+  content: "\eab6";
 }

package/src/browser/style/notification.css

@@ -11,29 +11,29 @@
  * 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 WITH Classpath-exception-2.0
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
  ********************************************************************************/
 
 :root {
-    --theia-notification-count-height: 15.5px;
-    --theia-notification-count-width: 15.5px;
+  --theia-notification-count-height: 15.5px;
+  --theia-notification-count-width: 15.5px;
 }
 
 .notification-count-container {
-    align-self: center;
-    background-color: var(--theia-badge-background);
-    border-radius: 20px;
-    color: var(--theia-badge-foreground);
-    display: flex;
-    font-size: calc(var(--theia-ui-font-size0) * 0.8);
-    font-weight: 500;
-    height: var(--theia-notification-count-height);
-    justify-content: center;
-    min-width: 6px;
-    padding: 0 5px;
-    text-align: center;
+  align-self: center;
+  background-color: var(--theia-badge-background);
+  border-radius: 20px;
+  color: var(--theia-badge-foreground);
+  display: flex;
+  font-size: calc(var(--theia-ui-font-size0) * 0.8);
+  font-weight: 500;
+  height: var(--theia-notification-count-height);
+  justify-content: center;
+  min-width: 6px;
+  padding: 0 5px;
+  text-align: center;
 }
 
 .notification-count-container > .notification-count {
-    align-self: center;
+  align-self: center;
 }