improve tabs performance and UI with this one simple trick

app/common/state/tabContentState/audioState.js

@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// State helpers
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+
+// Utils
+const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil')
+
+module.exports.canPlayAudio = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return frame.get('audioPlaybackActive') || frame.get('audioMuted')
+}
+
+module.exports.isAudioMuted = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  const tabCanPlayAudio = module.exports.canPlayAudio(state, frameKey)
+  return tabCanPlayAudio && frame.get('audioMuted')
+}
+
+module.exports.showAudioIcon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return (
+    !isEntryIntersected(state, 'tabs') &&
+    module.exports.canPlayAudio(state, frameKey)
+  )
+}
+
+module.exports.showAudioTopBorder = (state, frameKey, isPinned) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return (
+    module.exports.canPlayAudio(state, frameKey) &&
+    (isEntryIntersected(state, 'tabs') || isPinned)
+  )
+}

app/common/state/tabContentState/closeState.js

@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// State helpers
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+
+// Utils
+const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil')
+
+// Styles
+const {intersection} = require('../../../renderer/components/styles/global')
+
+module.exports.hasFixedCloseIcon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return (
+    frameStateUtil.isFrameKeyActive(state, frameKey) &&
+    isEntryIntersected(state, 'tabs', intersection.at75)
+  )
+}
+
+module.exports.hasRelativeCloseIcon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return (
+    frameStateUtil.getTabHoverState(state, frameKey) &&
+    !isEntryIntersected(state, 'tabs', intersection.at75)
+  )
+}
+
+module.exports.showCloseTabIcon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return !isEntryIntersected(state, 'tabs', intersection.at20) &&
+    (
+      module.exports.hasRelativeCloseIcon(state, frameKey) ||
+      module.exports.hasFixedCloseIcon(state, frameKey)
+    )
+}

app/common/state/tabContentState/faviconState.js

@@ -0,0 +1,87 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Utils
+const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil')
+
+// Styles
+const {intersection} = require('../../../renderer/components/styles/global')
+
+module.exports.showFavicon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  const isNewTabPage = frameStateUtil.frameLocationMatch(frame, 'about:newtab')
+
+  if (isEntryIntersected(state, 'tabs', intersection.at40)) {
+    // do not show it at all at minimum ratio (intersection.at12)
+    if (isEntryIntersected(state, 'tabs', intersection.at12)) {
+      return false
+    }
+
+    return (
+      // when almost all tab content is covered,
+      // only show favicon if there's no closeIcon (intersection.at20)
+      // or otherwise only for the non-active tab
+      isEntryIntersected(state, 'tabs', intersection.at20) ||
+      !frameStateUtil.isFrameKeyActive(state, frameKey)
+    )
+  }
+
+  // new tab page is the only tab we do not show favicon
+  return !isNewTabPage
+}
+
+module.exports.getFavicon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+  const isLoadingVisible = module.exports.showLoadingIcon(state, frameKey)
+
+  if (frame == null) {
+    return ''
+  }
+
+  return !isLoadingVisible && frame.get('icon')
+}
+
+module.exports.showLoadingIcon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  if (frame.get('loading') == null) {
+    return false
+  }
+
+  return (
+    !isSourceAboutUrl(frame.get('location')) &&
+    frame.get('loading')
+  )
+}
+
+module.exports.showIconWithLessMargin = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return isEntryIntersected(state, 'tabs', intersection.at30)
+}
+
+module.exports.showFaviconAtReducedSize = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return isEntryIntersected(state, 'tabs', intersection.at20)
+}