Add support for 100 tabs

Fix #6692 Auditors: @bbondy, @bsclifton
brave · Mar 14, 2017 · 9e148d2 · bbondy · Mar 14, 2017 · 9e148d2
1 parent 0919732
commit 9e148d2
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/app/renderer/components/styles/tab.js b/app/renderer/components/styles/tab.js
@@ -77,6 +77,7 @@ const styles = StyleSheet.create({
   },
 
   tabId: {
+    justifyContent: 'center',
     alignItems: 'center',
     display: 'flex',
     flex: '1',

diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js
@@ -80,7 +80,7 @@ class Favicon extends ImmutableComponent {
         className={css(
           styles.icon,
           this.favicon && iconStyles.favicon,
-          this.narrowView && styles.faviconNarrowView
+          !this.props.tabProps.get('pinnedLocation') && this.narrowView && styles.faviconNarrowView
         )}
         symbol={this.loadingIcon || this.defaultIcon} />
       : null
@@ -283,9 +283,9 @@ const styles = StyleSheet.create({
   },
 
   faviconNarrowView: {
-    minWidth: globalStyles.spacing.narrowIconSize,
+    minWidth: 'auto',
     width: globalStyles.spacing.narrowIconSize,
-    backgroundSize: globalStyles.spacing.narrowIconSize,
+    backgroundSize: 'contain',
     padding: '0',
     fontSize: '10px',
     backgroundPosition: 'center center'

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -319,7 +319,7 @@ class TabsTab extends ImmutableComponent {
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TABS_PER_PAGE)}>
             {
               // Sorry, Brad says he hates primes :'(
-              [6, 8, 10, 20].map((x) =>
+              [6, 8, 10, 20, 100].map((x) =>
                 <option value={x} key={x}>{x}</option>)
             }
           </SettingDropdown>

diff --git a/js/components/tab.js b/js/components/tab.js
@@ -208,7 +208,6 @@ class Tab extends ImmutableComponent {
   }
 
   componentDidUpdate () {
-    this.tabSize
     this.onUpdateTabSize()
   }
 
@@ -217,6 +216,13 @@ class Tab extends ImmutableComponent {
     window.removeEventListener('resize', this.onUpdateTabSize)
   }
 
+  componentWillReceiveProps (nextProps) {
+    // Update breakpoint each time a new tab is open
+    if (this.props.totalTabs !== nextProps.totalTabs) {
+      this.onUpdateTabSize()
+    }
+  }
+
   render () {
     const perPageStyles = StyleSheet.create({
       themeColor: {

diff --git a/js/components/tabs.js b/js/components/tabs.js
@@ -143,6 +143,7 @@ class Tabs extends ImmutableComponent {
                 onTabClosedWithMouse={this.onTabClosedWithMouse}
                 tabWidth={this.props.fixTabWidth}
                 hasTabInFullScreen={this.props.hasTabInFullScreen}
+                totalTabs={this.props.tabs.size}
                 partOfFullPageSet={this.props.partOfFullPageSet} />)
         }
         {(() => {

diff --git a/js/constants/appConfig.js b/js/constants/appConfig.js
@@ -126,7 +126,7 @@ module.exports = {
     'search.offer-search-suggestions': false, // false by default for privacy reasons
     'tabs.switch-to-new-tabs': false,
     'tabs.paint-tabs': true,
-    'tabs.tabs-per-page': 10,
+    'tabs.tabs-per-page': 20,
     'tabs.close-action': 'parent',
     'tabs.show-tab-previews': true,
     'tabs.show-dashboard-images': true,