improve styles and position of url link container

use `<webview/>` event for url hover instead of custom preload code

desktop-app/app/components/DevicesPreviewer/index.js

@@ -16,6 +16,7 @@ import {isDeviceEligible} from '../../utils/filterUtils';
 import {getDeviceIcon} from '../../utils/iconUtils';
 import useStyes from './useStyles';
 import LiveCssEditor from '../LiveCssEditor';
+import LinkHoverDisplayContainer from '../../containers/LinkHoverDisplayContainer';
 
 export default function DevicesPreviewer(props) {
   const {
@@ -142,6 +143,7 @@ export default function DevicesPreviewer(props) {
       {(CSSEditor.position === CSS_EDITOR_MODES.RIGHT ||
         CSSEditor.position === CSS_EDITOR_MODES.BOTTOM) &&
         editor}
+      <LinkHoverDisplayContainer />
     </div>
   );
 }

desktop-app/app/components/LinkHoverDisplay/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/core';
+import {makeStyles} from '@material-ui/core/styles';
 import React from 'react';
 import cx from 'classnames';
 import styles from './styles.css';
@@ -40,6 +40,8 @@ const useStyles = makeStyles(theme => ({
     borderTopRightRadius: theme.shape.borderRadius,
     transitionDuration: theme.transitions.duration.enteringScreen,
     transitionTimingFunction: theme.transitions.easing.easeInOut,
+    backgroundColor: theme.palette.background.l2,
+    border: `1px solid ${theme.palette.background.l0}`,
   },
   show: {
     opacity: 1,
@@ -50,7 +52,7 @@ const useStyles = makeStyles(theme => ({
     fontSize: '0.7rem',
     margin: 0,
     opacity: 0.7,
-    color: '#fff',
+    color: theme.palette.mode({light: '#000', dark: '#fff'}),
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',

desktop-app/app/components/LinkHoverDisplay/styles.css

@@ -1,6 +1,5 @@
 .container {
-  background-color: #424242;
   border-top-right-radius: 5px;
   box-sizing: border-box;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  max-height: 2rem;
 }

desktop-app/app/components/WebView/index.js

@@ -62,7 +62,6 @@ const MESSAGE_TYPES = {
   tiltDevice: 'tiltDevice',
   takeScreenshot: 'takeScreenshot',
   toggleEventMirroring: 'toggleEventMirroring',
-  linkHover: 'linkHover',
 };
 
 class WebView extends Component {
@@ -285,6 +284,10 @@ class WebView extends Component {
       navigationHandler(event);
     });
 
+    this.webviewRef.current.addEventListener('update-target-url', event => {
+      this.props.setHoveredLink(event.url);
+    });
+
     this.webviewRef.current.addEventListener('devtools-closed', () => {
       if (
         this.props.browser.devToolsConfig.mode === DEVTOOLS_MODES.UNDOCKED &&
@@ -609,9 +612,6 @@ class WebView extends Component {
       case MESSAGE_TYPES.toggleEventMirroring:
         this._unPlug();
         break;
-      case MESSAGE_TYPES.linkHover:
-        this._handleLinkHover(message);
-        break;
       default:
         break;
     }
@@ -717,10 +717,6 @@ class WebView extends Component {
     this.props.onDevToolsOpen(this.props.device.id, this.getWebContentsId());
   };
 
-  _handleLinkHover = message => {
-    this.props.setHoveredLink(message.url);
-  };
-
   _flipOrientation = () => {
     if (!this.isMobile) return;
 

desktop-app/app/containers/Browser/index.js

@@ -12,7 +12,6 @@ import HeaderContainer from '../HeaderContainer';
 import os from 'os';
 import HorizontalSpacer from '../../components/HorizontalSpacer';
 import AppNotification from '../../components/AppNotification/AppNotification';
-import LinkHoverDisplayContainer from '../LinkHoverDisplayContainer';
 
 const Browser = ({browser}) => (
   <Fragment>
@@ -64,7 +63,6 @@ const Browser = ({browser}) => (
       </div>
     </div>
     <AppNotification />
-    <LinkHoverDisplayContainer />
   </Fragment>
 );
 

desktop-app/app/preload.js

@@ -160,15 +160,3 @@ ipcRenderer.on('scrollUpMessage', (event, args) => {
 ipcRenderer.on('eventsMirroringState', (event, args) => {
   menu.getMenuItemById('mirror-events').checked = args;
 });
-
-document.addEventListener('mouseover', event => {
-  if (event.target.tagName === 'A')
-    window.responsivelyApp.sendMessageToHost('linkHover', {
-      url: event.target.href,
-    });
-});
-
-document.addEventListener('mouseout', event => {
-  if (event.target.tagName === 'A')
-    window.responsivelyApp.sendMessageToHost('linkHover', {url: ''});
-});