From e4e40ec7c03caba4a478af986c6ed4a85e0cbfe9 Mon Sep 17 00:00:00 2001
From: Yuya Ochiai <yuya0321@gmail.com>
Date: Sat, 26 Nov 2016 00:37:32 +0900
Subject: [PATCH] Show URL when hovering over links

---
 src/browser/components/HoveringURL.jsx    | 32 +++++++++++++++++++++++
 src/browser/components/MainPage.jsx       |  9 ++++++-
 src/browser/components/MattermostView.jsx |  7 +++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/browser/components/HoveringURL.jsx

diff --git a/src/browser/components/HoveringURL.jsx b/src/browser/components/HoveringURL.jsx
new file mode 100644
index 00000000..ad71de9a
--- /dev/null
+++ b/src/browser/components/HoveringURL.jsx
@@ -0,0 +1,32 @@
+const React = require('react');
+
+const divStyle = {
+  backgroundColor: 'whitesmoke',
+  position: 'absolute',
+  bottom: 0,
+  paddingLeft: 4,
+  paddingRight: 16,
+  borderTopRightRadius: 4
+};
+
+const spanStyle = {
+  color: 'gray'
+};
+
+class HoveringURL extends React.Component {
+  render() {
+    return (
+      <div style={divStyle}>
+        <span style={spanStyle}>
+          {this.props.targetURL}
+        </span>
+      </div>
+    );
+  }
+}
+
+HoveringURL.propTypes = {
+  targetURL: React.PropTypes.string
+};
+
+module.exports = HoveringURL;
diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx
index f8eb505a..5bc025c9 100644
--- a/src/browser/components/MainPage.jsx
+++ b/src/browser/components/MainPage.jsx
@@ -7,6 +7,7 @@ const url = require('url');
 const LoginModal = require('./LoginModal.jsx');
 const MattermostView = require('./MattermostView.jsx');
 const TabBar = require('./TabBar.jsx');
+const HoveringURL = require('./HoveringURL.jsx');
 
 const MainPage = React.createClass({
   propTypes: {
@@ -22,7 +23,8 @@ const MainPage = React.createClass({
       mentionCounts: new Array(this.props.teams.length),
       unreadAtActive: new Array(this.props.teams.length),
       mentionAtActiveCounts: new Array(this.props.teams.length),
-      loginQueue: []
+      loginQueue: [],
+      targetURL: ''
     };
   },
   componentDidMount() {
@@ -196,6 +198,9 @@ const MainPage = React.createClass({
     loginQueue.shift();
     this.setState({loginQueue});
   },
+  handleTargetURLChange(targetURL) {
+    this.setState({targetURL});
+  },
   render() {
     var self = this;
 
@@ -234,6 +239,7 @@ const MainPage = React.createClass({
           src={team.url}
           name={team.name}
           disablewebsecurity={this.props.disablewebsecurity}
+          onTargetURLChange={self.handleTargetURLChange}
           onUnreadCountChange={handleUnreadCountChange}
           onNotificationClick={handleNotificationClick}
           ref={id}
@@ -268,6 +274,7 @@ const MainPage = React.createClass({
           { tabsRow }
           { viewsRow }
         </Grid>
+        <HoveringURL targetURL={this.state.targetURL}/>
       </div>
     );
   }
diff --git a/src/browser/components/MattermostView.jsx b/src/browser/components/MattermostView.jsx
index 7a7aec86..59243a6d 100644
--- a/src/browser/components/MattermostView.jsx
+++ b/src/browser/components/MattermostView.jsx
@@ -13,6 +13,7 @@ const MattermostView = React.createClass({
     disablewebsecurity: React.PropTypes.bool,
     name: React.PropTypes.string,
     id: React.PropTypes.string,
+    onTargetURLChange: React.PropTypes.func,
     onUnreadCountChange: React.PropTypes.func,
     src: React.PropTypes.string,
     style: React.PropTypes.object
@@ -108,6 +109,12 @@ const MattermostView = React.createClass({
       });
     });
 
+    webview.addEventListener('update-target-url', (event) => {
+      if (self.props.onTargetURLChange) {
+        self.props.onTargetURLChange(event.url);
+      }
+    });
+
     webview.addEventListener('ipc-message', (event) => {
       switch (event.channel) {
       case 'onUnreadCountChange':