Added Tooltip for all icons

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

@@ -7,6 +7,7 @@ import {iconsColor} from '../../constants/colors';
 
 import commonStyles from '../common.styles.css';
 import styles from './style.css';
+import {Tooltip} from '@material-ui/core';
 
 type Props = {
   address: string,
@@ -57,17 +58,19 @@ class AddressBar extends React.Component<Props> {
             [commonStyles.disabled]: this.props.address == this.props.homepage,
           })}
         >
-          <div
-            className={cx(commonStyles.flexAlignVerticalMiddle)}
-            onClick={this.props.setHomepage}
-          >
-            <HomePlusIcon
-              height={25}
-              width={25}
-              color={iconsColor}
-              padding={5}
-            />
-          </div>
+          <Tooltip title="Set a Homepage">
+            <div
+              className={cx(commonStyles.flexAlignVerticalMiddle)}
+              onClick={this.props.setHomepage}
+            >
+              <HomePlusIcon
+                height={22}
+                width={22}
+                color={iconsColor}
+                padding={5}
+              />
+            </div>
+          </Tooltip>
         </div>
       </div>
     );

desktop-app/app/components/Addressinput/style.css

@@ -24,6 +24,6 @@
 
 .goButton {
   position: absolute;
-  right: 10px;
+  right: 5px;
   border-radius: 50%;
 }

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

@@ -11,6 +11,7 @@ import {Icon} from 'flwww';
 import styles from './styles.module.css';
 import commonStyles from '../common.styles.css';
 import {iconsColor} from '../../constants/colors';
+import {Tooltip} from '@material-ui/core';
 
 class NavigationControls extends Component {
   render() {
@@ -35,10 +36,12 @@ class NavigationControls extends Component {
                 [commonStyles.disabled]: !backEnabled,
               })}
             />
-            <div onClick={this.props.triggerNavigationBack}>
-              <Icon type="arrowLeft" size="30px" {...iconProps} />
-              {/*<ArrowLeftIcon {...iconProps} />*/}
-            </div>
+            <Tooltip title="Back">
+              <div onClick={this.props.triggerNavigationBack}>
+                <Icon type="arrowLeft" size="30px" {...iconProps} />
+                {/*<ArrowLeftIcon {...iconProps} />*/}
+              </div>
+            </Tooltip>
           </Grid>
           <Grid
             item
@@ -52,27 +55,33 @@ class NavigationControls extends Component {
                 [commonStyles.disabled]: !forwardEnabled,
               })}
             />
-            <div onClick={this.props.triggerNavigationForward}>
-              <Icon type="arrowRight" size="30px" {...iconProps} />
-              {/*<ArrowRightIcon {...iconProps} />*/}
-            </div>
+            <Tooltip title="Forward">
+              <div onClick={this.props.triggerNavigationForward}>
+                <Icon type="arrowRight" size="30px" {...iconProps} />
+                {/*<ArrowRightIcon {...iconProps} />*/}
+              </div>
+            </Tooltip>
           </Grid>
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div
-              onClick={this.props.triggerNavigationReload}
-              style={{transform: 'rotate(90deg)'}}
-            >
-              <Icon type="rotate" {...iconProps} />
-              {/*<ReloadIcon {...iconProps} height={15} width={15} padding={5} />*/}
-            </div>
+            <Tooltip title="Reload">
+              <div
+                onClick={this.props.triggerNavigationReload}
+                style={{transform: 'rotate(90deg)'}}
+              >
+                <Icon type="rotate" {...iconProps} />
+                {/*<ReloadIcon {...iconProps} height={15} width={15} padding={5} />*/}
+              </div>
+            </Tooltip>
           </Grid>
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div
-              className={commonStyles.flexAlignVerticalMiddle}
-              onClick={this.props.goToHomepage}
-            >
-              <HomeIcon {...iconProps} padding={5} />
-            </div>
+            <Tooltip title="Go to Homepage">
+              <div
+                className={commonStyles.flexAlignVerticalMiddle}
+                onClick={this.props.goToHomepage}
+              >
+                <HomeIcon {...iconProps} padding={5} />
+              </div>
+            </Tooltip>
           </Grid>
         </Grid>
       </div>

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

@@ -12,6 +12,7 @@ import styles from './styles.module.css';
 import commonStyles from '../common.styles.css';
 import {iconsColor} from '../../constants/colors';
 import ZoomContainer from '../../containers/ZoomContainer';
+import Tooltip from '@material-ui/core/Tooltip';
 
 class ScrollControls extends Component {
   render() {
@@ -24,29 +25,39 @@ class ScrollControls extends Component {
       <div className={styles.scrollControls}>
         <Grid container spacing={1} alignItems="center">
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div onClick={this.props.triggerScrollDown}>
-              <ScrollDownIcon {...iconProps} />
-            </div>
+            <Tooltip title="Scroll Down">
+              <div onClick={this.props.triggerScrollDown}>
+                <ScrollDownIcon {...iconProps} />
+              </div>
+            </Tooltip>
           </Grid>
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div onClick={this.props.triggerScrollUp}>
-              <ScrollUpIcon {...iconProps} height={30} width={30} />
-            </div>
+            <Tooltip title="Scroll Up">
+              <div onClick={this.props.triggerScrollUp}>
+                <ScrollUpIcon {...iconProps} height={30} width={30} />
+              </div>
+            </Tooltip>
           </Grid>
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div onClick={this.props.screenshotAllDevices}>
-              <ScreenshotIcon {...iconProps} />
-            </div>
+            <Tooltip title="Take Screenshot">
+              <div onClick={this.props.screenshotAllDevices}>
+                <ScreenshotIcon {...iconProps} />
+              </div>
+            </Tooltip>
           </Grid>
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div onClick={this.props.flipOrientationAllDevices}>
-              <DeviceRotateIcon {...iconProps} />
-            </div>
+            <Tooltip title="Tilt Devices">
+              <div onClick={this.props.flipOrientationAllDevices}>
+                <DeviceRotateIcon {...iconProps} />
+              </div>
+            </Tooltip>
           </Grid>
           <Grid item className={cx(commonStyles.icons, commonStyles.enabled)}>
-            <div onClick={this.props.enableInpector}>
-              <InspectElementIcon {...iconProps} />
-            </div>
+            <Tooltip title="Inspect Element">
+              <div onClick={this.props.enableInpector}>
+                <InspectElementIcon {...iconProps} />
+              </div>
+            </Tooltip>
           </Grid>
           <ZoomContainer />
         </Grid>

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

@@ -24,6 +24,7 @@ import styles from './style.module.css';
 import commonStyles from '../common.styles.css';
 import UnplugIcon from '../icons/Unplug';
 import {captureFullPage} from './screenshotUtil';
+import {Tooltip} from '@material-ui/core';
 
 const BrowserWindow = remote.BrowserWindow;
 
@@ -371,49 +372,57 @@ class WebView extends Component {
         style={{height: deviceStyles.height * browser.zoomLevel + 40}} //Hack, ref below TODO
       >
         <div className={cx(styles.webViewToolbar)}>
-          <div
-            className={cx(
-              styles.webViewToolbarIcons,
-              commonStyles.icons,
-              commonStyles.enabled
-            )}
-            onClick={this._toggleDevTools}
-          >
-            <BugIcon width={20} color={iconsColor} />
-          </div>
-          <div
-            className={cx(
-              styles.webViewToolbarIcons,
-              commonStyles.icons,
-              commonStyles.enabled
-            )}
-            onClick={() => this.processScreenshotEvent({})}
-          >
-            <ScreenshotIcon height={18} color={iconsColor} />
-          </div>
-          <div
-            className={cx(styles.webViewToolbarIcons, commonStyles.icons, {
-              [commonStyles.enabled]: this.isMobile,
-              [commonStyles.disabled]: !this.isMobile,
-              [commonStyles.selected]: this.state.isTilted,
-            })}
-            onClick={this._flipOrientation}
-          >
-            <DeviceRotateIcon height={17} color={iconsColor} />
-          </div>
-          <div
-            className={cx(
-              styles.webViewToolbarIcons,
-              commonStyles.icons,
-              commonStyles.enabled,
-              {
-                [commonStyles.selected]: this.state.isUnplugged,
-              }
-            )}
-            onClick={this._unPlug}
-          >
-            <UnplugIcon height={30} color={iconsColor} />
-          </div>
+          <Tooltip title="Open DevTools">
+            <div
+              className={cx(
+                styles.webViewToolbarIcons,
+                commonStyles.icons,
+                commonStyles.enabled
+              )}
+              onClick={this._toggleDevTools}
+            >
+              <BugIcon width={20} color={iconsColor} />
+            </div>
+          </Tooltip>
+          <Tooltip title="Take Screenshot">
+            <div
+              className={cx(
+                styles.webViewToolbarIcons,
+                commonStyles.icons,
+                commonStyles.enabled
+              )}
+              onClick={() => this.processScreenshotEvent({})}
+            >
+              <ScreenshotIcon height={18} color={iconsColor} />
+            </div>
+          </Tooltip>
+          <Tooltip title="Tilt Device">
+            <div
+              className={cx(styles.webViewToolbarIcons, commonStyles.icons, {
+                [commonStyles.enabled]: this.isMobile,
+                [commonStyles.disabled]: !this.isMobile,
+                [commonStyles.selected]: this.state.isTilted,
+              })}
+              onClick={this._flipOrientation}
+            >
+              <DeviceRotateIcon height={17} color={iconsColor} />
+            </div>
+          </Tooltip>
+          <Tooltip title="Disable event mirroring">
+            <div
+              className={cx(
+                styles.webViewToolbarIcons,
+                commonStyles.icons,
+                commonStyles.enabled,
+                {
+                  [commonStyles.selected]: this.state.isUnplugged,
+                }
+              )}
+              onClick={this._unPlug}
+            >
+              <UnplugIcon height={30} color={iconsColor} />
+            </div>
+          </Tooltip>
         </div>
         <div
           className={cx(styles.deviceContainer)}

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

@@ -15,6 +15,7 @@ import styles from './styles.module.css';
 import commonStyles from '../common.styles.css';
 import './otherStyles.css';
 import {iconsColor} from '../../constants/colors';
+import {Tooltip} from '@material-ui/core';
 
 const marks = [
   {
@@ -77,10 +78,11 @@ export default function BrowserZoom(props) {
         'MuiGrid-root'
       )}
     >
-      <div onClick={() => setShowExpanded(!showExpanded)}>
-        <ZoomIcon width={25} color={iconsColor} />
-      </div>
-
+      <Tooltip title="Zoom In/Out">
+        <div onClick={() => setShowExpanded(!showExpanded)}>
+          <ZoomIcon width={25} color={iconsColor} />
+        </div>
+      </Tooltip>
       {/*<Grid container spacing={1}>
         <Grid item>
           <ZoomOutIcon />