Add 'fitContent' props to browserButton

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