app border fixup (no transparency), terminal background image POC (#378)

* use native border (remove transparency from app window), remove css borders, remove default --term variables, force setClientData to set --term font variables on first set.

* terminal background images

public/themes/default.css

@@ -7,12 +7,14 @@
     --fa-style-family: "Font Awesome 6 Sharp";
 
     /* these variables are overridden by user settings */
+    /*
     --termfontfamily: "Hack";
     --termfontsize: 13px;
-    --termlineheight: 18px;
-    --termpad: 9px; /* padding value (scaled to termfontsize) */
+    --termlineheight: 15px;
+    --termpad: 7px;
     --termfontsize-sm: 11px;
-    --termlineheight-sm: 15px;
+    --termlineheight-sm: 13px;
+    */
 
     /* base fonts */
     --base-font: normal 15px "Lato", sans-serif;

public/themes/term-dark.css

@@ -23,5 +23,5 @@
     --term-gray: #8b918a;
     --term-cmdtext: #f0f0f0;
     --term-foreground: #c1c1c1;
-    --term-background: #000000;
+    --term-background: #00000000;
 }

src/app/app.less

@@ -28,6 +28,10 @@ body textarea.textarea {
     color: var(--app-text-color);
     background-color: var(--input-bg-color);
 
+    &:focus {
+        box-shadow: none;
+    }
+
     &::placeholder {
         color: var(--input-placeholder-color);
     }
@@ -47,27 +51,6 @@ body input.input {
 
 // platform overrides
 .platform-darwin {
-    border-radius: var(--app-border-radius-darwin);
-
-    .main-content {
-        border-radius: var(--app-border-radius-darwin);
-    }
-
-    .main-content > :first-child {
-        border-top-left-radius: var(--app-border-radius-darwin);
-        border-bottom-left-radius: var(--app-border-radius-darwin);
-    }
-
-    .main-content > .collapsed:first-child + div {
-        border-top-left-radius: var(--app-border-radius-darwin);
-        border-bottom-left-radius: var(--app-border-radius-darwin);
-    }
-
-    .main-content > :last-child {
-        border-top-right-radius: var(--app-border-radius-darwin);
-        border-bottom-right-radius: var(--app-border-radius-darwin);
-    }
-
     .logo-button-container {
         width: var(--floating-logo-width-darwin);
     }
@@ -279,7 +262,6 @@ a.a-block {
     display: flex;
     flex-direction: column;
     background-color: var(--app-maincontent-bg-color);
-    border-top: 1px solid var(--app-border-color);
 
     .main-content {
         display: flex;

src/app/common/elements/mainview.less

@@ -3,9 +3,6 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    border-bottom: 1px solid var(--app-border-color);
-    border-right: 1px solid var(--app-border-color);
-    border-left: 1px solid var(--app-border-color);
     background-color: var(--app-bg-color);
 
     &.is-hidden {
@@ -36,11 +33,6 @@
             font-size: var(--title-font-size);
         }
     }
-
-    .bottom-border {
-        border-bottom: 1px solid var(--app-border-color);
-        margin-bottom: 10px;
-    }
 }
 
 // This ensures the tab bar does not collide with the floating logo. The floating logo sits above the sidebar when it is not collapsed, so no additional margin is needed in that case.

src/app/sidebar/sidebar.less

@@ -8,8 +8,6 @@
     line-height: 20px;
     backdrop-filter: blur(4px);
     z-index: 20;
-    border-left: 1px solid var(--app-border-color);
-    border-bottom: 1px solid var(--app-border-color);
     font-size: var(--sidebar-font-size);
     font-family: var(--base-font-family);
     font-weight: var(--sidebar-font-weight);

src/app/workspace/cmdinput/textareainput.tsx

@@ -581,7 +581,7 @@ class TextAreaInput extends React.Component<{ screen: Screen; onHeightChange: ()
         }
         let termFontSize = GlobalModel.getTermFontSize();
         let fontSize = getMonoFontSize(termFontSize);
-        let termPad = Math.floor(fontSize.height / 2);
+        let termPad = fontSize.pad;
         let computedInnerHeight = displayLines * fontSize.height + 2 * termPad;
         let computedOuterHeight = computedInnerHeight + 2 * termPad;
         let shellType: string = "";

src/app/workspace/workspace.less

@@ -1,5 +1,19 @@
 .session-view {
     overflow: hidden;
+    position: relative;
+
+    &:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: var(--tab-bg-image-opacity, 0.5);
+        background-image: var(--tab-bg-image-url, none);
+        background-size: cover;
+    }
 
     .center-message {
         display: flex;

src/electron/emain.ts

@@ -322,7 +322,6 @@ function createMainWindow(clientData: ClientDataType | null): Electron.BrowserWi
         height: bounds.height,
         minWidth: 800,
         minHeight: 600,
-        transparent: true,
         icon: unamePlatform == "linux" ? "public/logos/wave-logo-dark.png" : undefined,
         webPreferences: {
             preload: path.join(getElectronAppBasePath(), DistDir, "preload.js"),

src/models/model.ts

@@ -1181,6 +1181,7 @@ class Model {
     }
 
     setClientData(clientData: ClientDataType) {
+        let curClientDataIsNull = this.clientData.get() == null;
         let newFontFamily = clientData?.feopts?.termfontfamily;
         if (newFontFamily == null) {
             newFontFamily = appconst.DefaultTermFontFamily;
@@ -1189,7 +1190,7 @@ class Model {
         if (newFontSize == null) {
             newFontSize = appconst.DefaultTermFontSize;
         }
-        const ffUpdated = newFontFamily != this.getTermFontFamily();
+        const ffUpdated = curClientDataIsNull || newFontFamily != this.getTermFontFamily();
         const fsUpdated = newFontSize != this.getTermFontSize();
 
         let newTheme = clientData?.feopts?.theme;