Misc change

- Fix unlock icon opacity - Fix the position where 'arrowUp' on addEditBookmarkHanger should appear - Remove testHookLoadDone - It was implemented here and is no longer used: https://github.com/brave/browser-laptop/blame/98225045cefa7d1e5e599c80d4490ca4c43136e2/js/components/urlBar.js#L92 - Remove @navigatorHeight (obsolete) from variables.less and global.js - Remove animation from publisherToggleContainer - Replace className - navigatorWrapper -> navigationBarWrapper - navbarCaptionButtonContainer -> navigator - navigator__navbarMenubarFlexContainer -> navigator__menuBarAndNavigationBar - navigationBar__urlbarForm__buttonContainer -> urlbarForm__buttonContainer - showNoScriptInfo -> noScript - noScriptButton -> button - braveMenu -> counterBraveMenu - Replace 'navigator' on navigationBar.js with 'navigationBar' - Replace #navigator with data-test-id - Reorder functions etc Test Plan: available on #9299 (comment)
brave · Jun 28, 2017 · 25f02d4 · 25f02d4
1 parent 8997c76
commit 25f02d4
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 137 deletions.
diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -309,6 +309,20 @@ class AddEditBookmarkHanger extends ImmutableComponent {
   }
 }
 
+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: {
@@ -335,7 +349,7 @@ const styles = StyleSheet.create({
   },
   bookmarkHanger__arrowUp: {
     position: 'relative',
-    left: '54px',
+    left: bookmarkHangerPosition,
 
     '::after': {
       content: '""',
@@ -349,7 +363,7 @@ const styles = StyleSheet.create({
     }
   },
   bookmarkHanger__withHomeButton: {
-    left: '83px'
+    left: bookmarkHangerPositionWithHomeButton
   },
   bookmarkHanger__label: {
     display: 'block',

diff --git a/app/renderer/components/common/commonForm.js b/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'
   },
 

diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
@@ -125,7 +125,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,
@@ -136,7 +136,7 @@ class NavigationBar extends React.Component {
     />
   }
 
-  // BEM Level: navigator__navigationButtonContainer
+  // BEM Level: navigationBar__navigationButtonContainer
   get reloadButton () {
     return <LongPressButton className={cx({
       normalizeButton: true,
@@ -149,7 +149,7 @@ class NavigationBar extends React.Component {
     />
   }
 
-  // BEM Level: navigator__navigationButtonContainer
+  // BEM Level: navigationBar__navigationButtonContainer
   get homeButton () {
     return <button className={cx({
       normalizeButton: true,
@@ -161,17 +161,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'}
@@ -180,12 +180,12 @@ class NavigationBar extends React.Component {
     </span>
   }
 
-  // BEM Level: navigator
+  // BEM Level: navigationBar
   get publisherToggleContainer () {
     return <span className={css(
-      commonStyles.navigator__buttonContainer,
-      commonStyles.navigator__buttonContainer_outsideOfURLbar,
-      styles.navigator__buttonContainer_publisherToggleContainer
+      commonStyles.navigationBar__buttonContainer,
+      commonStyles.navigationBar__buttonContainer_outsideOfURLbar,
+      styles.navigationBar__buttonContainer_publisherToggleContainer
     )}>
       <PublisherToggle
         location={this.props.location}
@@ -263,12 +263,13 @@ class NavigationBar extends React.Component {
       return null
     }
 
-    return <div id='navigator'
+    return <div id='navigationBar'
       ref='navigator'
+      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.bookmarkDetail && this.props.bookmarkDetail.get('isBookmarkHanger')
@@ -285,7 +286,7 @@ class NavigationBar extends React.Component {
         !this.props.titleMode
         ? <span className={css(
             commonStyles.navigationButtonContainer,
-            styles.navigator__navigationButtonContainer,
+            styles.navigationBar__navigationButtonContainer,
           )}>
           {
             this.props.loading
@@ -299,7 +300,7 @@ class NavigationBar extends React.Component {
         !this.props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
         ? <span className={css(
             commonStyles.navigationButtonContainer,
-            styles.navigator__navigationButtonContainer,
+            styles.navigationBar__navigationButtonContainer,
           )}>
           {this.homeButton}
         </span>
@@ -328,14 +329,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,
@@ -344,24 +345,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: {
@@ -391,27 +390,30 @@ const styles = StyleSheet.create({
     backgroundSize: '16px 16px'
   },
 
-  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`
   },
 
-  navigator__buttonContainer_publisherToggleContainer: {
+  navigationBar__buttonContainer_publisherToggleContainer: {
     borderLeft: 'none',
     borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
+    borderBottomLeftRadius: 0,
+
+    // TODO (Suguru): Refactor navigationBar.less to remove !important. See the wildcard style under '#navigationBar'.
+    animation: 'none !important'
   }
 })
 

diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
@@ -135,7 +135,7 @@ class Navigator extends React.Component {
   }
 
   onDoubleClick (e) {
-    if (!e.target.className.includes('navigatorWrapper')) {
+    if (!e.target.className.includes('navigationBarWrapper')) {
       return
     }
     return !isMaximized() ? windowActions.shouldMaximize(getCurrentWindowId()) : windowActions.shouldMinimize(getCurrentWindowId())
@@ -151,11 +151,11 @@ class Navigator extends React.Component {
     ipc.off(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward)
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper
-  get navigatorWrapper () {
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper
+  get navigationBarWrapper () {
     return <div className={cx({
-      navigatorWrapper: true,
-      [css(styles.navigatorWrapper)]: true
+      navigationBarWrapper: true,
+      [css(styles.navigationBarWrapper)]: true
     })}
       onDoubleClick={this.onDoubleClick}
       onDragOver={this.onDragOver}
@@ -167,7 +167,7 @@ class Navigator extends React.Component {
     </div>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons
   get topLevelStartButtons () {
     return <div className={cx({
       topLevelStartButtons: true,
@@ -179,7 +179,7 @@ class Navigator extends React.Component {
     </div>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons__topLevelStartButtonContainer
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
   get backButton () {
     return <span data-test-id={
       !this.props.canGoBack
@@ -206,7 +206,7 @@ class Navigator extends React.Component {
     </span>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons__topLevelStartButtonContainer
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
   get forwardButton () {
     return <span data-test-id={
       !this.props.canGoForward
@@ -233,7 +233,7 @@ class Navigator extends React.Component {
     </span>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons
   get topLevelEndButtons () {
     return <div className={cx({
       topLevelEndButtons: true,
@@ -271,7 +271,7 @@ class Navigator extends React.Component {
     return buttons
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__braveMenuButton
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__braveMenuButton
   get braveMenuButton () {
     return <BrowserButton className={css(
       styles.braveMenuButton,
@@ -287,17 +287,17 @@ class Navigator extends React.Component {
     />
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__counter_braveMenu
   get counterBraveMenu () {
     return <div data-test-id='counterBraveMenu'
       className={css(
-        styles.braveMenu,
-        (this.props.menuBarVisible || !isWindows()) && styles.braveMenu_right,
+        styles.counterBraveMenu,
+        (this.props.menuBarVisible || !isWindows()) && styles.counterBraveMenu_right,
 
         // delay badge show-up.
         // this is also set for extension badge
         // in a way that both can appear at the same time.
-        styles.braveMenu_subtleShowUp
+        styles.counterBraveMenu_subtleShowUp
       )}>
       {this.props.totalBlocks}
     </div>
@@ -353,10 +353,10 @@ class Navigator extends React.Component {
 
   render () {
     return <div className={cx({
-      navbarCaptionButtonContainer: true,
+      navigator: true,
       allowDragging: this.props.shouldAllowWindowDrag
     })}>
-      <div className={css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer)}>
+      <div className={css(styles.navigator__menuBarAndNavigationBar)}>
         {
           this.props.menuBarVisible
             ? <div className='menubarContainer'>
@@ -365,7 +365,7 @@ class Navigator extends React.Component {
             </div>
             : null
         }
-        {this.navigatorWrapper}
+        {this.navigationBarWrapper}
       </div>
       {
         this.props.isCaptionButton
@@ -377,7 +377,7 @@ class Navigator extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer: {
+  navigator__menuBarAndNavigationBar: {
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -387,7 +387,7 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   },
 
-  navigatorWrapper: {
+  navigationBarWrapper: {
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'space-between',
@@ -412,7 +412,7 @@ const styles = StyleSheet.create({
     paddingLeft: '4px'
   },
 
-  // cf: navigator__navigationButtonContainer on navitionBar.js
+  // cf: navigationBar__navigationButtonContainer on navitionBar.js
   topLevelStartButtonContainer: {
     width: '34px'
   },
@@ -496,7 +496,7 @@ const styles = StyleSheet.create({
     marginRight: '3px'
   },
 
-  braveMenu: {
+  counterBraveMenu: {
     position: 'absolute',
     left: 'calc(50% - 1px)',
     top: '14px',
@@ -512,12 +512,12 @@ const styles = StyleSheet.create({
     WebkitUserSelect: 'none'
   },
 
-  braveMenu_right: {
+  counterBraveMenu_right: {
     left: 'auto',
     right: '2px'
   },
 
-  braveMenu_subtleShowUp: globalStyles.animations.subtleShowUp
+  counterBraveMenu_subtleShowUp: globalStyles.animations.subtleShowUp
 })
 
 module.exports = ReduxComponent.connect(Navigator)