fixes to showing page host in titleMode

Auditors: @bbondy

js/components/urlBar.js

@@ -173,29 +173,23 @@ class UrlBar extends ImmutableComponent {
     this.updateDOM()
   }
 
-  get titleValue () {
-    const parsedUrl = urlParse(this.props.activeFrameProps.get('location'))
-    let titlePrefix = ''
-    if (parsedUrl.protocol !== 'about:') {
-      titlePrefix += parsedUrl.host + ' | '
-    }
+  get hostValue () {
+    const parsed = urlParse(this.props.activeFrameProps.get('location'))
+    return parsed.host && parsed.protocol !== 'about:' ? parsed.host : ''
+  }
 
+  get titleValue () {
     // For about:newtab we don't want the top of the browser saying New Tab
     // Instead just show "Brave"
     return ['about:blank', 'about:newtab'].includes(this.props.urlbar.get('location'))
-      ? '' : titlePrefix + this.props.activeFrameProps.get('title')
+      ? '' : this.props.activeFrameProps.get('title')
   }
 
   get locationValue () {
     return ['about:newtab'].includes(this.props.urlbar.get('location'))
       ? '' : this.props.urlbar.get('location')
   }
 
-  get inputValue () {
-    return this.props.titleMode
-      ? this.titleValue : this.locationValue
-  }
-
   get loadTime () {
     let loadTime = ''
     if (this.props.activeFrameProps.get('startLoadTime') &&
@@ -248,7 +242,9 @@ class UrlBar extends ImmutableComponent {
             extendedValidation: this.extendedValidationSSL
           })}/>
         <div id='titleBar'>
-          {this.titleValue}
+          <span><strong>{this.hostValue}</strong></span>
+          <span>{this.hostValue && this.titleValue ? ' | ' : ''}</span>
+          <span>{this.titleValue}</span>
         </div>
         </div>
       <input type='text'
@@ -259,7 +255,7 @@ class UrlBar extends ImmutableComponent {
         onChange={this.onChange.bind(this)}
         onClick={this.onClick.bind(this)}
         onContextMenu={contextMenus.onUrlBarContextMenu.bind(this)}
-        value={this.inputValue}
+        value={this.locationValue}
         data-l10n-id='urlbar'
         className={cx({
           insecure: !this.secure && this.props.loading === false && !this.isHTTPPage,

test/lib/selectors.js

@@ -10,5 +10,6 @@ module.exports = {
   tabPage1: '[data-tab-page="0"]',
   tabPage2: '[data-tab-page="1"]',
   closeTab: '.closeTab',
-  urlbarIcon: '.urlbarIcon'
+  urlbarIcon: '.urlbarIcon',
+  titleBar: '#titleBar'
 }

test/navigationBarTest.js

@@ -2,7 +2,7 @@
 
 const Brave = require('./lib/brave')
 const Config = require('../js/constants/config').default
-const {urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime, urlbarIcon} = require('./lib/selectors')
+const {urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime, titleBar, urlbarIcon} = require('./lib/selectors')
 const urlParse = require('url').parse
 const assert = require('assert')
 
@@ -68,7 +68,7 @@ describe('urlbar', function () {
       it('has title mode', function *() {
         const host = this.host
         yield this.app.client.waitUntil(function () {
-          return this.getValue(urlInput).then(val => val === host + ' | Page 1')
+          return this.getText(titleBar).then(val => val === host + ' | Page 1')
         })
         .isExisting(navigatorLoadTime).then(isExisting => assert(!isExisting))
       })
@@ -86,7 +86,7 @@ describe('urlbar', function () {
         yield this.app.client
           .ipcSend('shortcut-focus-url', false)
           .waitUntil(function () {
-            return this.getValue(urlInput).then(val => val === page1Url)
+            return this.getCssProperty(titleBar, 'display').then(display => display.value === 'none')
           })
         yield selectsText(this.app.client, page1Url)
       })
@@ -102,10 +102,9 @@ describe('urlbar', function () {
       })
 
       it('does not have title mode', function *() {
-        let page_no_title = this.page_no_title
         yield this.app.client
           .waitUntil(function () {
-            return this.getValue(urlInput).then(val => val === page_no_title)
+            return this.getCssProperty(titleBar, 'display').then(display => display.value === 'none')
           })
           .waitForExist(navigatorLoadTime)
       })