Merge pull request minbrowser#943 from minbrowser/tab-animations

Rewrite the tab open/close animation
Sickelmo83 · Mar 22, 2020 · 874b8c1 · 874b8c1
2 parents 907a622 + 9347377
commit 874b8c1
Show file tree

Hide file tree

Showing 16 changed files with 278 additions and 275 deletions.
diff --git a/css/tabBar.css b/css/tabBar.css
@@ -102,23 +102,28 @@ body.linux.menu-bar-hidden #menu-button {
 /* tab layout */
 
 #navbar #tabs {
+	display: flex;
+	flex: 1;
+	position: relative;
+	overflow: hidden;
+}
+#tabs #tabs-inner {
 	display: flex;
 	flex: 1;
 	overflow-x: auto;
 	overflow-y: hidden;
 }
-body.is-edit-mode #navbar #tabs {
-	overflow: hidden;
-}
+
 .tab-item {
 	flex: 1;
 	min-width: 125px;
-	transition: .15s min-width, 0.2s transform;
+	transition: 0.2s transform;
 	line-height: 36px;
 	height: 36px;
 	overflow: hidden;
 	word-break: break-all;
 	position: relative;
+	padding: 0 0.8em;
 }
 .tab-item:not(.active):hover {
 	background-color: rgba(0, 0, 0, 0.03);
@@ -130,10 +135,6 @@ body.is-edit-mode #navbar #tabs {
 	background-color: rgba(255, 255, 255, 0.15);
 }
 
-.tab-view-contents {
-	padding: 0 0.8em;
-}
-
 /* icons */
 
 .tab-item .tab-icon-area {
@@ -155,12 +156,6 @@ body.is-edit-mode #navbar #tabs {
 .dark-theme.theme-background-low-contrast .tab-item.active:not(:only-child) {
 	background: rgba(255, 255, 255, 0.25);
 }
-.tab-item.selected {
-	min-width: 100%;
-	/* remove the white transparent-ness */
-	background: none;
-	padding-left: 9px;
-}
 .tab-item.fade {
 	opacity: 0.55;
 }
@@ -170,73 +165,30 @@ body.is-edit-mode #navbar #tabs {
 
 /* style tab scrollbar */
 
-#navbar #tabs::-webkit-scrollbar {
+#navbar #tabs-inner::-webkit-scrollbar {
 	height: 0.25em;
 }
-#navbar #tabs::-webkit-scrollbar-track {
+.is-edit-mode #navbar #tabs-inner::-webkit-scrollbar {
+	height: 0
+}
+#navbar #tabs-inner::-webkit-scrollbar-track {
 	background-color: rgba(0, 0, 0, 0.05);
 }
-#navbar #tabs::-webkit-scrollbar-thumb {
+#navbar #tabs-inner::-webkit-scrollbar-thumb {
 	background-color: rgba(0, 0, 0, 0.175);
 	border-radius: 0.25em;
 }
-.dark-theme #navbar #tabs::-webkit-scrollbar-track {
+.dark-theme #navbar #tabs-inner::-webkit-scrollbar-track {
 	background-color: rgba(255, 255, 255, 0.25);
 }
-.dark-theme #navbar #tabs::-webkit-scrollbar-thumb {
+.dark-theme #navbar #tabs-inner::-webkit-scrollbar-thumb {
 	background-color: rgba(255, 255, 255, 0.6);
 }
 
-/* when an input is selected, hide other tabs */
-
-.is-edit-mode .tab-item:not(.selected) {
-	min-width: 0;
-	max-width: 0;
-	width: 0;
-	height: 0;
-	padding: 0;
-	overflow: hidden;
-}
-
-/* the background isn't necessary when there is only one tab */
+/* hide tabs when tab editor is open */
 
 .is-edit-mode .tab-item {
-	background: none !important;
-}
-
-/* show either the view or edit contents */
-
-.tab-item .tab-edit-contents {
-	display: none;
-}
-.tab-item.selected .tab-edit-contents {
-	display: flex;
-	height: 100%;
-	align-items: center;
-}
-.tab-item.selected .tab-view-contents {
-	display: none;
-}
-
-/* tab inputs */
-
-.tab-item .tab-input {
-	line-height: 1.15em;
-	font-size: 1.15em;
-	-webkit-appearance: none;
-	background: none;
-	border: none;
-	color: inherit;
-	flex: 1;
-	height: 1.5em;
-	outline: none;
-	-webkit-user-select: auto;
-	-webkit-app-region: no-drag;
-}
-.tab-item .tab-input::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.5;
-	line-height: 1.25em;
+	opacity: 0;
 }
 
 /* show the overlay in edit mode */
@@ -270,7 +222,7 @@ body.dark-mode #overlay {
 .tab-item:not(.active) .icon-tab-not-secure {
 	display: none;
 }
-.tab-item .tab-view-contents .title {
+.tab-item .title {
 	font-size: 15px;
 }
 

diff --git a/css/tabEditor.css b/css/tabEditor.css
@@ -0,0 +1,31 @@
+#tab-editor {
+    padding: 0 0.55em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+	display: flex;
+	height: 100%;
+    align-items: center;
+    transform-origin: top left;
+	z-index: 1;
+}
+
+#tab-editor-input {
+    background: none;
+	line-height: 1.15em;
+	font-size: 1.15em;
+	-webkit-appearance: none;
+	border: none;
+	color: inherit;
+	flex: 1;
+	height: 1.5em;
+	outline: none;
+	-webkit-user-select: auto;
+	-webkit-app-region: no-drag;
+}
+#tab-editor-input::-webkit-input-placeholder {
+	color: inherit;
+	opacity: 0.5;
+	line-height: 1.25em;
+}
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
 	<link rel="stylesheet" href="css/base.css" />
 	<link rel="stylesheet" href="css/windowsCaptionButtons.css" />
 	<link rel="stylesheet" href="css/tabBar.css" />
+	<link rel="stylesheet" href="css/tabEditor.css" />
 	<link rel="stylesheet" href="css/taskOverlay.css" />
 	<link rel="stylesheet" href="css/webviews.css" />
 	<link rel="stylesheet" href="css/searchbar.css" />
@@ -53,7 +54,12 @@
 		<div id="navbar" class="theme-background-color theme-text-color windowDragHandle" tabindex="-1">
 			<button id="menu-button" class="fa fa-ellipsis-v navbar-action-button" data-label="openMenu" tabindex="-1"></i>
 			<button id="back-button" hidden class="fa fa-angle-left navbar-action-button" data-label="goBack" tabindex="-1"></button>
-			<div id="tabs"></div>
+			<div id="tabs">
+				<div id="tab-editor" hidden>
+					<input id="tab-editor-input" class="mousetrap"/>
+				</div>
+				<div id="tabs-inner"></div>
+			</div>
 			<button id="add-tab-button" class="fa fa-plus navbar-action-button" data-label="newTabAction" tabindex="-1"></button>
 			<i class="fa fa-bars navbar-action-button invisible"></i>
 		</div>

diff --git a/js/browserUI.js b/js/browserUI.js
@@ -3,6 +3,8 @@
 var webviews = require('webviews.js')
 var urlParser = require('util/urlParser.js')
 var focusMode = require('focusMode.js')
+var tabEditor = require('navbar/tabEditor.js')
+var searchbar = require('searchbar/searchbar.js')
 
 /* loads a page in a webview */
 
@@ -15,7 +17,7 @@ function navigate (tabId, newURL) {
 
   webviews.update(tabId, newURL)
 
-  tabBar.leaveEditMode()
+  tabEditor.hide()
 }
 
 /* creates a new task */
@@ -54,7 +56,7 @@ function addTab (tabId = tabs.add(), options = {}) {
       focusWebview: options.enterEditMode === false
     })
     if (options.enterEditMode !== false) {
-      tabBar.enterEditMode(tabId)
+      tabEditor.show(tabId)
     }
   } else {
     tabBar.getTab(tabId).scrollIntoView()
@@ -172,7 +174,7 @@ function switchToTab (id, options) {
     return
   }
 
-  tabBar.leaveEditMode()
+  tabEditor.hide()
 
   tabs.setSelected(id)
   tabBar.setActiveTab(id)
@@ -224,6 +226,21 @@ webviews.bindIPC('close-window', function (webview, tabId, args) {
   closeTab(tabId)
 })
 
+searchbar.events.on('url-selected', function (data) {
+  if (data.background) {
+    var newTab = tabs.add({
+      url: data.url,
+      private: tabs.get(tabs.getSelected()).private
+    })
+    addTab(newTab, {
+      enterEditMode: false,
+      openInBackground: true
+    })
+  } else {
+    navigate(tabs.getSelected(), data.url)
+  }
+})
+
 module.exports = {
   navigate,
   addTask,

diff --git a/js/default.js b/js/default.js
@@ -2,6 +2,7 @@ window.userDataPath = process.argv.filter(a => a.startsWith('--user-data-path=')
 
 window.electron = require('electron')
 window.fs = require('fs')
+window.EventEmitter = require('events')
 window.ipc = electron.ipcRenderer
 window.remote = electron.remote
 window.Dexie = require('dexie')

diff --git a/js/defaultKeybindings.js b/js/defaultKeybindings.js
@@ -3,6 +3,7 @@ var webviews = require('webviews.js')
 var browserUI = require('browserUI.js')
 var focusMode = require('focusMode.js')
 var modalMode = require('modalMode.js')
+var tabEditor = require('navbar/tabEditor.js')
 
 const defaultKeybindings = {
   initialize: function () {
@@ -52,12 +53,12 @@ const defaultKeybindings = {
     })
 
     keybindings.defineShortcut('enterEditMode', function (e) {
-      tabBar.enterEditMode(tabs.getSelected())
+      tabEditor.show(tabs.getSelected())
       return false
     })
 
     keybindings.defineShortcut('runShortcut', function (e) {
-      tabBar.enterEditMode(tabs.getSelected(), '!')
+      tabEditor.show(tabs.getSelected(), '!')
     })
 
     keybindings.defineShortcut('closeTab', function (e) {
@@ -83,8 +84,8 @@ const defaultKeybindings = {
     })
 
     keybindings.defineShortcut('addToFavorites', function (e) {
-      tabBar.getTab(tabs.getSelected()).querySelector('.bookmarks-button').click()
-      tabBar.enterEditMode(tabs.getSelected(), null, false) // we need to show the bookmarks button, which is only visible in edit mode
+      tabEditor.show(tabs.getSelected(), null, false) // we need to show the bookmarks button, which is only visible in edit mode
+      tabEditor.container.querySelector('.bookmarks-button').click()
     })
 
     // cmd+x should switch to tab x. Cmd+9 should switch to the last tab
@@ -118,7 +119,7 @@ const defaultKeybindings = {
     })
 
     keybindings.defineShortcut({ keys: 'esc' }, function (e) {
-      tabBar.leaveEditMode()
+      tabEditor.hide()
 
       // exit full screen mode
       webviews.callAsync(tabs.getSelected(), 'executeJavaScript', 'if(document.webkitIsFullScreen){document.webkitExitFullscreen()}')

diff --git a/js/menuRenderer.js b/js/menuRenderer.js
@@ -7,6 +7,7 @@ var focusMode = require('focusMode.js')
 var modalMode = require('modalMode.js')
 var findinpage = require('findinpage.js')
 var PDFViewer = require('pdfViewer.js')
+var tabEditor = require('navbar/tabEditor.js')
 
 module.exports = {
   initialize: function () {
@@ -48,15 +49,15 @@ module.exports = {
 
     ipc.on('showReadingList', function () {
         // open the searchbar with "!readinglist " as the input
-      tabBar.enterEditMode(tabs.getSelected(), '!readinglist ')
+      tabEditor.show(tabs.getSelected(), '!readinglist ')
     })
 
     ipc.on('showBookmarks', function () {
-      tabBar.enterEditMode(tabs.getSelected(), '!bookmarks ')
+      tabEditor.show(tabs.getSelected(), '!bookmarks ')
     })
 
     ipc.on('showHistory', function () {
-      tabBar.enterEditMode(tabs.getSelected(), '!history ')
+      tabEditor.show(tabs.getSelected(), '!history ')
     })
 
     ipc.on('duplicateTab', function (e) {

diff --git a/js/navbar/bookmarkStar.js b/js/navbar/bookmarkStar.js
@@ -5,37 +5,43 @@ const searchbar = require('searchbar/searchbar.js')
 const searchbarPlugins = require('searchbar/searchbarPlugins.js')
 
 const bookmarkStar = {
-  create: function (tabId) {
+  create: function () {
     const star = document.createElement('button')
     star.className = 'fa fa-star-o tab-icon bookmarks-button' // alternative icon is fa-bookmark
     star.setAttribute('title', l('addBookmark'))
     star.setAttribute('aria-label', l('addBookmark'))
 
     star.addEventListener('click', function (e) {
-      bookmarkStar.onClick(tabId, star)
+      bookmarkStar.onClick(star)
     })
 
-    bookmarkStar.update(tabId, star)
-
     return star
   },
-  onClick: function (tabId, star) {
+  onClick: function (star) {
+    var tabId = star.getAttribute('data-tab')
+
     searchbarPlugins.clearAll()
 
     star.classList.toggle('fa-star')
     star.classList.toggle('fa-star-o')
 
     places.toggleBookmarked(tabId, function (isBookmarked) {
       if (isBookmarked) {
+        // since the update happens asynchronously, and star.update() could be called after onClick but before the update, it's possible for the classes to get out of sync with the actual bookmark state. Updating them here fixes tis.
+        star.classList.add('fa-star')
+        star.classList.remove('fa-star-o')
         var editorInsertionPoint = document.createElement('div')
         searchbarPlugins.getContainer('simpleBookmarkTagInput').appendChild(editorInsertionPoint)
         bookmarkEditor.show(tabs.get(tabs.getSelected()).url, editorInsertionPoint, null, {simplified: true})
       } else {
+        star.classList.remove('fa-star')
+        star.classList.add('fa-star-o')
         searchbar.showResults('')
       }
     })
   },
   update: function (tabId, star) {
+    star.setAttribute('data-tab', tabId)
     const currentURL = tabs.get(tabId).url
 
     if (!currentURL) { // no url, can't be bookmarked