Misc change

- Convert 'buttonSeparator'

Full changelog: 25f02d4

Test Plan: available on #9299 (comment)

Author: Suguru Hirahara

app/renderer/components/bookmarks/addEditBookmarkHanger.js

@@ -159,6 +159,20 @@ class AddEditBookmarkHanger extends React.Component {
   }
 }
 
+const navigationButtonContainerWidth = globalStyles.navigationBar.navigationButtonContainer.width
+const navigationButtonContainerMarginRight = globalStyles.navigationBar.navigationButtonContainer.marginRight
+const bookmarkButtonContainerWidth = globalStyles.navigationBar.urlbarForm.height
+
+// Add navigationButtonContainerMarginRight (6px)
+const navigationButtonWidth = `calc(${navigationButtonContainerWidth} + ${navigationButtonContainerMarginRight})`
+
+// Count the reload and stop button, adding the half width of the bookmark button container
+// 12px == arrowUp width
+const bookmarkHangerPosition = `calc(12px + ${navigationButtonWidth} + (${bookmarkButtonContainerWidth} / 2))`
+
+// Add another container width
+const bookmarkHangerPositionWithHomeButton = `calc(${bookmarkHangerPosition} + ${navigationButtonWidth})`
+
 const styles = StyleSheet.create({
   // Copied from commonForm.js
   commonFormSection: {
@@ -185,7 +199,7 @@ const styles = StyleSheet.create({
   },
   bookmarkHanger__arrowUp: {
     position: 'relative',
-    left: '54px',
+    left: bookmarkHangerPosition,
 
     '::after': {
       content: '""',
@@ -199,7 +213,7 @@ const styles = StyleSheet.create({
     }
   },
   bookmarkHanger__withHomeButton: {
-    left: '83px'
+    left: bookmarkHangerPositionWithHomeButton
   },
   bookmark__bottomWrapper: {
     display: 'flex',

app/renderer/components/common/commonForm.js

@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
     maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
     height: 'initial', // #8634
 
-    // Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
+    // Cancel the inherited value from navigator__menuBarAndNavigationBar on navigator.js, which is 'nowrap'.
     whiteSpace: 'normal'
   },
 

app/renderer/components/navigation/navigationBar.js

@@ -88,7 +88,7 @@ class NavigationBar extends React.Component {
       this.props.bookmarked
   }
 
-  // BEM Level: navigator__navigationButtonContainer
+  // BEM Level: navigationBar__navigationButtonContainer
   get stopButton () {
     return <button className={cx({
       normalizeButton: true,
@@ -99,7 +99,7 @@ class NavigationBar extends React.Component {
     />
   }
 
-  // BEM Level: navigator__navigationButtonContainer
+  // BEM Level: navigationBar__navigationButtonContainer
   get reloadButton () {
     return <LongPressButton className={cx({
       normalizeButton: true,
@@ -112,17 +112,17 @@ class NavigationBar extends React.Component {
     />
   }
 
-  // BEM Level: navigator
+  // BEM Level: navigationBar
   get bookmarkButtonContainer () {
     return <span className={css(
-      commonStyles.navigator__buttonContainer,
-      commonStyles.navigator__buttonContainer_outsideOfURLbar,
-      styles.navigator__buttonContainer_bookmarkButtonContainer
+      commonStyles.navigationBar__buttonContainer,
+      commonStyles.navigationBar__buttonContainer_outsideOfURLbar,
+      styles.navigationBar__buttonContainer_bookmarkButtonContainer
     )}>
       <button className={cx({
         normalizeButton: true,
         withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-        [css(styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
+        [css(styles.navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
       })}
         data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
         data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
@@ -193,12 +193,12 @@ class NavigationBar extends React.Component {
       return null
     }
 
-    return <div
-      id='navigator'
+    return <div id='navigationBar'
+      data-test-id='navigationBar'
       data-frame-key={this.props.activeFrameKey}
       className={cx({
         titleMode: this.props.titleMode,
-        [css(styles.navigator, (this.props.isDarwin && this.props.isFullScreen) && styles.navigator_isDarwin_isFullScreen, this.props.titleMode && styles.navigator_titleMode, this.props.isWideUrlBarEnabled && styles.navigator_wide)]: true
+        [css(styles.navigationBar, (this.props.isDarwin && this.props.isFullScreen) && styles.navigationBar_isDarwin_isFullScreen, this.props.titleMode && styles.navigationBar_titleMode, this.props.isWideUrlBarEnabled && styles.navigationBar_wide)]: true
       })}>
       {
         this.props.showBookmarkHanger
@@ -210,7 +210,7 @@ class NavigationBar extends React.Component {
         ? null
         : <span className={css(
             commonStyles.navigationButtonContainer,
-            styles.navigator__navigationButtonContainer,
+            styles.navigationBar__navigationButtonContainer,
           )}>
           {
             this.props.isLoading
@@ -223,7 +223,7 @@ class NavigationBar extends React.Component {
         this.props.showHomeButton
         ? <span className={css(
             commonStyles.navigationButtonContainer,
-            styles.navigator__navigationButtonContainer,
+            styles.navigationBar__navigationButtonContainer,
           )}>
           <HomeButton activeTabId={this.props.activeTabId} />
         </span>
@@ -237,12 +237,7 @@ class NavigationBar extends React.Component {
       <UrlBar titleMode={this.props.titleMode} />
       {
         this.props.showPublisherToggle
-        ? <div className={css(
-          this.props.titleMode && styles.navigator__endButtons_titleMode,
-          !this.props.titleMode && styles.navigator__endButtons_notTitleMode
-        )}>
-          <PublisherToggle />
-        </div>
+        ? <PublisherToggle />
         : null
       }
     </div>
@@ -253,14 +248,14 @@ const rightMargin = `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`
 
 const styles = StyleSheet.create({
 
-  navigator: {
+  navigationBar: {
     boxSizing: 'border-box',
     display: 'flex',
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
     fontSize: '20px',
-    minWidth: '0%', // allow the navigator to shrink
+    minWidth: '0%', // allow the navigationBar to shrink
     maxWidth: '900px',
     marginRight: rightMargin,
     padding: 0,
@@ -269,24 +264,22 @@ const styles = StyleSheet.create({
     zIndex: globalStyles.zindex.zindexNavigationBar
   },
 
-  navigator_isDarwin_isFullScreen: {
+  navigationBar_isDarwin_isFullScreen: {
     marginRight: 0
   },
 
-  navigator_titleMode: {
+  navigationBar_titleMode: {
     animation: 'fadeIn 1.2s'
   },
 
-  navigator_wide: {
+  navigationBar_wide: {
     maxWidth: '100%',
     marginRight: '0',
     justifyContent: 'initial'
   },
 
-  // cf: topLevelStartButtonContainer on navigator.js
-  navigator__navigationButtonContainer: {
-    // globalStyles.navigationBar.urlbarForm.height + 2px
-    width: '27px'
+  navigationBar__navigationButtonContainer: {
+    width: globalStyles.navigationBar.navigationButtonContainer.width
   },
 
   navigationButton: {
@@ -312,20 +305,20 @@ const styles = StyleSheet.create({
   },
 
   // cf: navigator__buttonContainer_addPublisherButtonContainer on publisherToggle.js
-  navigator__buttonContainer_bookmarkButtonContainer: {
+  navigationBar__buttonContainer_bookmarkButtonContainer: {
     borderRight: 'none',
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   },
 
-  navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
+  navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
     background: `url(${bookmarkButton}) center no-repeat`,
     backgroundSize: '14px 14px',
     width: '100%',
     height: '100%'
   },
 
-  navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
+  navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
     background: `url(${bookmarkedButton}) center no-repeat`
   }
 })