From 398a3ccd416dc5084ddf6d3f1ebf8b8742c41fd8 Mon Sep 17 00:00:00 2001
From: Daniel Le <greenrecyclebin@gmail.com>
Date: Sun, 25 Jun 2017 11:05:00 +0800
Subject: [PATCH] Always show the overflow indicator

On the bookmarks toolbar.

Fix #6869.

However, there is now too much space before the overflow indicator.

I'm not well-versed with CSS so I'd appreciate some pointers.
Auditors:

Test Plan:
---
 app/common/lib/bookmarkUtil.js | 35 ++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/common/lib/bookmarkUtil.js b/app/common/lib/bookmarkUtil.js
index f1beea204f0..12df705feb5 100644
--- a/app/common/lib/bookmarkUtil.js
+++ b/app/common/lib/bookmarkUtil.js
@@ -75,7 +75,7 @@ const getToolbarBookmarks = (state) => {
     .sort(siteUtil.siteSort)
     .filter((bookmark) => !bookmark.get('parentFolderId'))
   let widthAccountedFor = 0
-  const overflowButtonWidth = 25
+
   const onlyFavicon = showOnlyFavicon()
   const favicon = showFavicon()
 
@@ -92,7 +92,11 @@ const getToolbarBookmarks = (state) => {
   const fontFamily = domUtil.getStyleConstants('default-font-family')
   const chevronWidth = chevronMargin + fontSize
   const margin = favicon && onlyFavicon ? 0 : bookmarkItemMargin
+
   const windowWidth = window.innerWidth
+  const overflowButtonWidth = 25
+  const maximumBookmarksToolbarWidth = windowWidth - overflowButtonWidth
+
   widthAccountedFor += toolbarPadding
 
   // Loop through until we fill up the entire bookmark toolbar width
@@ -106,15 +110,38 @@ const getToolbarBookmarks = (state) => {
     }
     const currentChevronWidth = favicon && current.get('folderId') ? chevronWidth : 0
     if (favicon && onlyFavicon) {
-      widthAccountedFor += padding + iconWidth + currentChevronWidth
+      const extraWidth = padding + iconWidth + currentChevronWidth
+
+      widthAccountedFor += extraWidth
+
+      if (widthAccountedFor >= maximumBookmarksToolbarWidth) {
+        widthAccountedFor -= extraWidth
+        i--
+
+        break
+      }
     } else {
       const text = current.get('customTitle') || current.get('title') || current.get('location')
-      widthAccountedFor += Math.min(calculateTextWidth(text, `${fontSize} ${fontFamily}`) + padding + iconWidth + currentChevronWidth, maxWidth)
+      const extraWidth = Math.min(calculateTextWidth(text, `${fontSize} ${fontFamily}`) + padding + iconWidth + currentChevronWidth, maxWidth)
+
+      widthAccountedFor += extraWidth
+
+      if (widthAccountedFor >= maximumBookmarksToolbarWidth) {
+        widthAccountedFor -= extraWidth
+        i--
+
+        break
+      }
     }
     widthAccountedFor += margin
-    if (widthAccountedFor >= windowWidth - overflowButtonWidth) {
+
+    if (widthAccountedFor >= maximumBookmarksToolbarWidth) {
+      widthAccountedFor -= margin
+      i--
+
       break
     }
+
     i++
   }