G4E-8135-window-sizing-and-schedule-shutdown-restart-fixes

app-config.json

@@ -1,47 +1,49 @@
-{
-  "title": "AppManager-Embedded",
-  "type": "window",
-  "name": "io-connect-toolbar",
-  "shell": true,
-  "details": {
-    "autoInjectAPI": {
-      "enabled": true,
-      "autoInit": {
-        "appManager": "full",
-        "layouts": "fullWaitSnapshot"
-      }
-    },
-    "url": "file://%GDDIR%/assets/app-toolbar/index.html",
-    "mode": "frameless",
-    "top": 5,
-    "left": 5,
-    "isSticky": false,
-    "allowClose": false,
-    "allowMaximize": false,
-    "allowMinimize": false,
-    "allowCollapse": false,
-    "moveAreaPassThroughMouseHover": true,
-    "nativeWindowOpen": "off",
-    "zoom": {
-      "enabled": false
-    },
-    "search": {
-      "enabled": false
-    },
-    "taskbar": {
-      "allowPin": true,
-      "appId": "io-connect-toolbar"
-    },
-    "jumpList": {
-      "enabled": true
-    }
-  },
-  "autoStart": true,
-  "allowMultiple": false,
-  "ignoreSavedLayout": false,
-  "customProperties": {
-    "hideFeedbackButton": true,
-    "hideProfileButton": false,
-    "hideTutorialOnStartup": false
-  }
+{
+    "title": "AppManager-Embedded",
+    "type": "window",
+    "name": "io-connect-toolbar",
+    "shell": true,
+    "details": {
+        "autoInjectAPI": {
+            "enabled": true,
+            "autoInit": {
+                "appManager": "full",
+                "layouts": "fullWaitSnapshot"
+            }
+        },
+        "url": "file://%GDDIR%/assets/app-toolbar/index.html",
+        "mode": "frameless",
+        "top": 100,
+        "left": 100,
+        "width": 60,
+        "height": 48,
+        "isSticky": false,
+        "allowClose": false,
+        "allowMaximize": false,
+        "allowMinimize": false,
+        "allowCollapse": false,
+        "moveAreaPassThroughMouseHover": true,
+        "nativeWindowOpen": "off",
+        "zoom": {
+            "enabled": false
+        },
+        "search": {
+            "enabled": false
+        },
+        "taskbar": {
+            "allowPin": true,
+            "appId": "io-connect-toolbar"
+        },
+        "jumpList": {
+            "enabled": true
+        }
+    },
+    "autoStart": true,
+    "allowMultiple": false,
+    "ignoreSavedLayout": false,
+    "customProperties": {
+        "hideFeedbackButton": true,
+        "hideProfileButton": false,
+        "hideTutorialOnStartup": false
+    }
 }

index.html

@@ -27,7 +27,7 @@
 
     <div class="app">
       <div id="applicationLauncher" class="viewport">
-        <ul class="nav nav-tabs flex-column" column>
+        <ul id="app-manager-menu-items" class="nav nav-tabs flex-column" column>
           <li class="viewport-header">
             <div class="logo draggable">
               <div class="logo-icon">
@@ -84,7 +84,7 @@
               ></span>
               <span class="text-animation">Layouts</span>
             </a>
-            <ul class="layout-menu-tool">
+            <ul id="layouts-menu-items" class="layout-menu-tool">
               <li id="load" class="nav-item" menu-button-id="layout-load">
                 Load
               </li>
@@ -165,7 +165,7 @@ <h5 class="draggable m-0">Load Layouts</h5>
           />
         </div>
         <div class="layout-save-alert-wrapper"></div>
-        <ul class="nav nav-tabs flex-column"></ul>
+        <ul id="load-layouts-list" class="nav nav-tabs flex-column"></ul>
       </div>
 
       <div class="toggle-content hide" id="layout-save" menu-id="layout-save">
@@ -229,7 +229,7 @@ <h5>General Settings</h5>
             <h5>Theme</h5>
           </div>
           <form>
-            <ul class="select theme-select mb-1">
+            <ul id="theme-select" class="select theme-select mb-1">
               <li class="select_items">
                 <input
                   class="select_expand"
@@ -253,7 +253,7 @@ <h5>Theme</h5>
             <h5>Toolbar Length</h5>
           </div>
           <form>
-            <ul class="select length-select mb-2">
+            <ul id="toolbar-length-select" class="select length-select mb-2">
               <li class="select_items">
                 <input
                   class="select_expand"
@@ -348,7 +348,10 @@ <h5>System</h5>
             </div>
             <div class="settings-system-schedule-restart-period">
               <form>
-                <ul class="select restart-period-select">
+                <ul
+                  id="platform-restart-preriod-select"
+                  class="select restart-period-select"
+                >
                   <li class="select_items">
                     <input
                       class="select_expand"
@@ -368,7 +371,10 @@ <h5>System</h5>
             </div>
             <div class="settings-system-schedule-restart-interval">
               <form>
-                <ul class="select restart-interval-select">
+                <ul
+                  id="platform-restart-interval-select"
+                  class="select restart-interval-select"
+                >
                   <li class="select_items">
                     <input
                       class="select_expand"
@@ -410,7 +416,10 @@ <h5>System</h5>
             </div>
             <div class="settings-system-schedule-shutdown-period">
               <form>
-                <ul class="select shutdown-period-select">
+                <ul
+                  id="platform-shutdown-period-select"
+                  class="select shutdown-period-select"
+                >
                   <li class="select_items">
                     <input
                       class="select_expand"
@@ -430,7 +439,10 @@ <h5>System</h5>
             </div>
             <div class="settings-system-schedule-shutdown-interval">
               <form>
-                <ul class="select shutdown-interval-select">
+                <ul
+                  id="platform-shutdown-interval-select"
+                  class="select shutdown-interval-select"
+                >
                   <li class="select_items">
                     <input
                       class="select_expand"
@@ -575,7 +587,7 @@ <h5 class="draggable m-0">Profile</h5>
         </div>
         <div class="p-2 border-bottom border-secondary">
           <h5 class="d-flex justify-content-between">Select Theme</h5>
-          <ul class="select theme-select mb-1">
+          <ul id="platform-theme-select" class="select theme-select mb-1">
             <li class="select_items">
               <input
                 class="select_expand"

js/connect-related.js

@@ -3,18 +3,15 @@ import {
   getSetting,
   getSettings,
   setSetting,
+  toolbarWidth,
 } from './settings.js';
-import {
-  setOrientation,
-  setWindowPosition,
-  setDrawerOpenClasses,
-} from './utils.js';
+import { setOrientation } from './utils.js';
 
 console.time('Glue');
 
 const rxjs = window.rxjs;
 
-var gluePromise = new Promise(async (res, rej) => {
+const gluePromise = new Promise(async (res, rej) => {
   window.addEventListener('load', async () => {
     let glue = await Glue({
       appManager: 'full',
@@ -60,10 +57,10 @@ gluePromise.then(() => {
   trackLayouts();
   trackWorkspaces();
   trackThemeChanges();
-  trackWindowMove();
   trackConnection();
   trackNotificationCount();
   trackNotificationPanelVisibilityChange();
+  trackPlatformShutdown();
 });
 
 async function trackApplications() {
@@ -172,12 +169,31 @@ async function trackThemeChanges() {
   });
 }
 
-async function trackWindowMove() {
+async function trackPlatformShutdown() {
   const glue = await gluePromise;
+  const app = document.querySelector('.app');
+  const viewport = document.querySelector('.viewport');
+
+  const unSubscribe = glue.appManager.onShuttingDown(async () => {
+    try {
+      const isVertical = app.classList.contains('vertical');
+      const bounds = glue.windows.my().bounds;
+
+      await moveMyWindow({
+        left: bounds.left,
+        top: bounds.top,
+        width: isVertical ? toolbarWidth.vertical : bounds.width,
+        height: isVertical ? bounds.height : 48,
+      });
 
-  glue.windows.my().onBoundsChanged(async () => {
-    await setDrawerOpenClasses();
+      app.classList.remove('expanded', 'has-drawer');
+      viewport.classList.remove('expand');
+    } catch (error) {
+      console.error('Failed to set default window size before shutdown', error);
+    }
   });
+
+  return () => unSubscribe();
 }
 
 async function trackNotificationPanelVisibilityChange() {
@@ -409,15 +425,16 @@ const showHideNotificationBadge = (flag) => {
 
 async function openNotificationPanel() {
   const glue = await gluePromise;
-  const panelApp = glue.windows.find(
-    'io-connect-notifications-panel-application'
-  );
+  const isPanelVisible = await glue.notifications.panel.isVisible();
+
+  if (isPanelVisible) {
+    return;
+  }
 
   try {
     await glue.notifications.panel.show();
-    await panelApp.focus();
   } catch (error) {
-    console.error('Failed to open notification panel.', error);
+    console.error('Failed to open notifications panel.', error);
   }
 }
 
@@ -662,9 +679,6 @@ async function getPrefs() {
     });
   }
 
-  await setDrawerOpenClasses();
-  await setWindowPosition();
-
   glue.prefs.subscribe(() => {
     setOrientation();
   });

js/index.js

@@ -32,8 +32,8 @@ import {
 } from './clients-and-instrument-search.js';
 import { getSetting } from './settings.js';
 import { populateSID } from './profile.js';
-import handleScheduledShutdownRestart from './schedule-shutdown-restart.js';
-import { observeSizeChange, setWindowSize } from './window-sizing.js';
+import { handleScheduledShutdownRestart } from './schedule-shutdown-restart.js';
+import { setWindowBounds } from './window-sizing.js';
 
 const rxjs = window.rxjs;
 let {
@@ -84,17 +84,11 @@ async function init() {
   glueModule.registerHotkey();
   glueModule.focusWindow(utils.focusInputAfterWindowRecover);
 
+  await setWindowBounds().catch(console.error);
+
   populateSID();
   showFeedbackPanel();
   showProfilePanel();
-  setWindowSize();
-
-  observeSizeChange(app, (width, height) => {
-    glueModule.moveMyWindow({
-      width,
-      height,
-    });
-  });
 }
 
 function finishLoading() {
@@ -109,13 +103,12 @@ function observeAppElement() {
     attributeOldValue: true,
   };
 
-  function handleAttributeChange(entry) {
+  async function handleAttributeChange(entry) {
     const { attributeName, oldValue, target } = entry;
     const newValue = target.getAttribute(attributeName);
 
     if (attributeName === 'class' && newValue !== oldValue) {
-      utils.setDrawerOpenClasses();
-      setWindowSize(newValue);
+      await setWindowBounds().catch(console.error);
     }
   }