Add 'fitContent' props to browserButton

Fixes brave#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 brave#10465)
- Polish .searchInput on about:bookmarks and about:history (addresses brave#10898 and brave#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

Author: Suguru Hirahara

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>
 

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,16 +144,22 @@ 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
       bottom: '-1px'
     }
   },
 
+  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',

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>
   }

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>
   }

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}

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;
 }
 
 

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;
       }
     }
   }