improve performance for tabs, include intersectionObserver

fix #10611
fix #10582
fix #10544
fix #10509
fix #10123
fix #9998
fix #9398
fix #8414
fix #7925
fix #7730
fix #7301
fix #6957

Author: cezaraugusto

app/common/state/tabContentState.js

@@ -0,0 +1,48 @@
+/* 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 {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil')
+const {getFrameByKey} = require('../../../../js/state/frameStateUtil')
+
+module.exports.canPlayAudio = (state, frameKey) => {
+  const frame = getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return frame.get('audioPlaybackActive') || frame.get('audioMuted')
+}
+
+module.exports.isAudioMuted = (state, frameKey) => {
+  const frame = 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 = getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return (
+    !isEntryIntersected(state, 'tabs') &&
+    module.exports.canPlayAudio(state, frameKey)
+  )
+}
+
+module.exports.showAudioTopBorder = (state, frameKey) => {
+  return (
+    isEntryIntersected(state, 'tabs') &&
+    module.exports.canPlayAudio(state, frameKey)
+  )
+}

app/common/state/tabContentState/audioState.js

@@ -0,0 +1,64 @@
+/* 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 frameStateUtil = require('../../../../js/state/frameStateUtil')
+const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil')
+const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
+const tabUIState = require('../tabUIState')
+const tabState = require('../tabState')
+
+// Styles
+const {intersection} = require('../../../renderer/components/styles/global')
+
+module.exports.showFavicon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+  const isNewTabPage = tabUIState.isNewTab(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  if (isEntryIntersected(state, 'tabs', intersection.at35)) {
+    // when almost all tab content is covered,
+    // only show favicon for the non-active tab
+    return !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
+  }
+
+  const tabId = frame.get('tabId', tabState.TAB_ID_NONE)
+
+  return (
+    !isSourceAboutUrl(frame.get('location')) &&
+    tabState.isLoading(state, tabId)
+  )
+}
+
+module.exports.showIconWithLessMargin = (state) => {
+  return isEntryIntersected(state, 'tabs', intersection.at20)
+}
+
+module.exports.showFaviconAtReducedSize = (state) => {
+  return isEntryIntersected(state, 'tabs', intersection.at15)
+}

app/common/state/tabContentState/faviconState.js

@@ -0,0 +1,47 @@
+/* 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
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+
+// Constants
+const {tabs} = require('../../../../js/constants/config')
+
+module.exports.isPartitionTab = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return !!frame.get('partitionNumber')
+}
+
+module.exports.getPartitionNumber = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return 0
+  }
+
+  if (typeof frame.get('partitionNumber') === 'string') {
+    return frame.get('partitionNumber').replace(/^partition-/i, '')
+  }
+  return frame.get('partitionNumber')
+}
+
+module.exports.getMaxAllowedPartitionNumber = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return 0
+  }
+
+  const partitionNumber = module.exports.getPartitionNumber(state, frameKey)
+
+  if (partitionNumber > tabs.maxAllowedNewSessions) {
+    return tabs.maxAllowedNewSessions
+  }
+  return partitionNumber
+}

app/common/state/tabContentState/partitionState.js

@@ -0,0 +1,16 @@
+/* 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
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+
+module.exports.isPrivateTab = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    return false
+  }
+
+  return !!frame.get('isPrivate')
+}