From 7bc48c5074a79e889e86908bbd49046060b475c0 Mon Sep 17 00:00:00 2001
From: Margen67 <Margen67@users.noreply.github.com>
Date: Mon, 17 Feb 2025 07:10:00 -0800
Subject: [PATCH] Formatting/cleanup (#2594)

---
 .github/workflows/eslint.yaml                 |   7 +-
 .github/workflows/format.yaml                 |   2 +-
 .github/workflows/i18n-custom-nodes.yaml      |  21 +--
 .github/workflows/i18n.yaml                   |   1 +
 .github/workflows/release.yaml                |  18 +-
 .github/workflows/test-browser-exp.yaml       |   1 -
 .github/workflows/test-ui.yaml                |   9 +-
 .github/workflows/vitest.yaml                 |  12 +-
 browser_tests/fixtures/ComfyPage.ts           |   4 +-
 src/components/common/RefreshButton.vue       |   2 +-
 .../dialog/content/SettingDialogContent.vue   |   2 +-
 src/components/node/NodePreview.vue           |   2 +-
 .../searchbox/NodeSearchBoxPopover.vue        |   2 +-
 src/components/searchbox/NodeSearchItem.vue   |   2 +-
 .../tabs/modelLibrary/DownloadItem.vue        |   2 +-
 .../tabs/modelLibrary/ModelTreeLeaf.vue       |   2 +-
 src/extensions/core/groupNodeManage.css       | 172 +++++++++---------
 src/extensions/core/load3d/Load3d.ts          |   4 +-
 src/extensions/core/maskeditor.ts             |   4 +-
 src/scripts/ui/menu/menu.css                  |   3 +-
 src/types/litegraph-core-augmentation.d.ts    |   2 +-
 tests-ui/extractExamples.ts                   |   4 +-
 22 files changed, 129 insertions(+), 149 deletions(-)

diff --git a/.github/workflows/eslint.yaml b/.github/workflows/eslint.yaml
index 66f6c22ad..162fc7c29 100644
--- a/.github/workflows/eslint.yaml
+++ b/.github/workflows/eslint.yaml
@@ -2,10 +2,7 @@ name: ESLint
 
 on:
   pull_request:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev* ]
 
 jobs:
   eslint:
@@ -15,6 +12,6 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
     - run: npm ci
     - run: npm run lint
diff --git a/.github/workflows/format.yaml b/.github/workflows/format.yaml
index 892cf9f15..316a7f49b 100644
--- a/.github/workflows/format.yaml
+++ b/.github/workflows/format.yaml
@@ -14,7 +14,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
 
     - name: Install dependencies
       run: npm ci
diff --git a/.github/workflows/i18n-custom-nodes.yaml b/.github/workflows/i18n-custom-nodes.yaml
index e121421f2..5678333ac 100644
--- a/.github/workflows/i18n-custom-nodes.yaml
+++ b/.github/workflows/i18n-custom-nodes.yaml
@@ -1,4 +1,5 @@
 name: Update Locales for given custom node repository
+
 on:
   workflow_dispatch:
     inputs:
@@ -23,19 +24,19 @@ jobs:
     - name: Checkout ComfyUI
       uses: actions/checkout@v4
       with:
-        repository: 'comfyanonymous/ComfyUI'
-        path: 'ComfyUI'
+        repository: comfyanonymous/ComfyUI
+        path: ComfyUI
         ref: master
     - name: Checkout ComfyUI_frontend
       uses: actions/checkout@v4
       with:
-        repository: 'Comfy-Org/ComfyUI_frontend'
-        path: 'ComfyUI_frontend'
+        repository: Comfy-Org/ComfyUI_frontend
+        path: ComfyUI_frontend
     - name: Checkout ComfyUI_devtools
       uses: actions/checkout@v4
       with:
-        repository: 'Comfy-Org/ComfyUI_devtools'
-        path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
+        repository: Comfy-Org/ComfyUI_devtools
+        path: ComfyUI/custom_nodes/ComfyUI_devtools
     - name: Checkout custom node repository
       uses: actions/checkout@v4
       with:
@@ -43,7 +44,7 @@ jobs:
         path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
     - uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
     - uses: actions/setup-python@v4
       with:
         python-version: '3.10'
@@ -53,14 +54,12 @@ jobs:
         pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
         pip install -r requirements.txt
         pip install wait-for-it
-      shell: bash
       working-directory: ComfyUI
     - name: Install custom node requirements
       run: |
         if [ -f "requirements.txt" ]; then
           pip install -r requirements.txt
         fi
-      shell: bash
       working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
     - name: Build & Install ComfyUI_frontend
       run: |
@@ -68,14 +67,12 @@ jobs:
         npm run build
         rm -rf ../ComfyUI/web/*
         mv dist/* ../ComfyUI/web/
-      shell: bash
       working-directory: ComfyUI_frontend
     - name: Start ComfyUI server
       run: |
         python main.py --cpu --multi-user &
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
-      shell: bash
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
@@ -153,7 +150,7 @@ jobs:
         echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
         git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
 
-    - name: Create PR 
+    - name: Create PR
       working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
       run: |
         # Create PR using gh cli
diff --git a/.github/workflows/i18n.yaml b/.github/workflows/i18n.yaml
index 63e766641..554deda22 100644
--- a/.github/workflows/i18n.yaml
+++ b/.github/workflows/i18n.yaml
@@ -1,4 +1,5 @@
 name: Update Locales
+
 on:
   pull_request:
     branches: [ main, master, dev* ]
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index cc47c7fb6..dc4aee272 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -2,12 +2,10 @@ name: Create Release Draft
 
 on:
   pull_request:
-    types: [closed]
-    branches:
-      - main
-      - master
+    types: [ closed ]
+    branches: [ main, master ]
     paths:
-      - "package.json"
+      - 'package.json'
 
 jobs:
   draft_release:
@@ -20,7 +18,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 'lts/*'
       - name: Get current version
         id: current_version
         run: echo ::set-output name=version::$(node -p "require('./package.json').version")
@@ -42,7 +40,7 @@ jobs:
           tag_name: v${{ steps.current_version.outputs.version }}
           draft: false
           prerelease: false
-          make_latest: "true"
+          make_latest: true
           generate_release_notes: true
   publish_types:
     runs-on: ubuntu-latest
@@ -53,12 +51,12 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
-          registry-url: "https://registry.npmjs.org"
+          node-version: 'lts/*'
+          registry-url: https://registry.npmjs.org
       - run: npm ci
       - run: npm run build:types
       - name: Publish package
         run: npm publish --access public
-        working-directory: ./dist
+        working-directory: dist
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/test-browser-exp.yaml b/.github/workflows/test-browser-exp.yaml
index 09c52d261..a4a651e70 100644
--- a/.github/workflows/test-browser-exp.yaml
+++ b/.github/workflows/test-browser-exp.yaml
@@ -1,5 +1,4 @@
 # Setting test expectation screenshots for Playwright
-
 name: Update Playwright Expectations
 
 on:
diff --git a/.github/workflows/test-ui.yaml b/.github/workflows/test-ui.yaml
index 1681712c4..dfde4ffd2 100644
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/test-ui.yaml
@@ -2,14 +2,9 @@ name: Tests CI
 
 on:
   push:
-    branches:
-      - main
-      - master
+    branches: [ main, master ]
   pull_request:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev* ]
 
 jobs:
   jest-tests:
diff --git a/.github/workflows/vitest.yaml b/.github/workflows/vitest.yaml
index 920c426ca..164635cbb 100644
--- a/.github/workflows/vitest.yaml
+++ b/.github/workflows/vitest.yaml
@@ -2,15 +2,9 @@ name: Vitest Tests
 
 on:
   push:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev* ]
   pull_request:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev* ]
 
 jobs:
   test:
@@ -22,7 +16,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
 
     - name: Install dependencies
       run: npm ci
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index 207305a24..5553ac342 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -278,8 +278,8 @@ export class ComfyPage {
     await this.page.addStyleTag({
       content: `
       * {
-				font-family: 'Roboto Mono', 'Noto Color Emoji';
-			}`
+        font-family: 'Roboto Mono', 'Noto Color Emoji';
+      }`
     })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
diff --git a/src/components/common/RefreshButton.vue b/src/components/common/RefreshButton.vue
index 0237939fb..1b0d21aad 100644
--- a/src/components/common/RefreshButton.vue
+++ b/src/components/common/RefreshButton.vue
@@ -1,6 +1,6 @@
 <!--
   A refresh button that disables and shows a progress spinner whilst active.
-  
+
   Usage:
   ```vue
     <RefreshButton
diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index afacf353e..482ec0127 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -280,7 +280,7 @@ watch(activeCategory, (_, oldValue) => {
 
 <style>
 .settings-tab-panels {
-  padding-top: 0px !important;
+  padding-top: 0 !important;
 }
 </style>
 
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index fda7e9c47..d61e67762 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -240,7 +240,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
 }
 
 ._sb_col {
-  border: 0px solid #000;
+  border: 0 solid #000;
   display: flex;
   align-items: flex-end;
   flex-direction: row-reverse;
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index ec0f7856a..b4e944006 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -254,7 +254,7 @@ useEventListener(document, 'litegraph:canvas', canvasEventHandler)
 }
 @media all and (max-width: 768px) {
   .invisible-dialog-root {
-    margin-left: 0px;
+    margin-left: 0;
   }
 }
 
diff --git a/src/components/searchbox/NodeSearchItem.vue b/src/components/searchbox/NodeSearchItem.vue
index d94720487..aa6f12539 100644
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -92,7 +92,7 @@ const props = defineProps<{
   color: var(--p-primary-contrast-color);
   font-weight: bold;
   border-radius: 0.25rem;
-  padding: 0rem 0.125rem;
+  padding: 0 0.125rem;
   margin: -0.125rem 0.125rem;
 }
 </style>
diff --git a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
index 471cced8e..dc9bcec1a 100644
--- a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
+++ b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
@@ -17,7 +17,7 @@
       v-if="['in_progress', 'paused', 'completed'].includes(download.status)"
     >
       <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
-           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499     
+           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
       -->
       <ProgressBar
         class="flex-1"
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 3635059d4..451cc6522 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -133,7 +133,7 @@ onUnmounted(() => {
   left: 0;
   height: 1.5rem;
   vertical-align: top;
-  width: 0px;
+  width: 0;
 }
 .model-lib-model-icon {
   background-size: cover;
diff --git a/src/extensions/core/groupNodeManage.css b/src/extensions/core/groupNodeManage.css
index 5470ecb5e..11c2e7f54 100644
--- a/src/extensions/core/groupNodeManage.css
+++ b/src/extensions/core/groupNodeManage.css
@@ -1,149 +1,149 @@
 .comfy-group-manage {
-	background: var(--bg-color);
-	color: var(--fg-color);
-	padding: 0;
-	font-family: Arial, Helvetica, sans-serif;
-	border-color: black;
-	margin: 20vh auto;
-	max-height: 60vh;
+  background: var(--bg-color);
+  color: var(--fg-color);
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  border-color: black;
+  margin: 20vh auto;
+  max-height: 60vh;
 }
 .comfy-group-manage-outer {
-	max-height: 60vh;
-	min-width: 500px;
-	display: flex;
-	flex-direction: column;
+  max-height: 60vh;
+  min-width: 500px;
+  display: flex;
+  flex-direction: column;
 }
 .comfy-group-manage-outer > header {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	justify-content: space-between;
-	background: var(--comfy-menu-bg);
-	padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+  background: var(--comfy-menu-bg);
+  padding: 15px 20px;
 }
 .comfy-group-manage-outer > header select {
-	background: var(--comfy-input-bg);
-	border: 1px solid var(--border-color);
-	color: var(--input-text);
-	padding: 5px 10px;
-	border-radius: 5px;
+  background: var(--comfy-input-bg);
+  border: 1px solid var(--border-color);
+  color: var(--input-text);
+  padding: 5px 10px;
+  border-radius: 5px;
 }
 .comfy-group-manage h2 {
-	margin: 0;
-	font-weight: normal;
+  margin: 0;
+  font-weight: normal;
 }
 .comfy-group-manage main {
-	display: flex;
-	overflow: hidden;
+  display: flex;
+  overflow: hidden;
 }
 .comfy-group-manage .drag-handle {
-	font-weight: bold;
+  font-weight: bold;
 }
 .comfy-group-manage-list {
-	border-right: 1px solid var(--comfy-menu-bg);
+  border-right: 1px solid var(--comfy-menu-bg);
 }
 .comfy-group-manage-list ul {
-	margin: 40px 0 0;
-	padding: 0;
-	list-style: none;
+  margin: 40px 0 0;
+  padding: 0;
+  list-style: none;
 }
 .comfy-group-manage-list-items {
-	max-height: calc(100% - 40px);
-	overflow-y: scroll;
-	overflow-x: hidden;
+  max-height: calc(100% - 40px);
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 .comfy-group-manage-list li {
-	display: flex;
-	padding: 10px 20px 10px 10px;
-	cursor: pointer;
-	align-items: center;
-	gap: 5px;
+  display: flex;
+  padding: 10px 20px 10px 10px;
+  cursor: pointer;
+  align-items: center;
+  gap: 5px;
 }
 .comfy-group-manage-list div {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 .comfy-group-manage-list li:not(.selected):hover div {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 .comfy-group-manage-list li.selected {
-	background: var(--border-color);
+  background: var(--border-color);
 }
 .comfy-group-manage-list li span {
-	opacity: 0.7;
-	font-size: smaller;
+  opacity: 0.7;
+  font-size: smaller;
 }
 .comfy-group-manage-node {
-	flex: auto;
-	background: var(--border-color);
-	display: flex;
-	flex-direction: column;
+  flex: auto;
+  background: var(--border-color);
+  display: flex;
+  flex-direction: column;
 }
 .comfy-group-manage-node > div {
-	overflow: auto;
+  overflow: auto;
 }
 .comfy-group-manage-node header {
-	display: flex;
-	background: var(--bg-color);
-	height: 40px;
+  display: flex;
+  background: var(--bg-color);
+  height: 40px;
 }
 .comfy-group-manage-node header a {
-	text-align: center;
-	flex: auto;
-	border-right: 1px solid var(--comfy-menu-bg);
-	border-bottom: 1px solid var(--comfy-menu-bg);
-	padding: 10px;
-	cursor: pointer;
-	font-size: 15px;
+  text-align: center;
+  flex: auto;
+  border-right: 1px solid var(--comfy-menu-bg);
+  border-bottom: 1px solid var(--comfy-menu-bg);
+  padding: 10px;
+  cursor: pointer;
+  font-size: 15px;
 }
 .comfy-group-manage-node header a:last-child {
     border-right: none;
 }
 .comfy-group-manage-node header a:not(.active):hover {
-	text-decoration: underline;
+  text-decoration: underline;
 }
 .comfy-group-manage-node header a.active {
-	background: var(--border-color);
-	border-bottom: none;
+  background: var(--border-color);
+  border-bottom: none;
 }
 .comfy-group-manage-node-page {
-	display: none;
-	overflow: auto;
+  display: none;
+  overflow: auto;
 }
 .comfy-group-manage-node-page.active {
-	display: block;
+  display: block;
 }
 .comfy-group-manage-node-page div {
-	padding: 10px;
-	display: flex;
-	align-items: center;
-	gap: 10px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 .comfy-group-manage-node-page input {
-	border: none;
-	color: var(--input-text);
-	background: var(--comfy-input-bg);
-	padding: 5px 10px;
+  border: none;
+  color: var(--input-text);
+  background: var(--comfy-input-bg);
+  padding: 5px 10px;
 }
 .comfy-group-manage-node-page input[type="text"] {
-	flex: auto;
+  flex: auto;
 }
 .comfy-group-manage-node-page label {
-	display: flex;
-	gap: 5px;
-	align-items: center;
+  display: flex;
+  gap: 5px;
+  align-items: center;
 }
 .comfy-group-manage footer {
-	border-top: 1px solid var(--comfy-menu-bg);
-	padding: 10px;
-	display: flex;
-	gap: 10px;
+  border-top: 1px solid var(--comfy-menu-bg);
+  padding: 10px;
+  display: flex;
+  gap: 10px;
 }
 .comfy-group-manage footer button {
-	font-size: 14px;
-	padding: 5px 10px;
-	border-radius: 0;
+  font-size: 14px;
+  padding: 5px 10px;
+  border-radius: 0;
 }
 .comfy-group-manage footer button:first-child {
-	margin-right: auto;
+  margin-right: auto;
 }
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 7ae6876f0..feebc3d0d 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -198,8 +198,8 @@ class Load3d {
     this.previewContainer = document.createElement('div')
     this.previewContainer.style.cssText = `
       position: absolute;
-      right: 0px;
-      bottom: 0px;
+      right: 0;
+      bottom: 0;
       background: rgba(0, 0, 0, 0.2);
       display: block;
     `
diff --git a/src/extensions/core/maskeditor.ts b/src/extensions/core/maskeditor.ts
index 0e266addc..0c629498a 100644
--- a/src/extensions/core/maskeditor.ts
+++ b/src/extensions/core/maskeditor.ts
@@ -475,7 +475,7 @@ var styles = `
   #maskEditor_sidePanelColorSelectSettings {
     flex-direction: column;
   }
-  
+
   .maskEditor_sidePanel_paintBucket_Container {
     width: 180px;
     display: flex;
@@ -490,7 +490,7 @@ var styles = `
     gap: 5px;
     height: 30px;
   }
-  
+
   #maskEditor_sidePanelVisibilityToggle {
     position: absolute;
     right: 0;
diff --git a/src/scripts/ui/menu/menu.css b/src/scripts/ui/menu/menu.css
index 2c9cc1d7f..33589de9c 100644
--- a/src/scripts/ui/menu/menu.css
+++ b/src/scripts/ui/menu/menu.css
@@ -45,7 +45,7 @@
   bottom: var(--bottom);
   z-index: 2000;
   max-height: calc(100vh - var(--limit) - 10px);
-  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
 }
 
 .comfyui-popup:not(.open) {
@@ -295,4 +295,3 @@
 .comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
   bottom: 41px;
 }
-
diff --git a/src/types/litegraph-core-augmentation.d.ts b/src/types/litegraph-core-augmentation.d.ts
index b97345c71..37b4c8233 100644
--- a/src/types/litegraph-core-augmentation.d.ts
+++ b/src/types/litegraph-core-augmentation.d.ts
@@ -1,4 +1,4 @@
-/** 
+/**
    Extended types for litegraph, to be merged upstream once it has stabilized.
    Augmenting the LiteGraph type really didn't want to work, however doing it like this seems to allow it.
 */
diff --git a/tests-ui/extractExamples.ts b/tests-ui/extractExamples.ts
index cc430d17c..e23c42f70 100644
--- a/tests-ui/extractExamples.ts
+++ b/tests-ui/extractExamples.ts
@@ -1,6 +1,6 @@
 // @ts-strict-ignore
-/* 
-    Script to generate test API json from the ComfyUI_examples repo. 
+/*
+    Script to generate test API json from the ComfyUI_examples repo.
     Requires the repo to be cloned to the tests-ui directory or specified via the EXAMPLE_REPO_PATH env var.
 */
 import chalk from 'chalk'