2 files changed, 66 insertions, 0 deletions

diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 043ff42ea..7e33d694c 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -6,6 +6,7 @@ import Webview from 'react-electron-web-view';
 import classnames from 'classnames';
 
 import ServiceModel from '../../../models/Service';
+import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 
 @observer
 export default class ServiceWebview extends Component {
@@ -20,6 +21,8 @@ export default class ServiceWebview extends Component {
 
   state = {
     forceRepaint: false,
+    targetUrl: '',
+    statusBarVisible: false,
   };
 
   componentDidMount() {
@@ -33,6 +36,17 @@ export default class ServiceWebview extends Component {
     });
   }
 
+  updateTargetUrl = (event) => {
+    let visible = true;
+    if (event.url === '' || event.url === '#') {
+      visible = false;
+    }
+    this.setState({
+      targetUrl: event.url,
+      statusBarVisible: visible,
+    });
+  }
+
   webview = null;
 
   render() {
@@ -47,6 +61,13 @@ export default class ServiceWebview extends Component {
       'services__webview--force-repaint': this.state.forceRepaint,
     });
 
+    let statusBar = null;
+    if (this.state.statusBarVisible) {
+      statusBar = (
+        <StatusBarTargetUrl position="bottom" text={this.state.targetUrl} />
+      );
+    }
+
     return (
       <div className={webviewClasses}>
         <Webview
@@ -62,11 +83,14 @@ export default class ServiceWebview extends Component {
             webview: this.webview.view,
           })}
 
+          onUpdateTargetUrl={this.updateTargetUrl}
+
           useragent={service.userAgent}
 
           disablewebsecurity
           allowpopups
         />
+        {statusBar}
       </div>
     );
   }
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
new file mode 100644
index 000000000..1c8dce0f7
--- /dev/null
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+@observer
+export default class StatusBarTargetUrl extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    className: PropTypes.string,
+    position: PropTypes.string,
+    text: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    position: 'bottom',
+    text: '',
+  };
+
+  render() {
+    const {
+      className,
+      position,
+      text,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          'status-bar-target-url': true,
+          [`status-bar-target-url--${position}`]: true,
+          [`${className}`]: true,
+        })}
+      >
+        <div className="status-bar-target-url__content">
+          {text}
+        </div>
+      </div>
+    );
+  }
+}