From 23fb79c9a39b290cac722cf242cde5b2a1666adc Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Wed, 5 Feb 2025 15:18:45 +0100 Subject: [PATCH 1/7] Fixed twilight common issues --- .../components/sidebar/browser-sidebar-js.patch | 13 +++++++++++++ .../components/urlbar/UrlbarInput-sys-mjs.patch | 15 ++++++++------- 2 files changed, 21 insertions(+), 7 deletions(-) create mode 100644 src/browser/components/sidebar/browser-sidebar-js.patch diff --git a/src/browser/components/sidebar/browser-sidebar-js.patch b/src/browser/components/sidebar/browser-sidebar-js.patch new file mode 100644 index 000000000..ef02cb4ce --- /dev/null +++ b/src/browser/components/sidebar/browser-sidebar-js.patch @@ -0,0 +1,13 @@ +diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js +index 1937a01b9940c79782cc2ad002b09ea5938b89e0..0846ab4b3750a556617ff8d4546d9131cda35296 100644 +--- a/browser/components/sidebar/browser-sidebar.js ++++ b/browser/components/sidebar/browser-sidebar.js +@@ -671,7 +671,7 @@ var SidebarController = { + */ + setPosition() { + // First reset all ordinals to match DOM ordering. +- let browser = document.getElementById("browser"); ++ let browser = document.getElementById("tabbrowser-tabbox"); + [...browser.children].forEach((node, i) => { + node.style.order = i + 1; + }); diff --git a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch index 5279aa97d..04b772f1d 100644 --- a/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch +++ b/src/browser/components/urlbar/UrlbarInput-sys-mjs.patch @@ -1,5 +1,5 @@ diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs -index 50968dc04b527438acf30151f0c2e92f8b45097c..3db8b6c04ec5a1b88dc05d4ff04721cf61913dcc 100644 +index 50968dc04b527438acf30151f0c2e92f8b45097c..f8e8e9c06613c5d5f33333fd9e128a726c67e873 100644 --- a/browser/components/urlbar/UrlbarInput.sys.mjs +++ b/browser/components/urlbar/UrlbarInput.sys.mjs @@ -67,6 +67,13 @@ XPCOMUtils.defineLazyPreferenceGetter( @@ -52,18 +52,19 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..3db8b6c04ec5a1b88dc05d4ff04721cf // Enable the animation only after the first extend call to ensure it // doesn't run when opening a new window. if (!this.hasAttribute("breakout-extend-animate")) { -@@ -2163,6 +2183,10 @@ export class UrlbarInput { +@@ -2163,6 +2183,11 @@ export class UrlbarInput { return; } + if (this._zenHandleUrlbarClose) { + this._zenHandleUrlbarClose(); + } ++ this.removeAttribute("zen-floating-urlbar"); + this.removeAttribute("breakout-extend"); this.#updateTextboxPosition(); } -@@ -3305,7 +3329,7 @@ export class UrlbarInput { +@@ -3305,7 +3330,7 @@ export class UrlbarInput { } else { where = lazy.BrowserUtils.whereToOpenLink(event, false, false); } @@ -72,7 +73,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..3db8b6c04ec5a1b88dc05d4ff04721cf if (where == "current") { where = "tab"; } else if (where == "tab") { -@@ -3859,6 +3883,11 @@ export class UrlbarInput { +@@ -3859,6 +3884,11 @@ export class UrlbarInput { } _on_click(event) { @@ -84,7 +85,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..3db8b6c04ec5a1b88dc05d4ff04721cf if ( event.target == this.inputField || event.target == this._inputContainer || -@@ -3930,7 +3959,7 @@ export class UrlbarInput { +@@ -3930,7 +3960,7 @@ export class UrlbarInput { } } @@ -93,7 +94,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..3db8b6c04ec5a1b88dc05d4ff04721cf this.view.autoOpen({ event }); } else { if (this._untrimOnFocusAfterKeydown) { -@@ -3970,9 +3999,12 @@ export class UrlbarInput { +@@ -3970,9 +4000,12 @@ export class UrlbarInput { } _on_mousedown(event) { @@ -107,7 +108,7 @@ index 50968dc04b527438acf30151f0c2e92f8b45097c..3db8b6c04ec5a1b88dc05d4ff04721cf if ( event.target != this.inputField && -@@ -3982,8 +4014,8 @@ export class UrlbarInput { +@@ -3982,8 +4015,8 @@ export class UrlbarInput { break; } From 5e0b684b539d34ea29eca7fab012e60970fe4a7c Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Wed, 5 Feb 2025 17:59:24 +0100 Subject: [PATCH 2/7] Implement Zen UI migration functionality and initialize on startup --- l10n | 2 +- src/browser/base/content/ZenStartup.mjs | 2 + .../base/content/browser-init-js.patch | 19 +++--- .../base/content/zen-assets.jar.inc.mn | 1 + .../base/zen-components/ZenUIMigration.mjs | 61 +++++++++++++++++++ 5 files changed, 75 insertions(+), 10 deletions(-) create mode 100644 src/browser/base/zen-components/ZenUIMigration.mjs diff --git a/l10n b/l10n index 0d64a530f..fb2f27225 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 0d64a530f4f72ad19e508097a508fc8ef1ad7ede +Subproject commit fb2f27225e6ec810354ce4c95913d6a2105e200b diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 67847f5f4..055bc2eee 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -33,6 +33,8 @@ this._initSidebarScrolling(); + gZenUIMigration.init(); + gZenCompactModeManager.init(); ZenWorkspaces.init(); gZenVerticalTabsManager.init(); diff --git a/src/browser/base/content/browser-init-js.patch b/src/browser/base/content/browser-init-js.patch index 3d3d188ed..a604b8ef9 100644 --- a/src/browser/base/content/browser-init-js.patch +++ b/src/browser/base/content/browser-init-js.patch @@ -1,11 +1,11 @@ diff --git a/browser/base/content/browser-init.js b/browser/base/content/browser-init.js -index 9df41bb3c82919839ee1408aa4d177ea7ee40a56..e37c64fa2c2ea39762be4285a1a7055463ded537 100644 +index 63100defacf66c6b3232b9e0a783a5fd14e3a46a..eb7ed966628a595847b850f981418d425b78f14b 100644 --- a/browser/base/content/browser-init.js +++ b/browser/base/content/browser-init.js -@@ -152,13 +152,15 @@ var gBrowserInit = { - elem.setAttribute("skipintoolbarset", "true"); - } - } +@@ -162,13 +162,15 @@ var gBrowserInit = { + elem.setAttribute("skipintoolbarset", "true"); + } + } + ZenCustomizableUI.init(window); for (let area of CustomizableUI.areas) { let type = CustomizableUI.getAreaType(area); @@ -16,14 +16,15 @@ index 9df41bb3c82919839ee1408aa4d177ea7ee40a56..e37c64fa2c2ea39762be4285a1a70554 } } + ZenCustomizableUI.registerToolbarNodes(window); - if (isVerticalTabs) { - // Show the vertical tabs toolbar - setToolbarVisibility( -@@ -253,6 +255,10 @@ var gBrowserInit = { + if (isVerticalTabs) { + // Show the vertical tabs toolbar + setToolbarVisibility( +@@ -287,6 +289,11 @@ var gBrowserInit = { gPrivateBrowsingUI.init(); BrowserSearch.init(); BrowserPageActions.init(); + ++Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenUIMigration.mjs", window); +Services.scriptloader.loadSubScript("chrome://browser/content/ZenStartup.mjs", window); +Services.scriptloader.loadSubScript("chrome://browser/content/zenThemeModifier.js", window); + diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 69b4c1c56..563908e14 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -4,6 +4,7 @@ content/browser/ZenStartup.mjs (content/ZenStartup.mjs) content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs) content/browser/ZenCustomizableUI.sys.mjs (content/ZenCustomizableUI.sys.mjs) + content/browser/zen-components/ZenUIMigration.mjs (zen-components/ZenUIMigration.mjs) content/browser/zen-components/ZenCompactMode.mjs (zen-components/ZenCompactMode.mjs) content/browser/zen-components/ZenViewSplitter.mjs (zen-components/ZenViewSplitter.mjs) content/browser/zen-components/ZenThemesCommon.mjs (zen-components/ZenThemesCommon.mjs) diff --git a/src/browser/base/zen-components/ZenUIMigration.mjs b/src/browser/base/zen-components/ZenUIMigration.mjs new file mode 100644 index 000000000..b93d6f267 --- /dev/null +++ b/src/browser/base/zen-components/ZenUIMigration.mjs @@ -0,0 +1,61 @@ + +{ + const PREF_NAME = "zen.migration.version"; + const MIGRATION_VERSION = 1; + + class ZenUIMigration { + init() { + if (Services.prefs.prefHasUserValue(PREF_NAME)) { + this._migrate(); + } + this.clearVariables(); + } + + get _migrationVersion() { + return Services.prefs.getIntPref(PREF_NAME, 0); + } + + set _migrationVersion(value) { + Services.prefs.setIntPref(PREF_NAME, value); + } + + _migrate() { + if (this._migrationVersion < 1) { + this._migrateV1(); + } + } + + clearVariables() { + this._migrationVersion = MIGRATION_VERSION; + window.gZenUIMigration = null; + } + + async _migrateV1() { + // Introduction of the new URL bar, show a message to the user + const notification = gNotificationBox.appendNotification( + 'zen-new-urlbar-notification', + { + label: { 'l10n-id': 'zen-new-urlbar-notification' }, + image: 'chrome://browser/skin/notification-icons/persistent-storage-blocked.svg', + priority: gNotificationBox.PRIORITY_WARNING_HIGH, + }, + [ + { + 'l10n-id': 'zen-disable', + accessKey: 'D', + callback: () => { + Services.prefs.setBoolPref('zen.urlbar.replace-newtab', false); + }, + }, + { + link: "https://docs.zen-browser.app/user-manual/urlbar/", + 'l10n-id': "zen-learn-more-text", + } + ], + ); + notification.persistence = -1; + } + } + + window.gZenUIMigration = new ZenUIMigration(); +} From 6d63d56fdd156ec765be0cabf4ccb855125fbce4 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Wed, 5 Feb 2025 18:00:09 +0100 Subject: [PATCH 3/7] Refactor ZenUIMigration to use consistent single quotes for strings --- src/browser/base/zen-components/ZenUIMigration.mjs | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/browser/base/zen-components/ZenUIMigration.mjs b/src/browser/base/zen-components/ZenUIMigration.mjs index b93d6f267..1f025712d 100644 --- a/src/browser/base/zen-components/ZenUIMigration.mjs +++ b/src/browser/base/zen-components/ZenUIMigration.mjs @@ -1,6 +1,5 @@ - { - const PREF_NAME = "zen.migration.version"; + const PREF_NAME = 'zen.migration.version'; const MIGRATION_VERSION = 1; class ZenUIMigration { @@ -48,10 +47,10 @@ }, }, { - link: "https://docs.zen-browser.app/user-manual/urlbar/", - 'l10n-id': "zen-learn-more-text", - } - ], + link: 'https://docs.zen-browser.app/user-manual/urlbar/', + 'l10n-id': 'zen-learn-more-text', + }, + ] ); notification.persistence = -1; } From 16e0b5f31919574488ea18e2ee7722e67d215e10 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Wed, 5 Feb 2025 18:18:00 +0100 Subject: [PATCH 4/7] Remove existing firefox-l10n directory before cloning to ensure fresh download of language packs --- scripts/download-language-packs.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/download-language-packs.sh b/scripts/download-language-packs.sh index 11f472592..4363c6f21 100644 --- a/scripts/download-language-packs.sh +++ b/scripts/download-language-packs.sh @@ -10,6 +10,7 @@ cd $CURRENT_DIR LAST_FIREFOX_L10N_COMMIT=$(cat ./firefox-cache/l10n-last-commit-hash) cd ./l10n +rm -rf firefox-l10n # clone only from LAST_FIREFOX_L10N_COMMIT git clone https://github.com/mozilla-l10n/firefox-l10n cd firefox-l10n From 26a59ee1c17930b21f75aa9ec2c73d581f03eeea Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Wed, 5 Feb 2025 19:39:12 +0100 Subject: [PATCH 5/7] Enable essentials favicon background and update tab icon overlay styles --- src/browser/app/profile/zen-browser.js | 2 +- src/browser/base/content/zen-styles/zen-theme.css | 2 ++ .../themes/shared/tabbrowser/tabs-css.patch | 15 +++++++-------- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index e3a7c7e7c..b4f0bce45 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -84,7 +84,7 @@ pref('zen.theme.accent-color', "#ffb787"); pref('zen.theme.content-element-separation', 6); // In pixels pref('zen.theme.pill-button', false); pref('zen.theme.gradient', true); -pref('zen.theme.essentials-favicon-bg', false); +pref('zen.theme.essentials-favicon-bg', true); pref('zen.tabs.show-newtab-vertical', true); pref('zen.view.show-newtab-button-border-top', false); diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index fa51fa32f..62b2efa5c 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -131,6 +131,8 @@ --toolbarbutton-border-radius: 6px; --urlbar-margin-inline: 1px !important; + --tab-icon-overlay-stroke: light-dark(white, black) !important; + --fp-contextmenu-border-radius: 8px; --fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0; --fp-contextmenu-menuitem-border-radius: calc(4px + var(--fp-contextmenu-menuitem-border-width)); diff --git a/src/browser/themes/shared/tabbrowser/tabs-css.patch b/src/browser/themes/shared/tabbrowser/tabs-css.patch index 1b399a29e..93e6cab24 100644 --- a/src/browser/themes/shared/tabbrowser/tabs-css.patch +++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch @@ -1,5 +1,5 @@ diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css -index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..3c10b8f0d893d313fa208dba8f47007b587f1428 100644 +index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..64487674de1afb711258a36757508cd9b741fcd9 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css @@ -33,7 +33,7 @@ @@ -37,16 +37,15 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..3c10b8f0d893d313fa208dba8f47007b &::before { position: absolute; -@@ -511,7 +510,7 @@ +@@ -511,7 +510,6 @@ background-repeat: no-repeat; border-radius: 10px; -moz-context-properties: fill; - fill: var(--tab-icon-overlay-fill); -+ filter: invert(1); } } -@@ -569,14 +568,14 @@ +@@ -569,14 +567,14 @@ } &[textoverflow] { @@ -65,7 +64,7 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..3c10b8f0d893d313fa208dba8f47007b direction: rtl; mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size)); } -@@ -1146,7 +1145,7 @@ +@@ -1146,7 +1144,7 @@ margin-inline: var(--tab-inner-inline-margin); #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text { @@ -74,7 +73,7 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..3c10b8f0d893d313fa208dba8f47007b } &:hover { -@@ -1194,7 +1193,6 @@ +@@ -1194,7 +1192,6 @@ } #vertical-pinned-tabs-container { @@ -82,7 +81,7 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..3c10b8f0d893d313fa208dba8f47007b display: none; grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)); overflow-y: auto; -@@ -1347,7 +1345,7 @@ +@@ -1347,7 +1344,7 @@ toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button) ) ~ #tabbrowser-tabs { @@ -91,7 +90,7 @@ index 96f930638c04c7ddcc8dc1a7fe4dce8b12a325e6..3c10b8f0d893d313fa208dba8f47007b padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px); margin-inline-start: 2px; } -@@ -1381,7 +1379,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button { +@@ -1381,7 +1378,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button { list-style-image: url(chrome://global/skin/icons/plus.svg); } From 5e25b0ade9df66fb0c9c8b1841051ca4615331f0 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Wed, 5 Feb 2025 19:53:49 +0100 Subject: [PATCH 6/7] Update profile preferences and modify default sidebar icons --- src/browser/app/profile/zen-browser.js | 4 ++-- src/browser/base/content/ZenCustomizableUI.sys.mjs | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index b4f0bce45..ff35d39e5 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -176,8 +176,8 @@ pref('zen.pinned-tab-manager.debug', false); pref('zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', false); pref('zen.pinned-tab-manager.close-shortcut-behavior', 'switch'); -// Pref to enable the new profiles (TODO: Check this out!) -//pref("browser.profiles.enabled", true); +// TODO: Check this out! +pref("browser.profiles.enabled", false); // Zen webpanels (calling it sidebar due to legacy reasons) pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n \"url\":\"https://www.wikipedia.org/\"\n },\n\"p2\":{\n \"url\":\"https://m.twitter.com/\",\n\"ua\": true\n },\n\"p3\": {\n \"url\": \"https://www.youtube.com/\",\n\"ua\": true\n},\n\"p4\": {\n \"url\": \"https://translate.google.com/\",\n\"ua\": true\n},\n\"p5\": {\n \"url\": \"https://todoist.com/\",\n\"ua\": true\n}},\n\"index\":[\"p1\",\"p2\",\"p3\",\"p4\",\"p5\"]}"); diff --git a/src/browser/base/content/ZenCustomizableUI.sys.mjs b/src/browser/base/content/ZenCustomizableUI.sys.mjs index fcd92ea1d..a3622a5ee 100644 --- a/src/browser/base/content/ZenCustomizableUI.sys.mjs +++ b/src/browser/base/content/ZenCustomizableUI.sys.mjs @@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class { constructor() {} TYPE_TOOLBAR = 'toolbar'; - defaultSidebarIcons = ['zen-profile-button', 'zen-workspaces-button', 'downloads-button']; + defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button']; startup(CustomizableUIInternal) { CustomizableUIInternal.registerArea( From 59373383483892e81622642480c2c1964641edf3 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Wed, 5 Feb 2025 21:22:20 +0100 Subject: [PATCH 7/7] Refactor ZenCompactMode styles for consistent sidebar positioning and update animation parameters --- .../content/zen-styles/zen-compact-mode.css | 4 ++-- .../base/zen-components/ZenCompactMode.mjs | 18 +++++++----------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 92d7d3ae4..49ce6974b 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -63,7 +63,7 @@ } &:not([zen-right-side='true']) #navigator-toolbox { - left: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation)); + left: calc(-1 * var(--zen-sidebar-width) + 1px); } /* When we have multiple toolbars and the top-toolbar is NOT being hidden, @@ -80,7 +80,7 @@ --zen-compact-float: calc(var(--zen-element-separation) + 1px); &:not([animate='true']) { - right: calc(-1 * var(--zen-sidebar-width) + var(--zen-element-separation)); + right: calc(-1 * var(--zen-sidebar-width) + 1px); } } diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs index 32ef544ce..d49ba5691 100644 --- a/src/browser/base/zen-components/ZenCompactMode.mjs +++ b/src/browser/base/zen-components/ZenCompactMode.mjs @@ -100,8 +100,6 @@ var gZenCompactModeManager = { }, updateCompactModeContext(isSingleToolbar) { - this.getAndApplySidebarWidth(); // Ignore return value - const IDs = [ 'zen-context-menu-compact-mode-hide-sidebar', 'zen-context-menu-compact-mode-hide-toolbar', @@ -176,21 +174,20 @@ var gZenCompactModeManager = { { ease: 'easeIn', type: 'spring', - stiffness: 3000, - damping: 150, - mass: 1, + bounce: 0, + duration: 0.2, } ) .then(() => { this.sidebar.removeAttribute('animate'); - this.sidebar.style.transition = 'none'; this.sidebar.style.removeProperty('margin-right'); this.sidebar.style.removeProperty('margin-left'); this.sidebar.style.removeProperty('transform'); - this._animating = false; + this.sidebar.style.transition = 'none'; setTimeout(() => { + this._animating = false; this.sidebar.style.removeProperty('transition'); - }); + }, 100); }); } else if (canHideSidebar && !isCompactMode) { document.getElementById('browser').style.overflow = 'hidden'; @@ -211,9 +208,8 @@ var gZenCompactModeManager = { { ease: 'easeOut', type: 'spring', - stiffness: 3000, - damping: 150, - mass: 1, + bounce: 0, + duration: 0.2, } ) .then(() => {