update

package.json

@@ -43,8 +43,7 @@
     "sass": "^1.63.6"
   },
   "devDependencies": {
-    "electron": "^28.1.3",
+    "electron": "^29.1.5",
     "electron-builder": "^24.9.1"
-  },
+  }
-  "packageManager": "yarn@4.0.2"
 }

src/base/scripts/webviews/preload.js

@@ -1,36 +1,71 @@
 // Set the title of the tab name
-/// Instead of the tab name being "PAGE_NAME - Penpot", this script will remove the " - Penpot" portion.
+/// Instead of the tab name being "PROJECT_NAME - Penpot", this script will remove the " - Penpot" portion.
-function setTitleDash() {document.title = "Penpot Dashboard"}
+function SetTitleToDash() {
-function setTitle() {document.title = document.querySelector("#workspace > header > div.left-area > div.menu-section > div.project-tree > span:nth-child(2)").innerText}
+    document.title = "Dashboard"
+}
 
-function titleModified() {
+function SetTitleToProject() {
-    if (document.querySelector(".dashboard-layout") !== null) {
+    document.title = document.querySelector(".main_ui_workspace_left_header__file-name").innerText
-        setTitleDash() // Set title to "Penpot Dashboard"
+}
-    }
+
-    if (document.querySelector("#workspace") !== null) {
+
-        setTitle() // Set title to only project name
+function _waitForElement(selector, delay = 50, tries = 100) {
-    }
+    const element = document.querySelector(selector);
-    else {}
+
+    if (!window[`__${selector}`]) {
+        window[`__${selector}`] = 0;
+        window[`__${selector}__delay`] = delay;
+        window[`__${selector}__tries`] = tries;
+    }
+
+    function _search() {
+        return new Promise((resolve) => {
+            window[`__${selector}`]++;
+            setTimeout(resolve, window[`__${selector}__delay`]);
+        });
+    }
+
+    if (element === null) {
+        if (window[`__${selector}`] >= window[`__${selector}__tries`]) {
+            window[`__${selector}`] = 0;
+            return Promise.resolve(null);
+        }
+
+        return _search().then(() => _waitForElement(selector));
+    } else {
+        return Promise.resolve(element);
+    }
+}
+
+
+
+
+function UpdateTitle() {
+    if (window.location.href.indexOf("#/workspace") != -1) {
+        const start = (async () => {
+            const $el = await _waitForElement(`.main_ui_workspace_left_header__file-name`);
+            SetTitleToProject()
+        })();
+    }
 }
 
 
-/// Credit: https://stackoverflow.com/a/2499119/15103862
 window.onload = function() {
-    var titleEl = document.getElementsByTagName("title")[0]
+    var titleEl = document.getElementsByTagName("title")[0];
-    var docEl = document.documentElement
+    var docEl = document.documentElement;
 
     if (docEl && docEl.addEventListener) {
         docEl.addEventListener("DOMSubtreeModified", function(evt) {
-            var t = evt.target
+            var t = evt.target;
             if (t === titleEl || (t.parentNode && t.parentNode === titleEl)) {
-                titleModified()
+                UpdateTitle()
             }
-        }, false)
+        }, false);
     } else {
         document.onpropertychange = function() {
             if (window.event.propertyName == "title") {
-                titleModified()
+                UpdateTitle()
             }
+        };
     }
-    }
+};
-}

src/base/styles/index.css

@@ -1 +1 @@
-body{background:#1d1f20;font-family:arial}.titlebar{position:fixed;top:0px;right:0px;width:max-content;text-align:right;margin:4px 4px 0px 0px;cursor:default;z-index:5;app-region:no-drag;display:flex}.titlebar .linux-titlebar{display:none}.titlebar button{width:32px;height:32px;font-size:0px;border:none;border-radius:6px;background:rgba(0,0,0,0)}.titlebar button:hover{background:#303236}.titlebar button svg{width:16px;height:16px;filter:invert(1)}sl-include.alert-modal{position:fixed;z-index:50;bottom:24px;left:50%;transform:translate(-50%);width:max-content}drag{position:fixed;top:0px;left:0px;width:100%;height:50px;app-region:drag;z-index:1}.dropdown-modal{position:fixed;top:40px;right:0px;z-index:50;display:none;flex-direction:column;background:#242428;border-radius:6px;border:1px #36363b solid;margin:6px;min-width:250px;width:300px;transition:1s all}.dropdown-modal div:nth-child(1)>div.settings-section-header{border-radius:4px 4px 0px 0px}.dropdown-modal .settings-section-header{background:#303236;padding:6px 0px 6px 16px;font-size:12px}.dropdown-modal .settings-section-header h2{margin:0px}.dropdown-modal .settings-section-content{display:flex;margin:12px}.dropdown-modal .settings-section-content input{padding:6px 12px;border-radius:4px;border:1px #656565 solid;margin-right:6px}.dropdown-modal .settings-section-content input#InstanceSaveButton{background:#575151;color:#fff;border:none;border-radius:4px;padding:0px 12px}
+body{background:#18181a;font-family:arial}.titlebar{position:fixed;top:0px;right:0px;width:max-content;text-align:right;margin:4px 4px 0px 0px;cursor:default;z-index:5;app-region:no-drag;display:flex}.titlebar .linux-titlebar{display:none}.titlebar button{width:32px;height:32px;font-size:0px;border:none;border-radius:6px;background:rgba(0,0,0,0)}.titlebar button:hover{background:#303236}.titlebar button svg{width:16px;height:16px;filter:invert(1)}sl-include.alert-modal{position:fixed;z-index:50;bottom:24px;left:50%;transform:translate(-50%);width:max-content}drag{position:fixed;top:0px;left:0px;width:100%;height:50px;app-region:drag;z-index:1}.dropdown-modal{position:fixed;top:40px;right:0px;z-index:50;display:none;flex-direction:column;background:#242428;border-radius:6px;border:1px #36363b solid;margin:6px;min-width:250px;width:300px;transition:1s all}.dropdown-modal div:nth-child(1)>div.settings-section-header{border-radius:4px 4px 0px 0px}.dropdown-modal .settings-section-header{background:#303236;padding:6px 0px 6px 16px;font-size:12px}.dropdown-modal .settings-section-header h2{margin:0px}.dropdown-modal .settings-section-content{display:flex;margin:12px}.dropdown-modal .settings-section-content input{padding:6px 12px;border-radius:4px;border:1px #656565 solid;margin-right:6px}.dropdown-modal .settings-section-content input#InstanceSaveButton{background:#575151;color:#fff;border:none;border-radius:4px;padding:0px 12px}

src/base/styles/index.scss

@@ -1,5 +1,5 @@
 body {
-    background: #1d1f20;
+    background: #18181a;
     font-family: arial;
 }
 

src/process/menu.js

@@ -95,7 +95,7 @@ module.exports = {
                 label: 'Open Tab Developer Tools',
                 accelerator: 'CmdOrCtrl+Shift+D',
                 click: () => {
-                    mainWindow.webContents.executeJavaScript(`document.querySelector("body > tab-group").shadowRoot.querySelector("div > div > webview.visible").openDevTools()`)
+                    mainWindow.webContents.executeJavaScript(`document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > div > webview.visible").openDevTools()`)
                 }},
                 { type: 'separator' },
                 { role: 'resetZoom' },