feat: new UX for the boards/library manager widget

Closes #19
Closes #781
Closes #1591
Closes #1607
Closes #1924

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

Diff for: arduino-ide-extension/package.json

@@ -58,7 +58,6 @@
     "@types/p-queue": "^2.3.1",
     "@types/ps-tree": "^1.1.0",
     "@types/react-tabs": "^2.3.2",
-    "@types/react-virtualized": "^9.21.21",
     "@types/temp": "^0.8.34",
     "@types/which": "^1.3.1",
     "@vscode/debugprotocol": "^1.51.0",
@@ -95,7 +94,6 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-select": "^5.6.0",
     "react-tabs": "^3.1.2",
-    "react-virtualized": "^9.22.3",
     "react-window": "^1.8.6",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",

Diff for: arduino-ide-extension/src/browser/boards/boards-auto-installer.ts

@@ -174,7 +174,7 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
     // CLI returns the packages already sorted with the deprecated ones at the end of the list
     // in order to ensure the new ones are preferred
     const candidates = packagesForBoard.filter(
-      ({ installable, installedVersion }) => installable && !installedVersion
+      ({ installedVersion }) => !installedVersion
     );
 
     return candidates[0];

Diff for: arduino-ide-extension/src/browser/style/boards-config-dialog.css

@@ -165,7 +165,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   border: 1px solid var(--theia-arduino-toolbar-dropdown-border);
   display: flex;
   gap: 10px;
-  height: 28px;
+  height: var(--arduino-button-height);
   margin: 0 4px;
   overflow: hidden;
   padding: 0 10px;

Diff for: arduino-ide-extension/src/browser/style/dialogs.css

@@ -12,7 +12,7 @@
 
     min-width: 424px;
     max-height: 560px;
-    padding: 0 28px;
+    padding: 0 var(--arduino-button-height);
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogTitle {
@@ -35,15 +35,15 @@
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
-    margin-bottom: 28px;
+    margin-bottom: var(--arduino-button-height);
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent > div {
     padding: 0 0 12px;
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection {
-    margin-top: 28px;
+    margin-top: var(--arduino-button-height);
 }
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection:first-child {
     margin-top: 0;

Diff for: arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -15,7 +15,7 @@
 }
 
 .ide-updater-dialog--logo-container {
-  margin-right: 28px;
+  margin-right: var(--arduino-button-height);
 }
 
 .ide-updater-dialog--logo {
@@ -76,7 +76,7 @@
 .ide-updater-dialog .buttons-container {
   display: flex;
   justify-content: flex-end;
-  margin-top: 28px;
+  margin-top: var(--arduino-button-height);
 }
 
 .ide-updater-dialog .buttons-container a.theia-button {

Diff for: arduino-ide-extension/src/browser/style/index.css

@@ -20,6 +20,10 @@
 @import './progress-bar.css';
 @import './settings-step-input.css';
 
+:root {
+  --arduino-button-height: 28px;
+}
+
 /* Revive of the `--theia-icon-loading`. The variable has been removed from Theia while IDE2 still uses is. */
 /* The SVG icons are still part of Theia (1.31.1) */
 /* https://github.com/arduino/arduino-ide/pull/1662#issuecomment-1324997134 */
@@ -64,9 +68,9 @@ body.theia-dark {
 
 /* Makes the sidepanel a bit wider when opening the widget */
 .p-DockPanel-widget {
-  min-width: 200px;
+  min-width: 220px;
   min-height: 20px;
-  height: 200px;
+  height: 220px;
 }
 
 /* Overrule the default Theia CSS button styles. */
@@ -95,7 +99,7 @@ button.theia-button,
 }
 
 button.theia-button {
-  height: 28px;
+  height: var(--arduino-button-height);
   max-width: none;
 }
 
@@ -154,10 +158,6 @@ button.theia-button.message-box-dialog-button {
   font-size: 14px;
 }
 
-.uppercase {
-  text-transform: uppercase;
-}
-
 /* High Contrast Theme rules */
 /* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
 .hc-black.hc-theia.theia-hc button.theia-button:hover, 

Diff for: arduino-ide-extension/src/browser/style/list-widget.css

@@ -44,24 +44,12 @@
     height: 100%; /* This has top be 100% down to the `scrollContainer`. */
 }
 
-.filterable-list-container .items-container > div > div:nth-child(odd) {
-    background-color: var(--theia-sideBar-background);
-    filter: contrast(105%);
-}
-
-.filterable-list-container .items-container > div > div:nth-child(even) {
-    background-color: var(--theia-sideBar-background);
-    filter: contrast(95%);
-}
-
-.filterable-list-container .items-container > div > div:hover {
-    background-color: var(--theia-sideBar-background);
-    filter: contrast(90%);
+.filterable-list-container > div > div > div > div > div:focus {
+    border-left: 1px solid;
 }
 
 .component-list-item {
-    padding: 10px 10px 10px 15px;
-    font-size: var(--theia-ui-font-size1);
+    padding: 20px 15px 25px;
 }
 
 .component-list-item:hover {
@@ -74,18 +62,29 @@
     flex-direction: column;
 }
 
-.component-list-item .header .version-info {
+.component-list-item .header .title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.component-list-item .header .title .name {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+}
+
+.component-list-item .header .version {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.component-list-item .header .name {
-    font-weight: bold;
-}
-
 .component-list-item .header .author {
-    font-weight: bold;
     color: var(--theia-panelTitle-inactiveForeground);
 }
 
@@ -95,51 +94,101 @@
 
 .component-list-item .header .version {
     color: var(--theia-panelTitle-inactiveForeground);
+    padding-top: 4px;
 }
 
 .component-list-item .footer .theia-button.install {
     height: auto; /* resets the default Theia button height in the filterable list widget */
 }
 
-.component-list-item .header .installed:before {
-    margin-left: 4px;
+.component-list-item .header .installed-version:before {
+    min-width: 79px;
     display: inline-block;
     justify-self: end;
-    background-color: var(--theia-button-background);
+    text-align: center;
+    background-color: var(--theia-secondaryButton-hoverBackground);
     padding: 2px 4px 2px 4px;
-    font-size: 10px;
-    font-weight: bold;
+    font-size: 12px;
     max-height: calc(1em + 4px);
-    color: var(--theia-button-foreground);
-    content: attr(install);
+    color: var(--theia-titleBar-activeBackground);
+    content: attr(version);
 }
 
-.component-list-item .header .installed:hover:before {
+.component-list-item .header .installed-version:hover:before {
     background-color: var(--theia-button-foreground);
     color: var(--theia-button-background);
-    content: attr(uninstall);
+    content: attr(remove);
+    text-transform: uppercase;
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+    opacity: 1;
+    outline-color: var(--theia-secondaryButton-hoverBackground);
 }
 
-.component-list-item[min-width~="170px"] .footer {
-    padding: 5px 5px 0px 0px;
-    min-height: 35px;
+.component-list-item .content {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column;
+    padding-top: 4px;
+}
+
+.component-list-item .content > p {
+    margin-block-start: unset;
+    margin-block-end: unset;
+
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.component-list-item .content > .info {
+    white-space: nowrap;
 }
 
 .component-list-item .footer {
     flex-direction: column-reverse;
+    padding-top: 8px;
 }
 
 .component-list-item .footer > * {
     display: inline-block;
-    margin: 5px 0px 0px 10px;
+}
+
+.filterable-list-container .separator {
+    display: flex;
+    flex-direction: row;
+}
+
+.filterable-list-container .separator :last-child,
+.filterable-list-container .separator :first-child {
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+}
+
+div.filterable-list-container > div > div > div > div:nth-child(1) > div.separator :first-child,
+div.filterable-list-container > div > div > div > div:nth-child(1) > div.separator :last-child {
+    display: none;
+}
+
+.filterable-list-container .separator .line {
+    max-height: 1px;
+    height: 1px;
+    background-color: var(--theia-activityBar-inactiveForeground);
+    flex: 1 1 auto;
 }
 
 .component-list-item:hover .footer > label {
     display: inline-block;
     align-self: center;
-    margin: 5px 0px 0px 10px;
 }
 
 .component-list-item .info a {
@@ -151,13 +200,33 @@
     text-decoration: underline;
 }
 
+.component-list-item .theia-button.secondary.no-border {
+    border: 2px solid var(--theia-button-foreground)
+}
+
+.component-list-item .theia-button.secondary.no-border:hover {
+    border: 2px solid var(--theia-secondaryButton-foreground)
+}
+
+.component-list-item .theia-button {
+    margin-left: 12px;
+}
+
+.component-list-item .theia-select {
+    height: var(--arduino-button-height);
+    min-height: var(--arduino-button-height);
+    width: 65px;
+    min-width: 65px;
+}
+
 /* High Contrast Theme rules */
 /* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
-.hc-black.hc-theia.theia-hc .component-list-item .header .installed:hover:before {
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:hover:before {
     background-color: transparent;
-    outline: 1px dashed var(--theia-focusBorder);    
+    outline: 1px dashed var(--theia-focusBorder);
 }
 
-.hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:before {
+    color: var(--theia-button-background);
     border: 1px solid var(--theia-button-border);
 }

Diff for: arduino-ide-extension/src/browser/style/main.css

@@ -28,8 +28,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 28px;
-    width: 28px;
+    height: var(--arduino-button-height);
+    width: var(--arduino-button-height);
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item .arduino-upload-sketch--toolbar,
@@ -66,8 +66,8 @@
 }
 
 .arduino-tool-icon {
-    height: 28px;
-    width: 28px;
+    height: var(--arduino-button-height);
+    width: var(--arduino-button-height);
 }
 
 .arduino-verify-sketch--toolbar-icon {