Made urlBarIconContainer clickable to display connection info. Fix #7888

app/renderer/components/navigation/urlBar.js

@@ -213,6 +213,10 @@ class UrlBar extends React.Component {
     }
   }
 
+  onUrlBarIconContainerClick () {
+    windowActions.setSiteInfoVisible(true)
+  }
+
   onBlur (e) {
     windowActions.urlBarOnBlur(getCurrentWindowId(), e.target.value, this.props.urlbarLocation, eventElHasAncestorWithClasses(e, ['urlBarSuggestions', 'urlbarForm']))
   }
@@ -497,13 +501,13 @@ class UrlBar extends React.Component {
 
   render () {
     const urlbarIconContainer = this.props.evCert
-    ? (<div className='urlbarIconContainer'>
+    ? (<div onClick={this.onUrlBarIconContainerClick} className='urlbarIconContainer'>
       <UrlBarIcon
         titleMode={this.props.titleMode}
       />
       {this.showEvCert}
     </div>)
-    : (<div className='urlbarIconContainer'>
+    : (<div onClick={this.onUrlBarIconContainerClick} className='urlbarIconContainer'>
       <UrlBarIcon
         titleMode={this.props.titleMode}
       />
@@ -513,13 +517,13 @@ class UrlBar extends React.Component {
         urlbarForm: true,
         [css(styles.urlbarForm_wide)]: this.props.isWideURLbarEnabled,
         noBorderRadius: this.props.publisherButtonVisible
-      })}
+      })} 
       id='urlbar'
     >
       {urlbarIconContainer}
       {
         this.props.titleMode
-        ? <div id='titleBar' data-test-id='titleBar'>
+        ? <div id='titleBar' data-test-id='titleBar' >
           <span><strong>{this.props.hostValue}</strong></span>
           <span>{this.props.hostValue && this.titleValue ? ' | ' : ''}</span>
           <span>{this.titleValue}</span>

app/renderer/components/styles/global.js

@@ -391,7 +391,6 @@ globalStyles.color.chromeBorderColor = globalStyles.color.chromePrimary
 globalStyles.color.chromeControlsWarningBackground = globalStyles.color.chromePrimary
 globalStyles.color.audioColor = globalStyles.color.highlightBlue
 globalStyles.color.focusUrlbarOutline = globalStyles.color.highlightBlue
-globalStyles.color.siteSecureColor = globalStyles.color.buttonColor
 globalStyles.color.loadTimeColor = globalStyles.color.highlightBlue
 globalStyles.color.activeTabDefaultColor = globalStyles.color.chromePrimary
 

less/navigationBar.less

@@ -574,8 +574,6 @@
   }
 }
 
-@urlbarFormHeight: 25px;
-
 .urlbarForm {
   position: relative; // PR #6485
   width: 0; // Fixes #4298
@@ -619,8 +617,7 @@
     color: @chromeText;
 
     // #4922
-    // TODO: replace this value with a CSS variable to add a dark UI.
-    background: #fff;
+    background: @chromeControlsBackground2;
   }
 
   @media (max-width: @breakpointNarrowViewport) {
@@ -825,7 +822,7 @@
       justify-content: center;
       height: @urlbarFormHeight;
       min-height: @urlbarFormHeight;
-      margin: 0 5px;
+      margin-right: 5px;
       max-width: 40%;
 
       .urlbarIcon {
@@ -835,7 +832,7 @@
         background-position: center;
         position: relative;
         bottom: -1px;
-        margin-left: 3px;
+        padding: 5px 7px 5px 7px;
 
         // about:newtab
         &.fa-search {
@@ -863,8 +860,9 @@
 
       .evCert {
         font-size: 12px;
-        color: forestgreen;
-        padding: 5px;
+        font-weight: 500;
+        color: @siteEVColor;
+        padding-right: 5px;
         border-right: 1px solid #ccc;
         overflow: hidden;
         text-overflow: ellipsis;

less/variables.less

@@ -40,7 +40,7 @@
 @settingItemSubtextFontSize: 0.95rem;
 @audioColor: @highlightBlue;
 @focusUrlbarOutline: rgba(55, 169, 253, 0.4);
-@siteSecureColor: @buttonColor;
+@siteSecureColor: green;
 @siteInsecureColor: #C63626;
 @siteEVColor: green;
 @loadTimeColor: @highlightBlue;
@@ -52,6 +52,7 @@
 @braveDarkOrange: #D44600;
 @dragSpacing: 50px;
 @urlBarOutline: #bbb;
+@urlbarFormHeight: 25px; // added
 
 @navbarHeight: 36px;
 @downloadsBarHeight: 60px;