Redesign resource tree (#1865)

* start redesign work

* add left padding to all tree nodes

* fiddling with padding

* align tab bar line with first item in resource tree

* final touch ups

* fix a strange password manager autofill prompt

* add keyboard shortcuts

* revert testing change

* nudge messagebar to layout row height

* tidy up

* switch to Allotment to stop ResizeObserver issues with monaco

* refmt and fix lints

* fabric touch-ups

* update snapshots

* remove explicit react-icons dependency

* reinstall packages

* remove background from FluentProvider

* fix alignment of message bar

* undo temporary workaround

* restore refresh button

* fix e2e tests and reformat

* fix compiler error

* remove uiw/react-split

* uncomment selection change on expand

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -0,0 +1,65 @@
+import { makeStyles, shorthands, treeItemLevelToken } from "@fluentui/react-components";
+import { cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
+
+export type TreeStyleName = keyof ReturnType<typeof useTreeStyles>;
+
+const treeIconWidth = "--cosmos-Tree--iconWidth" as const;
+const leafNodeSpacing = "--cosmos-Tree--leafNodeSpacing" as const;
+const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
+
+export const useTreeStyles = makeStyles({
+  treeContainer: {
+    height: "100%",
+    ...shorthands.overflow("auto"),
+  },
+  tree: {
+    width: "fit-content",
+    minWidth: "100%",
+    rowGap: "0px",
+    paddingTop: "0px",
+    [treeIconWidth]: "20px",
+    [leafNodeSpacing]: "24px",
+  },
+  nodeIcon: {
+    width: `var(${treeIconWidth})`,
+    height: `var(${treeIconWidth})`,
+  },
+  treeItem: {},
+  nodeLabel: {},
+  treeItemLayout: {
+    fontSize: tokens.fontSizeBase300,
+    height: tokens.layoutRowHeight,
+    ...cosmosShorthands.borderBottom(),
+    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
+
+    // Some sneaky CSS variables stuff to change the background color of the action button on hover.
+    [actionButtonBackground]: tokens.colorNeutralBackground1,
+    "&:hover": {
+      [actionButtonBackground]: tokens.colorNeutralBackground1Hover,
+    },
+  },
+  actionsButtonContainer: {
+    position: "sticky",
+    right: 0,
+  },
+  actionsButton: {
+    backgroundColor: `var(${actionButtonBackground})`,
+  },
+  treeItemLayoutNoIcon: {
+    // Pad the text out by the level, the width of the icon, AND the usual spacing between the icon and the level.
+    // It would be nice to see if we can use Grid layout or something here, but that would require overriding a lot of the existing Tree component behavior.
+    paddingLeft: `calc((var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL}) + var(${leafNodeSpacing}))`,
+  },
+  selectedItem: {
+    backgroundColor: tokens.colorNeutralBackground1Selected,
+  },
+  databaseNode: {
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  collectionNode: {
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  loadMoreNode: {
+    color: tokens.colorBrandForegroundLink,
+  },
+});