From 98c258a71ca9edfb5539f16929ae86bb120a2b7e Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Wed, 20 Sep 2017 15:39:23 +0900
Subject: [PATCH] Add 'fitContent' props to browserButton

Fixes #11201

Only BrowserButton with 'fitContent' props are forced to have the min-width:fit-content. This change is required to apply display:flex to headerActions, as it refers width instead of min-width, even though actual min-width is larger than actual width of the buttons.

- Align header items on about:history (fixes #10465)
- Polish .searchInput on about:bookmarks and about:history (addresses #10898 and #10899)

Auditors: @cezaraugusto

Test Plan:
1. Open about:history
2. Open about:bookmarks
3. Make sure the header items are not wrapped

Test Plan 2:
1. Open https://expired.badssl.com/
2. Minimize the window's width
3. Make sure the buttons' text do not overflow
---
 app/renderer/about/bookmarks/bookmarks.js     | 18 +++---
 .../components/common/browserButton.js        | 15 +++--
 js/about/certerror.js                         |  8 +--
 js/about/errorPage.js                         |  4 +-
 js/about/history.js                           | 17 +++---
 less/about/bookmarks.less                     |  2 +-
 less/about/siteDetails.less                   | 58 ++++++++-----------
 7 files changed, 57 insertions(+), 65 deletions(-)

diff --git a/app/renderer/about/bookmarks/bookmarks.js b/app/renderer/about/bookmarks/bookmarks.js
index fe1d3fa6a6d..e7bb77fd260 100644
--- a/app/renderer/about/bookmarks/bookmarks.js
+++ b/app/renderer/about/bookmarks/bookmarks.js
@@ -142,16 +142,14 @@ class Bookmarks extends React.Component {
       })}>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>
-          <div className='searchWrapper'>
-            <span data-l10n-id='importBrowserData' className='importBrowserData' onClick={this.importBrowserData} />
-            <span data-l10n-id='exportBookmarks' className='exportBookmarks' onClick={this.exportBookmarks} />
-            <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
-            {
-              this.state.search
-                ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
-                : <span className='fa fa-search searchInputPlaceholder' />
-            }
-          </div>
+          <span data-l10n-id='importBrowserData' className='importBrowserData' onClick={this.importBrowserData} />
+          <span data-l10n-id='exportBookmarks' className='exportBookmarks' onClick={this.exportBookmarks} />
+          <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
+          {
+            this.state.search
+              ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
+              : <span className='fa fa-search searchInputPlaceholder' />
+          }
         </div>
       </div>
 
diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index 9428a2964a3..5ec1c959702 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -20,8 +20,9 @@ class BrowserButton extends ImmutableComponent {
       this.props.extensionItem && styles.browserButton_extensionItem,
       this.props.groupedItem && styles.browserButton_groupedItem,
       this.props.notificationItem && styles.browserButton_notificationItem,
-      this.props.iconOnly && styles.browserButton_iconOnly,
       this.props.panelItem && styles.browserButton_panelItem,
+      this.props.iconOnly && styles.browserButton_iconOnly,
+      this.props.fitContent && styles.browserButton_fitContent,
       // TODO: These are other button styles app-wise
       // that needs to be refactored and included in this file
       // .............................................
@@ -143,9 +144,8 @@ const styles = StyleSheet.create({
     paddingRight: '16px',
     paddingLeft: '16px',
 
-    // Ensure that the button label does not overflow
-    width: `calc(${globalStyles.spacing.defaultFontSize} * 6)`, // issue #6384
-    minWidth: 'fit-content',
+    width: 'auto',
+    minWidth: `calc(${globalStyles.spacing.defaultFontSize} * 6)`, // issue #6384
 
     ':active': {
       // push the button down when active
@@ -153,6 +153,13 @@ const styles = StyleSheet.create({
     }
   },
 
+  browserButton_fitContent: {
+    // See: 11021
+    // Ensure that the button label does not overflow
+    width: `calc(${globalStyles.spacing.defaultFontSize} * 6)`, // issue #6384
+    minWidth: 'fit-content'
+  },
+
   browserButton_primaryColor: {
     background: globalStyles.button.primary.background,
     borderLeft: '2px solid transparent',
diff --git a/js/about/certerror.js b/js/about/certerror.js
index 6481bb40bcd..7418ce36cd5 100644
--- a/js/about/certerror.js
+++ b/js/about/certerror.js
@@ -137,12 +137,12 @@ class CertErrorPage extends React.Component {
           </div>) : null}
       </div>
       <div className='buttons'>
-        <BrowserButton actionItem l10nId='certErrorSafety' onClick={this.onSafety.bind(this)} />
+        <BrowserButton actionItem fitContent l10nId='certErrorSafety' onClick={this.onSafety.bind(this)} />
         {this.state.url ? (this.state.advanced
-          ? (<BrowserButton subtleItem groupedItem l10nId='certErrorButtonText' onClick={this.onAccept.bind(this)} />) : null) : null}
+          ? (<BrowserButton subtleItem groupedItem fitContent l10nId='certErrorButtonText' onClick={this.onAccept.bind(this)} />) : null) : null}
         {this.state.url ? (this.state.advanced
-          ? (<BrowserButton subtleItem groupedItem l10nId='certErrorShowCertificate' onClick={this.onDetail.bind(this)} />)
-          : <BrowserButton subtleItem groupedItem l10nId='certErrorAdvanced' onClick={this.onAdvanced.bind(this)} />) : null}
+          ? (<BrowserButton subtleItem groupedItem fitContent l10nId='certErrorShowCertificate' onClick={this.onDetail.bind(this)} />)
+          : <BrowserButton subtleItem groupedItem fitContent l10nId='certErrorAdvanced' onClick={this.onAdvanced.bind(this)} />) : null}
       </div>
     </div>
   }
diff --git a/js/about/errorPage.js b/js/about/errorPage.js
index 8c3a26b5c4a..696d834891c 100644
--- a/js/about/errorPage.js
+++ b/js/about/errorPage.js
@@ -38,8 +38,8 @@ class ErrorPage extends React.Component {
         <span className='errorText' data-l10n-id={this.state.message} />
       </div>
       <div className='buttons'>
-        {this.showBackButton ? <BrowserButton actionItem l10nId='back' onClick={this.goBack} /> : null}
-        {this.state.url ? <BrowserButton actionItem groupedItem l10nId='errorReload' l10nArgs={{url: this.state.url}} onClick={this.reload} /> : null}
+        {this.showBackButton ? <BrowserButton actionItem fitContent l10nId='back' onClick={this.goBack} /> : null}
+        {this.state.url ? <BrowserButton actionItem groupedItem fitContent l10nId='errorReload' l10nArgs={{url: this.state.url}} onClick={this.reload} /> : null}
       </div>
     </div>
   }
diff --git a/js/about/history.js b/js/about/history.js
index 1f7fde4ef07..b45ca565057 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -214,26 +214,23 @@ class AboutHistory extends React.Component {
       })}>
         <AboutPageSectionTitle data-l10n-id='history' />
         <div className='headerActions'>
-          <div className='searchWrapper'>
-            <input type='text' className='searchInput' ref='historySearch' id='historySearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='historySearch' />
-            {
-              this.state.search
-              ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
-              : <span className='fa fa-search searchInputPlaceholder' />
-            }
-          </div>
           <BrowserButton primaryColor
             l10nId='clearBrowsingDataNow'
             testId='clearBrowsingDataButton'
             onClick={this.clearBrowsingDataNow}
           />
+          <input type='text' className='searchInput' ref='historySearch' id='historySearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='historySearch' />
+          {
+            this.state.search
+            ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
+            : <span className='fa fa-search searchInputPlaceholder' />
+          }
         </div>
       </div>
 
       <div className={cx({
         siteDetailsPageContent: true,
-        [css(commonStyles.siteDetailsPageContent)]: true,
-        [css(commonStyles.noMarginLeft)]: true
+        [css(commonStyles.siteDetailsPageContent, commonStyles.noMarginLeft)]: true
       })}>
         <GroupedHistoryList
           languageCodes={this.state.languageCodes}
diff --git a/less/about/bookmarks.less b/less/about/bookmarks.less
index 45a4c63b005..d4b3181fa1f 100644
--- a/less/about/bookmarks.less
+++ b/less/about/bookmarks.less
@@ -179,7 +179,7 @@
   height: 22px;
   display: inline-block;
   vertical-align: top;
-  margin: 7px 10px 5px 0;
+  margin: 7px 0 5px 10px;
 }
 
 
diff --git a/less/about/siteDetails.less b/less/about/siteDetails.less
index 3e18b285b42..d594785e986 100644
--- a/less/about/siteDetails.less
+++ b/less/about/siteDetails.less
@@ -18,43 +18,33 @@ body {
     padding: 0 @aboutPageSectionPadding;
 
     .headerActions {
-      .searchWrapper {
-        display: inline-block;
+      display: flex;
+      align-items: center;
 
-        /*overridden from siteDetails.less*/
-        input.searchInput {
-          float: none;
-          padding: 5px;
-          margin-top: 0;
-          margin-right: 12px;
-          font-size: 16px;
-          min-width: 280px;
-          height: 22px;
-        }
-        .searchInputPlaceholder {
-          color: @gray;
-          float: none;
-          font-family: FontAwesome;
-          left: -35px;
-          margin: 0;
-          padding: 0;
-          position: relative;
-          width: 0;
-        }
-        .searchInputClear {
-          float: none;
-          margin: 0;
-          padding: 0;
-          width: 0;
-          position: relative;
-          left: -35px;
-        }
+      /*overridden from siteDetails.less*/
+      input.searchInput {
+        padding: 5px;
+        margin-left: 12px;
+        font-size: 16px;
+        min-width: 280px;
       }
-      /*copied from preferences.less*/
-      span.browserButton.primaryButton.clearBrowsingDataButton {
-        font-size: 0.9em;
-        padding: 5px 20px;
+
+      .searchInputPlaceholder {
+        color: @gray;
+        font-family: FontAwesome;
+        left: -25px;
+        margin: 0;
+        padding: 0;
+        position: relative;
+        width: 0;
+      }
+
+      .searchInputClear {
         margin: 0;
+        padding: 0;
+        width: 0;
+        position: relative;
+        left: -25px;
       }
     }
   }