Make UI vscode styled and refactor webview js (#730)

Author: GrahamSH-LLK

vscode-wpilib/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "endOfLine": "crlf",
+  "trailingComma": "es5"
+}

vscode-wpilib/README.md

@@ -16,3 +16,6 @@ TODO
 
 ## Release Notes
 
+## Third Party Licenses
+"vscode-codicons" by Microsoft is licensed under [Creative Commons Attribution 4.0 International](https://github.com/microsoft/vscode-codicons/blob/main/LICENSE)
+

vscode-wpilib/media/codicon.ttf

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+ /* This file contains cherrypicked icons from codicons for size */
+ /* Currently built with everything but the below removed from mappings
+    - trash
+*/
+
+@font-face {
+  font-family: "codicon";
+  font-display: block;
+  src: url("./codicon.ttf?fb200efcd350cfb53f94163fb5066b25") format("truetype");
+}
+
+.codicon[class*="codicon-"] {
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+/*---------------------
+ *  Modifiers
+ *-------------------*/
+
+@keyframes codicon-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.codicon-sync.codicon-modifier-spin,
+.codicon-loading.codicon-modifier-spin,
+.codicon-gear.codicon-modifier-spin {
+  /* Use steps to throttle FPS to reduce CPU usage */
+  animation: codicon-spin 1.5s steps(30) infinite;
+}
+
+.codicon-modifier-disabled {
+  opacity: 0.5;
+}
+
+.codicon-modifier-hidden {
+  opacity: 0;
+}
+
+/* custom speed & easing for loading icon */
+.codicon-loading {
+  animation-duration: 1s !important;
+  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
+}
+
+/*---------------------
+ *  Icons
+ *-------------------*/
+
+.codicon-trash:before {
+  content: "\ea81";
+}

vscode-wpilib/media/icons.css

@@ -1,40 +1,53 @@
-body {
-	background-color: transparent;
+.installed-dependency,
+.available-dependency {
+  margin-bottom: 10px;
+  &:first-of-type {
+    margin-top: 10px;
+  }
 }
-
-.color-list {
-	list-style: none;
-	padding: 0;
+.top-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  &:has(#updateall-action) {
+      margin-top: 4px;
+  }
 }
 
-.color-entry {
-	width: 100%;
-	display: flex;
-	margin-bottom: 0.4em;
-	border: 1px solid var(--vscode-input-border);
+#updateall-action {
+  width: 100%;
 }
-
-.color-preview {
-	width: 2em;
-	height: 2em;
+.name {
+  font-weight: 600;
 }
-
-.color-preview:hover {
-	outline: inset white;
+.downloads {
+  display: flex;
+  align-items: center;
 }
-
-.color-input {
-	display: block;
-	flex: 1;
-	width: 100%;
-	color: var(--vscode-input-foreground);
-	background-color: var(--vscode-input-background);
-	border: none;
-	padding: 0 0.6em;
+.icon {
+  margin-left: 5px;
+}
+.details {
+  margin-top: 5px;
+  color: var(--vscode-descriptionForeground);
+}
+.update {
+  display: flex;
+  gap: 4px;
+}
+.uninstall-button {
+  padding: 4px;
+  & > vscode-icon {
+    margin-right: 4px !important;
+    margin-left: 4px !important;
+  }
 }
 
-.add-color-button {
-	display: block;
-	border: none;
-	margin: 0 auto;
+vscode-collapsible::part(body) {
+  overflow: visible;
 }
+
+vscode-single-select {
+  flex-shrink: 2;
+}