[PORT] scss cleanup and some chat things

tgui/packages/tgui-panel/chat/renderer.jsx

@@ -129,12 +129,17 @@ class ChatRenderer {
     /** @type {HTMLElement} */
     this.scrollNode = null;
     this.scrollTracking = true;
+    this.lastScrollHeight = 0;
     this.handleScroll = (type) => {
       const node = this.scrollNode;
+      if (!node) {
+        return;
+      }
       const height = node.scrollHeight;
       const bottom = node.scrollTop + node.offsetHeight;
       const scrollTracking =
-        Math.abs(height - bottom) < SCROLL_TRACKING_TOLERANCE;
+        Math.abs(height - bottom) < SCROLL_TRACKING_TOLERANCE ||
+        this.lastScrollHeight === 0;
       if (scrollTracking !== this.scrollTracking) {
         this.scrollTracking = scrollTracking;
         this.events.emit('scrollTrackingChanged', scrollTracking);
@@ -163,12 +168,6 @@ class ChatRenderer {
     else {
       this.rootNode = node;
     }
-    // Find scrollable parent
-    this.scrollNode = findNearestScrollableParent(this.rootNode);
-    this.scrollNode.addEventListener('scroll', this.handleScroll);
-    setTimeout(() => {
-      this.scrollToBottom();
-    });
     // Flush the queue
     this.tryFlushQueue();
   }
@@ -182,6 +181,7 @@ class ChatRenderer {
     if (this.isReady() && this.queue.length > 0) {
       this.processBatch(this.queue);
       this.queue = [];
+      this.scrollToBottom();
     }
   }
 
@@ -281,6 +281,7 @@ class ChatRenderer {
   }
 
   scrollToBottom() {
+    this.tryFindScrollable();
     // scrollHeight is always bigger than scrollTop and is
     // automatically clamped to the valid range.
     this.scrollNode.scrollTop = this.scrollNode.scrollHeight;
@@ -330,6 +331,17 @@ class ChatRenderer {
     return null;
   }
 
+  tryFindScrollable() {
+    // Find scrollable parent
+    if (this.rootNode) {
+      if (!this.scrollNode || this.scrollNode.scrollHeight === undefined) {
+        this.scrollNode = findNearestScrollableParent(this.rootNode);
+        this.scrollNode.addEventListener('scroll', this.handleScroll);
+        logger.debug(`reset scrollNode to ${this.scrollNode}`);
+      }
+    }
+  }
+
   processBatch(batch, options = {}) {
     const { prepend, notifyListeners = true } = options;
     const now = Date.now();
@@ -342,6 +354,10 @@ class ChatRenderer {
       }
       return;
     }
+    // Store last scroll position
+    if (this.scrollNode) {
+      this.lastScrollHeight = this.scrollNode.scrollHeight;
+    }
     // Insert messages
     const fragment = document.createDocumentFragment();
     const countByType = {};

tgui/packages/tgui-panel/panelFocus.js → tgui/packages/tgui-panel/panelFocus.ts

@@ -19,9 +19,9 @@ const deferredFocusMap = () => setTimeout(() => focusMap());
 
 export const setupPanelFocusHacks = () => {
   let focusStolen = false;
-  let clickStartPos = null;
+  let clickStartPos: number[] | null = null;
   window.addEventListener('focusin', (e) => {
-    focusStolen = canStealFocus(e.target);
+    focusStolen = canStealFocus(e.target as HTMLElement);
   });
   window.addEventListener('mousedown', (e) => {
     clickStartPos = [e.screenX, e.screenY];
@@ -33,6 +33,9 @@ export const setupPanelFocusHacks = () => {
       if (dist >= MIN_SELECTION_DISTANCE) {
         focusStolen = true;
       }
+      if (document.activeElement?.className?.includes('Button')) {
+        focusStolen = true;
+      }
     }
     if (!focusStolen) {
       deferredFocusMap();

tgui/packages/tgui/styles/functions.scss

@@ -26,17 +26,6 @@
 //  Color
 // --------------------------------------------------------
 
-// Increases perceptual color lightness.
-@function lighten($color, $percent) {
-  $scaled: hsl(
-    color.hue($color),
-    color.saturation($color),
-    color.lightness($color) * (1 + num($percent))
-  );
-  $mixed: color.mix(#ffffff, $color, 100% * num($percent));
-  @return color.mix($scaled, $mixed, 75%);
-}
-
 // Returns the NTSC luminance of `$color` as a float (between 0 and 1).
 // 1 is pure white, 0 is pure black.
 @function luminance($color) {

tgui/packages/tgui/styles/interfaces/Mecha.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use '../base.scss';
 @use '../colors.scss';
 @use '../functions.scss' as *;
@@ -37,7 +39,7 @@ $color-danger: #c92020 !default;
   padding-left: 0 !important;
   padding-right: 0 !important;
   &:hover {
-    background-color: lighten($color-danger, 15%) !important;
-    border-color: lighten($color-danger, 15%) !important;
+    background-color: color.adjust($color-danger, $lightness: 15%) !important;
+    border-color: color.adjust($color-danger, $lightness: 15%) !important;
   }
 }

tgui/packages/tgui/styles/interfaces/NuclearBomb.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use '../base.scss';
 @use '../colors.scss';
 @use '../functions.scss' as *;
@@ -27,8 +29,11 @@ $background-beige: #e8e4c9;
   background-color: $background-beige;
   border-color: $background-beige;
   &:hover {
-    background-color: lighten($background-beige, 15%) !important;
-    border-color: lighten($background-beige, 15%) !important;
+    background-color: color.adjust(
+      $background-beige,
+      $lightness: 15%
+    ) !important;
+    border-color: color.adjust($background-beige, $lightness: 15%) !important;
   }
 }
 
@@ -42,17 +47,17 @@ $background-beige: #e8e4c9;
   background-color: $color-caution !important;
   border-color: $color-caution !important;
   &:hover {
-    background-color: lighten($color-caution, 15%) !important;
-    border-color: lighten($color-caution, 15%) !important;
+    background-color: color.adjust($color-caution, $lightness: 15%) !important;
+    border-color: color.adjust($color-caution, $lightness: 15%) !important;
   }
 }
 
 .NuclearBomb__Button--C {
   background-color: $color-danger !important;
   border-color: $color-danger !important;
   &:hover {
-    background-color: lighten($color-danger, 15%) !important;
-    border-color: lighten($color-danger, 15%) !important;
+    background-color: color.adjust($color-danger, $lightness: 15%) !important;
+    border-color: color.adjust($color-danger, $lightness: 15%) !important;
   }
 }
 

tgui/packages/tgui/styles/layouts/Window.scss

@@ -67,7 +67,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: rgba(lighten(base.$color-bg, 30%), 0.25);
+  background-color: rgba(color.adjust(base.$color-bg, $lightness: 30%), 0.25);
   pointer-events: none;
 }