Merge conflicts resolved

2024-11-10 23:04:20 +00:00 · 2020-08-16 21:38:33 +05:30 · 2020-08-16 21:38:33 +05:30 · 9fa2af2d11
commit 9fa2af2d11
parent 2bc700b5df 33f09b3860
60 changed files with 1685 additions and 758 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -271,11 +271,29 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "crperezt",
+      "name": "Carlos Perez",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/20329014?v=4",
+      "profile": "https://github.com/crperezt",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "JayArya",
+      "name": "Jayant Arya",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/42388314?v=4",
+      "profile": "https://github.com/JayArya",
+      "contributions": [
+        "code"
+      ]
    }
  ],
  "contributorsPerLine": 5,
  "projectName": "responsively-app",
-  "projectOwner": "manojVivek",
+  "projectOwner": "responsively-org",
  "repoType": "github",
  "repoHost": "https://github.com",
  "skipCi": true,
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -1,54 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [master, ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [master]
-  schedule:
-    - cron: '0 6 * * 2'
-
-jobs:
-  analyse:
-    name: Analyse
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      # Override language selection by uncommenting this and choosing your languages
-      # with:
-      #   languages: go, javascript, csharp, python, cpp, java
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
--- a/README.md
+++ b/README.md
@ -142,6 +142,10 @@ Thanks go to these wonderful people ([emoji key](https://allcontributors.org/doc
    <td align="center"><a href="http://rossmoody.com"><img src="https://avatars0.githubusercontent.com/u/29072694?v=4" width="100px;" alt=""/><br /><sub><b>Ross Moody</b></sub></a><br /><a href="#design-rossmoody" title="Design">🎨</a></td>
    <td align="center"><a href="https://shokri.me"><img src="https://avatars1.githubusercontent.com/u/13661520?v=4" width="100px;" alt=""/><br /><sub><b>Mehrdad Shokri</b></sub></a><br /><a href="#infra-mehrdad-shokri" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
    <td align="center"><a href="https://github.com/abakermi"><img src="https://avatars1.githubusercontent.com/u/60294727?v=4" width="100px;" alt=""/><br /><sub><b>Abdelhak Akermi</b></sub></a><br /><a href="https://github.com/responsively-org/responsively-app/commits?author=abakermi" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/crperezt"><img src="https://avatars0.githubusercontent.com/u/20329014?v=4" width="100px;" alt=""/><br /><sub><b>Carlos Perez</b></sub></a><br /><a href="https://github.com/responsively-org/responsively-app/commits?author=crperezt" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/JayArya"><img src="https://avatars0.githubusercontent.com/u/42388314?v=4" width="100px;" alt=""/><br /><sub><b>Jayant Arya</b></sub></a><br /><a href="https://github.com/responsively-org/responsively-app/commits?author=JayArya" title="Code">💻</a></td>
  </tr>
 </table>

--- a/desktop-app/app/actions/browser.js
+++ b/desktop-app/app/actions/browser.js
@ -1,7 +1,6 @@
 // @flow
 import {ipcRenderer, remote} from 'electron';
 import pubsub from 'pubsub.js';
-import console from 'electron-timber';
 import type {Dispatch, BrowserStateType} from '../reducers/types';
 import {
  SCROLL_DOWN,
--- a/desktop-app/app/app.html
+++ b/desktop-app/app/app.html
@ -6,7 +6,7 @@
      content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval';"
    />
    <link
-      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      rel="stylesheet"
    />
    <meta charset="utf-8" />
--- a/desktop-app/app/components/Addressinput/index.js
+++ b/desktop-app/app/components/Addressinput/index.js
@ -5,6 +5,7 @@ import FavIconOff from '@material-ui/icons/StarBorder';
 import FavIconOn from '@material-ui/icons/Star';
 import {Tooltip} from '@material-ui/core';
 import {Icon} from 'flwww';
+import fs from 'fs';
 import HomePlusIcon from '../icons/HomePlus';
 import DeleteCookieIcon from '../icons/DeleteCookie';
 import DeleteStorageIcon from '../icons/DeleteStorage';
@ -252,11 +253,13 @@ class AddressBar extends React.Component<Props> {
    });
  };

-  _normalize = address => {
+  _normalize = (address: string) => {
    if (address.indexOf('://') === -1) {
      let protocol = 'https://';
      if (address.startsWith('localhost') || address.startsWith('127.0.0.1')) {
        protocol = 'http://';
+      } else if (fs.existsSync(address)) {
+        protocol = 'file://';
      }
      address = `${protocol}${address}`;
    }
--- a/desktop-app/app/components/AppNotification/AppNotification.js
+++ b/desktop-app/app/components/AppNotification/AppNotification.js
@ -4,7 +4,10 @@ import {motion} from 'framer-motion';
 import {shell} from 'electron';
 import settings from 'electron-settings';
 import {APP_NOTIFICATION} from '../../constants/settingKeys';
+import commonStyles from '../common.styles.css';
 import styles from './styles.module.css';
+import appMetadata from '../../services/db/appMetadata';
+import logo from '../../../resources/logo.svg';

 function updateNotificationStatus(id, action) {
  const notifications = settings.get(APP_NOTIFICATION) || [];
@ -36,12 +39,27 @@ const AppNotification = () => {
  const [notificationInteracted, setNotificationInteracted] = useState(false);
  const [data, setData] = useState(null);
  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      return;
+    }
    (async () => {
      try {
        const response = await (
          await fetch('https://responsively.app/assets/appMessages.json')
        ).json();
-        setData(response.notification);
+        if (!response?.notifications) {
+          return;
+        }
+        const notifications = response.notifications.sort(
+          (a, b) => a.minOpenCount - b.minOpenCount
+        );
+        const eligibleNotifications = notifications
+          .filter(({minOpenCount}) => appMetadata.getOpenCount() > minOpenCount)
+          .filter(({id}) => !checkIfInteracted(id));
+        if (eligibleNotifications.length === 0) {
+          return;
+        }
+        setData(eligibleNotifications[0]);
      } catch (err) {
        console.log('Error fetching appMessages.json', err);
      }
@ -52,7 +70,7 @@ const AppNotification = () => {
    return null;
  }

-  const {id, text, okText, dismissText, link} = data;
+  const {id, title, text, okText, dismissText, link} = data;

  const notificationClicked = () => {
    shell.openExternal(link);
@ -72,8 +90,21 @@ const AppNotification = () => {
        delay: notificationInteracted ? 0 : 3,
      }}
    >
-      <div className={styles.content} onClick={notificationClicked}>
-        {text}
+      <div className={commonStyles.flexContainer}>
+        <img src={logo} width={150} />
+      </div>
+      <div className={cx(styles.titleContainer, commonStyles.flexContainer)}>
+        <div
+          className={cx(commonStyles.flexContainer)}
+          onClick={notificationClicked}
+        >
+          {title}
+        </div>
+      </div>
+      <div className={commonStyles.flexContainer}>
+        <div className={styles.content} onClick={notificationClicked}>
+          {text}
+        </div>
      </div>
      <div className={styles.responseButtonsContainer}>
        <div
--- a/desktop-app/app/components/AppNotification/styles.module.css
+++ b/desktop-app/app/components/AppNotification/styles.module.css
@ -1,25 +1,36 @@
 .container {
-  max-width: 450px;
+  font-size: 14px;
  position: absolute;
  bottom: 35px;
  right: 25px;
-  background: white;
-  border-radius: 10px;
+  background: #7587ec;
+  border-radius: 5px;
  word-wrap: break-word;
-  color: #1e1e1e;
  box-shadow: inset 0 0 1px #000;
-  padding: 10px 20px;
+  padding: 10px 20px 20px 20px;
+  min-width: 250px;
+  max-width: 320px;
+}
+
+.titleContainer {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 10px 0;
+  text-align: center;
 }

 .content {
  cursor: pointer;
-  margin: 10px 10px 25px 10px;
+  margin: 0 0 25px 0;
+  width: 70%;
+  text-align: center;
 }

 .responseButtons {
  padding: 8px;
-  border: solid 1px #1e1e1e;
-  border-radius: 5px;
+  border: solid 1px white;
+  border-radius: 100px;
  margin: 0 10px;
  min-width: 70px;
  justify-content: center;
@ -27,10 +38,20 @@
  cursor: pointer;
 }

+.responseButtons:hover {
+  background: #6679e2;
+}
+
 .okButton {
-  background: #7587ec;
-  color: white;
-  border: 1px solid #7587ec;
+  background: #efefef;
+  border: solid 1px #efefef;
+  color: black;
+}
+
+.okButton:hover {
+  background: white;
+  border: solid 1px white;
+  color: #1e1e1e;
 }

 .responseButtonsContainer {
--- a/desktop-app/app/components/DevToolsResizer/index.js
+++ b/desktop-app/app/components/DevToolsResizer/index.js
@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react';
 import {ipcRenderer} from 'electron';
 import {Resizable} from 're-resizable';
 import {Tooltip} from '@material-ui/core';
+import pubsub from 'pubsub.js';
 import debounce from 'lodash/debounce';
 import styles from './style.module.css';
 import Cross from '../icons/Cross';
@ -10,6 +11,7 @@ import DockBottom from '../icons/DockBottom';
 import InspectElementChrome from '../icons/InspectElementChrome';
 import {DEVTOOLS_MODES} from '../../constants/previewerLayouts';
 import CrossChrome from '../icons/CrossChrome';
+import {OPEN_CONSOLE_FOR_DEVICE} from '../../constants/pubsubEvents';

 const getResizingDirections = mode => {
  if (mode === DEVTOOLS_MODES.RIGHT) {
@ -33,6 +35,8 @@ const getToolbarPosition = (mode, bounds) => {
 };

 const DevToolsResizer = ({
+  activeDevTools,
+  devices,
  size,
  open,
  mode,
@ -65,6 +69,10 @@ const DevToolsResizer = ({
    return null;
  }

+  const switchDevTools = e => {
+    pubsub.publish(OPEN_CONSOLE_FOR_DEVICE, [{deviceId: e.target.value}]);
+  };
+
  return (
    <div style={{position: 'absolute', ...getResizerPosition(mode, bounds)}}>
      <Resizable
@ -95,6 +103,21 @@ const DevToolsResizer = ({
                selected={isInspecting}
              />
            </span>
+            <div className={styles.inputSection}>
+              <span className={styles.labelText}>Device:</span>
+              <select
+                id="devices"
+                onChange={switchDevTools}
+                className={styles.chromeSelect}
+                value={activeDevTools[0].deviceId}
+              >
+                {devices.map(device => (
+                  <option value={device.id} key={device.id}>
+                    {device.name}
+                  </option>
+                ))}
+              </select>
+            </div>
          </div>
          <div className={styles.toolsGroup}>
            {mode !== DEVTOOLS_MODES.RIGHT ? (
--- a/desktop-app/app/components/DevToolsResizer/style.module.css
+++ b/desktop-app/app/components/DevToolsResizer/style.module.css
@ -4,7 +4,7 @@
  border-color: rgb(61, 61, 61);
  border-style: solid;
  border-width: 1px 0;
-  background-color: #333333;
+  background-color: #333;
  display: flex;
  justify-content: space-between;
  z-index: 1400;
@ -19,7 +19,7 @@
 }

 .toolsGroup {
-  height: 19px;
+  height: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
@ -37,6 +37,68 @@
  fill: rgb(165, 165, 165);
 }

+.inputSection {
+  margin: 0 20px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.labelText {
+  font-size: 12px;
+  margin-right: 5px;
+}
+
+.chromeSelect {
+  -webkit-appearance: none;
+  user-select: none;
+  border: 1px solid rgb(0 0 0 / 20%);
+  border-radius: 2px;
+  color: #333;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  padding-right: 20px;
+  padding-left: 6px;
+  background-image: -webkit-image-set(
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASUlEQVQY02NgIBlEMaShwCisqhITmb8x/IdB5m+JiViV/VdYsJDtJ0QR288FC/8r4LAVphCvIphCvi8EFEEUvm0iqAiskBVTDABtayfbVbR52gAAAABJRU5ErkJggg==)
+      1x,
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAMklEQVQ4y2NgGAUMDQz/8cAGahrYQE0XNlDTyw3UDMMGakZKAzVjuYGayaZhNO8MMQAAJ0U/yRb8G2IAAAAASUVORK5CYII=)
+      2x
+  );
+  background-color: hsl(0deg 0% 98%);
+  background-position: right center;
+  background-repeat: no-repeat;
+  min-width: 80px;
+  background-size: 15px;
+}
+
+.chromeSelect:disabled {
+  opacity: 38%;
+}
+
+.chromeSelect:enabled:active,
+.chromeSelect:enabled:focus,
+.chromeSelect:enabled:hover {
+  background-color: hsl(0deg 0% 96%);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+}
+
+.chromeSelect:enabled:active {
+  background-color: #f2f2f2;
+}
+
+.chromeSelect:enabled:focus {
+  border-color: transparent;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(66 133 244 / 40%);
+}
+
+.chromeSelect optgroup,
+.chromeSelect option {
+  background-color: #eee;
+  color: #222;
+}
+
@media (prefers-color-scheme: light) {
  .icon svg {
    fill: #555;
--- a/desktop-app/app/components/DeviceManager/index.js
+++ b/desktop-app/app/components/DeviceManager/index.js
@ -60,9 +60,17 @@ export default function DeviceManager(props) {
  const onDragEnd = result => {
    const {source, destination} = result;

+    if (!source || !destination) {
+      return;
+    }
+
    const sourceList = devices[source.droppableId];
    const destinationList = devices[destination.droppableId];

+    if (!sourceList || !destinationList) {
+      return;
+    }
+
    const itemDragged =
      source.droppableId === 'inactive'
        ? devices.inactiveFiltered[source.index]
--- a/desktop-app/app/components/UserPreferences/index.js
+++ b/desktop-app/app/components/UserPreferences/index.js
@ -35,7 +35,7 @@ export default function UserPreference({
                onChange={e =>
                  onChange('disableSSLValidation', e.target.checked)
                }
-                name="Diable SSL Validation"
+                name="Disable SSL Validation"
                color="primary"
              />
            }
@ -86,6 +86,25 @@ export default function UserPreference({
            }
          />
        </div>
+        <div>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={userPreferences.removeFixedPositionedElements || false}
+                onChange={e =>
+                  onChange('removeFixedPositionedElements', e.target.checked)
+                }
+                name="Remove fixed positioned elements for screenshot"
+                color="primary"
+              />
+            }
+            label={
+              <span className={cx(styles.preferenceName)}>
+                Remove fixed positioned elements for screenshot
+              </span>
+            }
+          />
+        </div>
      </div>
      <div className={cx(commonStyles.sidebarContentSectionContainer)}>
        <div>
--- a/desktop-app/app/components/WebView/index.js
+++ b/desktop-app/app/components/WebView/index.js
@ -6,7 +6,6 @@ import {Resizable} from 're-resizable';
 import {Tooltip} from '@material-ui/core';
 import debounce from 'lodash/debounce';
 import pubsub from 'pubsub.js';
-import console from 'electron-timber';
 import BugIcon from '../icons/Bug';
 import MutedIcon from '../icons/Muted';
 import UnmutedIcon from '../icons/Unmuted';
@ -29,6 +28,7 @@ import {
  STOP_LOADING,
  CLEAR_NETWORK_CACHE,
  SET_NETWORK_TROTTLING_PROFILE,
+  OPEN_CONSOLE_FOR_DEVICE,
 } from '../../constants/pubsubEvents';
 import {CAPABILITIES} from '../../constants/devices';

@ -44,7 +44,8 @@ import Maximize from '../icons/Maximize';
 import Minimize from '../icons/Minimize';
 import Focus from '../icons/Focus';
 import Unfocus from '../icons/Unfocus';
-import {getBrowserSyncEmbedScriptURL} from '../../service/browserSync';
+import {captureOnSentry} from '../../utils/logUtils';
+import {getBrowserSyncEmbedScriptURL} from '../../services/browserSync';

 const {BrowserWindow} = remote;

@ -136,10 +137,18 @@ class WebView extends Component {
        this.setNetworkThrottlingProfile
      )
    );
+
    this.subscriptions.push(
      pubsub.subscribe(CLEAR_NETWORK_CACHE, this.clearNetworkCache)
    );

+    this.subscriptions.push(
+      pubsub.subscribe(
+        OPEN_CONSOLE_FOR_DEVICE,
+        this.processOpenConsoleForDeviceEvent
+      )
+    );
+
    this.webviewRef.current.addEventListener('dom-ready', () => {
      this.initEventTriggers(this.webviewRef.current);
      this.dbg = this.getWebContents().debugger;
@ -298,7 +307,9 @@ class WebView extends Component {
  };

  processReloadCSSEvent = () => {
-    this.webviewRef.current.executeJavaScript(`{
+    this.webviewRef.current
+      .executeJavaScript(
+        `{
        var elements = document.querySelectorAll('link[rel=stylesheet][href]');
        elements.forEach(element=>{
          var href = element.href;
@ -307,7 +318,9 @@ class WebView extends Component {
            element.href = href + (href.indexOf('?')>=0?'&':'?') + 'invalidateCacheParam=' + (new Date().valueOf());
          }
        })
-    }`);
+    }`
+      )
+      .catch(captureOnSentry);
  };

  processAddressChangeEvent = ({address, force}) => {
@ -380,6 +393,8 @@ class WebView extends Component {
      createSeparateDir: now != null,
      fullScreen,
      now,
+      removeFixedPositionedElements: this.props.browser.userPreferences
+        .removeFixedPositionedElements,
    });
    await this.openBrowserSyncSocket(this.webviewRef.current);
    this.setState({screenshotInProgress: false});
@ -415,6 +430,14 @@ class WebView extends Component {
    );
  };

+  processOpenConsoleForDeviceEvent = message => {
+    const {deviceId} = message;
+    if (this.props.device.id !== deviceId) {
+      return;
+    }
+    this._toggleDevTools();
+  };
+
  setNetworkThrottlingProfile = ({type, downloadKps, uploadKps, latencyMs}) => {
    // TODO : change this when https://github.com/electron/electron/issues/21250 is solved
    // if (type === 'Online') {
@ -489,41 +512,59 @@ class WebView extends Component {
    }
  };

-  initBrowserSync = webview => {
-    this.getWebContentForId(webview.getWebContentsId()).executeJavaScript(`
-      var bsScript= document.createElement('script');
-      bsScript.src = '${getBrowserSyncEmbedScriptURL()}';
-      bsScript.async = true;
-      document.body.appendChild(bsScript);
-      true
-    `);
+  initBrowserSync = async webview => {
+    await this.getWebContentForId(webview.getWebContentsId())
+      .executeJavaScript(
+        `
+          var bsScript= document.createElement('script');
+          bsScript.src = '${getBrowserSyncEmbedScriptURL()}';
+          bsScript.async = true;
+          document.body.appendChild(bsScript);
+          true
+        `
+      )
+      .catch(captureOnSentry);
  };

  closeBrowserSyncSocket = async webview => {
    await this.getWebContentForId(webview.getWebContentsId())
-      .executeJavaScript(`
-      if(window.___browserSync___){
-        window.___browserSync___.socket.close()
-      }
-      true
-    `);
+      .executeJavaScript(
+        `
+        if(window.___browserSync___){
+          window.___browserSync___.socket.close()
+        }
+        true
+      `
+      )
+      .catch(captureOnSentry);
  };

  openBrowserSyncSocket = async webview => {
    await this.getWebContentForId(webview.getWebContentsId())
-      .executeJavaScript(`
-      if(window.___browserSync___){
-        window.___browserSync___.socket.open()
-      }
-      true
-    `);
+      .executeJavaScript(
+        `
+        if(window.___browserSync___){
+          window.___browserSync___.socket.open()
+        }
+        true
+      `
+      )
+      .catch(captureOnSentry);
  };

-  initEventTriggers = webview => {
+  initEventTriggers = async webview => {
    this.initBrowserSync(webview);
-    this.getWebContentForId(webview.getWebContentsId()).executeJavaScript(`{
-      responsivelyApp.deviceId = '${this.props.device.id}';
-    }`);
+    await this.getWebContentForId(webview.getWebContentsId())
+      .executeJavaScript(
+        `{
+          responsivelyApp.deviceId = '${this.props.device.id}';
+        }`
+      )
+      .catch(captureOnSentry);
+
+    if (this.state.isUnplugged) {
+      await this.closeBrowserSyncSocket(webview);
+    }
  };

  hideScrollbar = () => {
--- a/desktop-app/app/components/WebView/screenshotUtil.js
+++ b/desktop-app/app/components/WebView/screenshotUtil.js
@ -12,6 +12,7 @@ import PromiseWorker from 'promise-worker';
 import NotificationMessage from '../NotificationMessage';
 import {userPreferenceSettings} from '../../settings/userPreferenceSettings';
 import {type Device} from '../../constants/devices';
+import {captureOnSentry} from '../../utils/logUtils';

 const mergeImg = Promise.promisifyAll(_mergeImg);

@ -22,6 +23,7 @@ const captureScreenshot = async ({
  createSeparateDir,
  now,
  fullScreen = false,
+  removeFixedPositionedElements,
 }: {
  address: string,
  device: Device,
@ -29,6 +31,7 @@ const captureScreenshot = async ({
  createSeparateDir: boolean,
  now?: Date,
  fullScreen: boolean,
+  removeFixedPositionedElements: boolean,
 }) => {
  const worker = new Worker('./imageWorker.js');
  const promiseWorker = new PromiseWorker(worker);
@ -40,13 +43,18 @@ const captureScreenshot = async ({
    {autoClose: false}
  );
  const webViewUtils = new WebViewUtils(webView);
-  const insertedCSSKey = await webViewUtils.hideScrollbarAndFixedPositionedElements();
+  const insertedCSSKey = await webViewUtils.hideScrollbarAndFixedPositionedElements(
+    removeFixedPositionedElements
+  );

  const images = fullScreen
    ? await webViewUtils.getFullScreenImages(promiseWorker)
    : [await webViewUtils.getViewportImage(promiseWorker)];

-  await webViewUtils.unHideScrollbarAndFixedPositionedElements(insertedCSSKey);
+  await webViewUtils.unHideScrollbarAndFixedPositionedElements(
+    insertedCSSKey,
+    removeFixedPositionedElements
+  );

  toast.update(toastId, {
    render: (
@ -92,32 +100,42 @@ class WebViewUtils {
  }

  getWindowSizeAndScrollDetails(): Promise {
-    return this.webView.executeJavaScript(`
-      responsivelyApp.screenshotVar = {
-        previousScrollPosition : {
-          left: window.scrollX,
-          top: window.scrollY,
-        },
-        scrollHeight: document.body.scrollHeight,
-        scrollWidth: document.body.scrollWidth,
-        viewPortHeight: document.documentElement.clientHeight,
-        viewPortWidth: document.documentElement.clientWidth,
-      };
-      responsivelyApp.screenshotVar;
-    `);
+    return this.webView
+      .executeJavaScript(
+        `
+          responsivelyApp.screenshotVar = {
+            previousScrollPosition : {
+              left: window.scrollX,
+              top: window.scrollY,
+            },
+            scrollHeight: document.body.scrollHeight,
+            scrollWidth: document.body.scrollWidth,
+            viewPortHeight: document.documentElement.clientHeight,
+            viewPortWidth: document.documentElement.clientWidth,
+          };
+          responsivelyApp.screenshotVar;
+        `
+      )
+      .catch(captureOnSentry);
  }

  async scrollTo(scrollX: number, scrollY: number): Promise {
-    await this.webView.executeJavaScript(`
-      window.scrollTo(${scrollX}, ${scrollY})
-    `);
+    await this.webView
+      .executeJavaScript(
+        `
+          window.scrollTo(${scrollX}, ${scrollY})
+        `
+      )
+      .catch(captureOnSentry);
    // wait a little for the scroll to take effect.
    await _delay(500);
  }

-  async hideScrollbarAndFixedPositionedElements(): Promise<string> {
+  async hideScrollbarAndFixedPositionedElements(
+    removeFixedPositionedElements: boolean
+  ): Promise<string> {
    const key = await this.webView.insertCSS(`
-      .responsivelyApp__ScreenshotInProgress::-webkit-scrollbar {
+      body::-webkit-scrollbar {
        display: none;
      }

@ -126,10 +144,15 @@ class WebViewUtils {
      }
    `);

-    await this.webView.executeJavaScript(`
-      document.body.classList.add('responsivelyApp__ScreenshotInProgress');
-      responsivelyApp.hideFixedPositionElementsForScreenshot();
-    `);
+    if (removeFixedPositionedElements) {
+      await this.webView
+        .executeJavaScript(
+          `
+        responsivelyApp.hideFixedPositionElementsForScreenshot();
+      `
+        )
+        .catch(captureOnSentry);
+    }

    // wait a little for the 'hide' effect to take place.
    await _delay(200);
@ -137,12 +160,22 @@ class WebViewUtils {
    return key;
  }

-  async unHideScrollbarAndFixedPositionedElements(insertedCSSKey): Promise {
+  async unHideScrollbarAndFixedPositionedElements(
+    insertedCSSKey,
+    removeFixedPositionedElements: boolean
+  ): Promise {
    await this.webView.removeInsertedCSS(insertedCSSKey);
-    return this.webView.executeJavaScript(`
-      document.body.classList.remove('responsivelyApp__ScreenshotInProgress');
-      responsivelyApp.unHideElementsHiddenForScreenshot();
-    `);
+    if (removeFixedPositionedElements) {
+      return this.webView
+        .executeJavaScript(
+          `
+        document.body.classList.remove('responsivelyApp__ScreenshotInProgress');
+        responsivelyApp.unHideElementsHiddenForScreenshot();
+      `
+        )
+        .catch(captureOnSentry);
+    }
+    return Promise.resolve(true);
  }

  async getFullScreenImages(promiseWorker: PromiseWorker): Promise {
--- a/desktop-app/app/components/common.styles.css
+++ b/desktop-app/app/components/common.styles.css
@ -60,6 +60,7 @@
 .flexContainer {
  display: flex;
  align-items: center;
+  justify-content: center;
 }

 .flexContainerSpaceBetween {
--- a/desktop-app/app/constants/pubsubEvents.js
+++ b/desktop-app/app/constants/pubsubEvents.js
@ -13,6 +13,7 @@ export const STOP_LOADING = 'STOP_LOADING';

 export const SET_NETWORK_TROTTLING_PROFILE = 'SET_NETWORK_TROTTLING_PROFILE';
 export const CLEAR_NETWORK_CACHE = 'CLEAR_NETWORK_CACHE';
+export const OPEN_CONSOLE_FOR_DEVICE = 'OPEN_CONSOLE_FOR_DEVICE';

 // status bar events
 export const STATUS_BAR_VISIBILITY_CHANGE = 'status-bar-visibility-change';
--- a/desktop-app/app/containers/DevToolResizerContainer/index.js
+++ b/desktop-app/app/containers/DevToolResizerContainer/index.js
@ -10,6 +10,7 @@ function mapStateToProps(state) {
  return {
    ...state.browser.devToolsConfig,
    isInspecting: state.browser.isInspecting,
+    devices: state.browser.devices,
  };
 }

--- a/desktop-app/app/index.js
+++ b/desktop-app/app/index.js
@ -9,7 +9,6 @@ import Root from './containers/Root';
 import {configureStore, history} from './store/configureStore';
 import './app.global.css';
 import * as Sentry from '@sentry/electron';
-import console from 'electron-timber';

 require('dotenv').config();

--- a/desktop-app/app/main.dev.js
+++ b/desktop-app/app/main.dev.js
@ -29,7 +29,6 @@ import installExtension, {
  REDUX_DEVTOOLS,
 } from 'electron-devtools-installer';
 import fs from 'fs';
-import console from 'electron-timber';
 import MenuBuilder from './menu';
 import {USER_PREFERENCES} from './constants/settingKeys';
 import {migrateDeviceSchema} from './settings/migration';
@ -48,6 +47,8 @@ import {
 } from './utils/browserSync';
 import {getHostFromURL} from './utils/urlUtils';
 import browserSync from 'browser-sync';
+import {captureOnSentry} from './utils/logUtils';
+import appMetadata from './services/db/appMetadata';

 const path = require('path');
 const chokidar = require('chokidar');
@ -127,7 +128,7 @@ app.on('open-file', async (event, filePath) => {
    if (mainWindow) {
      openFile(fileToOpen);
    } else if (!hasActiveWindow) {
-      createWindow();
+      await createWindow();
    }
  }
 });
@ -138,7 +139,7 @@ app.on('open-url', async (event, url) => {
  } else {
    urlToOpen = url;
    if (!hasActiveWindow) {
-      createWindow();
+      await createWindow();
    }
  }
 });
@ -181,18 +182,18 @@ app.on('login', (event, webContents, request, authInfo, callback) => {
  mainWindow.webContents.send('http-auth-prompt', {url});
 });

-app.on('activate', (event, hasVisibleWindows) => {
+app.on('activate', async (event, hasVisibleWindows) => {
  if (hasVisibleWindows || hasActiveWindow) {
    return;
  }
-  createWindow();
+  await createWindow();
 });

-app.on('ready', () => {
+app.on('ready', async () => {
  if (hasActiveWindow) {
    return;
  }
-  createWindow();
+  await createWindow();
 });

 const chooseOpenWindowHandler = url => {
@ -241,6 +242,7 @@ const openFile = filePath => {
 };

 const createWindow = async () => {
+  appMetadata.incrementOpenCount();
  hasActiveWindow = true;

  if (process.env.NODE_ENV === 'development') {
@ -277,17 +279,21 @@ const createWindow = async () => {
  mainWindow.webContents.on('did-finish-load', () => {
    if (process.platform === 'darwin') {
      // Trick to make the transparent title bar draggable
-      mainWindow.webContents.executeJavaScript(`
-        var div = document.createElement("div");
-        div.style.position = "absolute";
-        div.style.top = 0;
-        div.style.height = "23px";
-        div.style.width = "100%";
-        div.style["-webkit-app-region"] = "drag";
-        div.style['-webkit-user-select'] = 'none';
-        document.body.appendChild(div);
-        true;
-      `);
+      mainWindow.webContents
+        .executeJavaScript(
+          `
+            var div = document.createElement("div");
+            div.style.position = "absolute";
+            div.style.top = 0;
+            div.style.height = "23px";
+            div.style.width = "100%";
+            div.style["-webkit-app-region"] = "drag";
+            div.style['-webkit-user-select'] = 'none';
+            document.body.appendChild(div);
+            true;
+          `
+        )
+        .catch(captureOnSentry);
    }
  });

@ -432,22 +438,26 @@ const createWindow = async () => {
    devToolsView.setBounds(bounds);
    webView.setDevToolsWebContents(devToolsView.webContents);
    webView.openDevTools();
-    devToolsView.webContents.executeJavaScript(`
-      (async function () {
-        const sleep = ms => (new Promise(resolve => setTimeout(resolve, ms)));
-        var retryCount = 0;
-        var done = false;
-        while(retryCount < 10 && !done) {
-          try {
-            retryCount++;
-            document.querySelectorAll('div[slot="insertion-point-main"]')[0].shadowRoot.querySelectorAll('.tabbed-pane-left-toolbar.toolbar')[0].style.display = 'none'
-            done = true
-          } catch(err){
-            await sleep(100);
-          }
-        }
-      })()
-    `);
+    devToolsView.webContents
+      .executeJavaScript(
+        `
+          (async function () {
+            const sleep = ms => (new Promise(resolve => setTimeout(resolve, ms)));
+            var retryCount = 0;
+            var done = false;
+            while(retryCount < 10 && !done) {
+              try {
+                retryCount++;
+                document.querySelectorAll('div[slot="insertion-point-main"]')[0].shadowRoot.querySelectorAll('.tabbed-pane-left-toolbar.toolbar')[0].style.display = 'none'
+                done = true
+              } catch(err){
+                await sleep(100);
+              }
+            }
+          })()
+        `
+      )
+      .catch(captureOnSentry);
  });

  ipcMain.on('close-devtools', (event, ...args) => {
--- a/desktop-app/app/menu.js
+++ b/desktop-app/app/menu.js
@ -29,6 +29,46 @@ export default class MenuBuilder {
    this.mainWindow = mainWindow;
  }

+  aboutClick() {
+    const iconPath = path.join(__dirname, '../resources/icons/64x64.png');
+    const title = 'Responsively';
+    const {description} = pkg;
+    const version = pkg.version || 'Unknown';
+    const electron = process.versions.electron || 'Unknown';
+    const chrome = process.versions.chrome || 'Unknown';
+    const node = process.versions.node || 'Unknown';
+    const v8 = process.versions.v8 || 'Unknown';
+    const osText =
+      `${os.type()} ${os.arch()} ${os.release()}`.trim() || 'Unknown';
+    const usefulInfo = `Version: ${version}\nElectron: ${electron}\nChrome: ${chrome}\nNode.js: ${node}\nV8: ${v8}\nOS: ${osText}`;
+    const detail = description ? `${description}\n\n${usefulInfo}` : usefulInfo;
+    let buttons = ['OK', 'Copy'];
+    let cancelId = 0;
+    let defaultId = 1;
+    if (process.platform === 'linux') {
+      buttons = ['Copy', 'OK'];
+      cancelId = 1;
+      defaultId = 0;
+    }
+    dialog
+      .showMessageBox(BrowserWindow.getAllWindows()[0], {
+        type: 'none',
+        buttons,
+        title,
+        message: title,
+        detail,
+        noLink: true,
+        icon: iconPath,
+        cancelId,
+        defaultId,
+      })
+      .then(({response}) => {
+        if (response === defaultId) {
+          clipboard.writeText(usefulInfo, 'clipboard');
+        }
+      });
+  }
+
  subMenuHelp = {
    label: 'Help',
    submenu: [
@ -134,47 +174,7 @@ export default class MenuBuilder {
      {
        label: 'About',
        accelerator: 'F1',
-        click() {
-          const iconPath = path.join(__dirname, '../resources/icons/64x64.png');
-          const title = 'Responsively';
-          const {description} = pkg;
-          const version = pkg.version || 'Unknown';
-          const electron = process.versions.electron || 'Unknown';
-          const chrome = process.versions.chrome || 'Unknown';
-          const node = process.versions.node || 'Unknown';
-          const v8 = process.versions.v8 || 'Unknown';
-          const osText =
-            `${os.type()} ${os.arch()} ${os.release()}`.trim() || 'Unknown';
-          const usefulInfo = `Version: ${version}\nElectron: ${electron}\nChrome: ${chrome}\nNode.js: ${node}\nV8: ${v8}\nOS: ${osText}`;
-          const detail = description
-            ? `${description}\n\n${usefulInfo}`
-            : usefulInfo;
-          let buttons = ['OK', 'Copy'];
-          let cancelId = 0;
-          let defaultId = 1;
-          if (process.platform === 'linux') {
-            buttons = ['Copy', 'OK'];
-            cancelId = 1;
-            defaultId = 0;
-          }
-          dialog
-            .showMessageBox(BrowserWindow.getAllWindows()[0], {
-              type: 'none',
-              buttons,
-              title,
-              message: title,
-              detail,
-              noLink: true,
-              icon: iconPath,
-              cancelId,
-              defaultId,
-            })
-            .then(({response}) => {
-              if (response === defaultId) {
-                clipboard.writeText(usefulInfo, 'clipboard');
-              }
-            });
-        },
+        click: this.aboutClick,
      },
    ],
  };
@ -309,10 +309,11 @@ export default class MenuBuilder {
    const subMenuAbout = {
      label: 'Responsively',
      submenu: [
-        // {
-        //   label: 'About ResponsivelyApp',
-        //   selector: 'orderFrontStandardAboutPanel:',
-        // },
+        {
+          label: 'About ResponsivelyApp',
+          selector: 'orderFrontStandardAboutPanel:',
+          click: this.aboutClick,
+        },
        {type: 'separator'},
        // {label: 'Services', submenu: []},
        {type: 'separator'},
--- a/desktop-app/app/reducers/bookmarks.js
+++ b/desktop-app/app/reducers/bookmarks.js
@ -1,5 +1,4 @@
 import settings from 'electron-settings';
-import console from 'electron-timber';
 import {TOGGLE_BOOKMARK, EDIT_BOOKMARK} from '../actions/bookmarks';
 import {BOOKMARKS} from '../constants/settingKeys';
 import {getWebsiteName} from '../components/WebView/screenshotUtil';
--- a/desktop-app/app/reducers/browser.js
+++ b/desktop-app/app/reducers/browser.js
@ -2,7 +2,6 @@
 import {ipcRenderer, remote} from 'electron';
 import settings from 'electron-settings';
 import {isIfStatement} from 'typescript';
-import console from 'electron-timber';
 import trimStart from 'lodash/trimStart';
 import {
  NEW_ADDRESS,
@ -119,6 +118,7 @@ type UserPreferenceType = {
  devToolsOpenMode: DevToolsOpenModeType,
  deviceOutlineStyle: string,
  zoomLevel: number,
+  removeFixedPositionedElements: boolean,
 };

 type FilterFieldType = FILTER_FIELDS.OS | FILTER_FIELDS.DEVICE_TYPE;
@ -195,7 +195,9 @@ function _getActiveDevices() {
 }

 function _getUserPreferences(): UserPreferenceType {
-  return settings.get(USER_PREFERENCES) || {};
+  return (
+    settings.get(USER_PREFERENCES) || {removeFixedPositionedElements: true}
+  );
 }

 function _setUserPreferences(userPreferences) {
--- a/desktop-app/app/services/browserSync/index.js
+++ b/desktop-app/app/services/browserSync/index.js
--- a/desktop-app/app/services/db/appMetadata.js
+++ b/desktop-app/app/services/db/appMetadata.js
@ -0,0 +1,16 @@
+const db = require('electron-settings');
+
+const OPEN_COUNT = 'openCount';
+
+class AppMetadata {
+  incrementOpenCount() {
+    const count = db.get(OPEN_COUNT) || 0;
+    db.set(OPEN_COUNT, count + 1);
+  }
+
+  getOpenCount() {
+    return db.get(OPEN_COUNT) || 0;
+  }
+}
+
+export default new AppMetadata();
--- a/desktop-app/app/services/db/index.js
+++ b/desktop-app/app/services/db/index.js
@ -0,0 +1,3 @@
+import appMetadataDB from './appMetadata';
+
+export default {appMetadataDB};
--- a/desktop-app/app/shortcuts.html
+++ b/desktop-app/app/shortcuts.html
@ -42,7 +42,7 @@
        font-size: large;
        background-color: black;
        border-radius: 5px;
-        font-family: "Consolas", "Courier New", monospace;
+        font-family: 'Consolas', 'Courier New', monospace;
        white-space: pre;
      }
      .btn-wrapper {
@ -71,6 +71,9 @@
    </div>
    <script>
      function firstToUpperCase(s) {
+        if (!s) {
+          return '';
+        }
        return s[0].toUpperCase() + s.slice(1);
      }
      function getNumPadName(n) {
@ -84,38 +87,40 @@
      }
      function getKeyName(k) {
        const lo = k.toLowerCase();
-        if (lo === 'mod')
-          return 'Cmd/Ctrl';
-        if (lo === 'commandorcontrol' || lo === 'cmdorctrl')
-          return 'Cmd/Ctrl';
-        if (lo === 'command')
-          return 'Cmd';
-        if (lo === 'control')
-          return 'Ctrl';
-        if (lo === 'plus')
-          return '+';
-        if (lo === 'return')
-          return 'Enter';
-        if (lo === 'escape')
-          return 'Esc';
-        if (lo === 'prtsc')
-          return 'PrtSc';
-        if (lo.startsWith('num'))
-          return getNumPadName(k.slice(3));
+        if (lo === 'mod') return 'Cmd/Ctrl';
+        if (lo === 'commandorcontrol' || lo === 'cmdorctrl') return 'Cmd/Ctrl';
+        if (lo === 'command') return 'Cmd';
+        if (lo === 'control') return 'Ctrl';
+        if (lo === 'plus') return '+';
+        if (lo === 'return') return 'Enter';
+        if (lo === 'escape') return 'Esc';
+        if (lo === 'prtsc') return 'PrtSc';
+        if (lo.startsWith('num')) return getNumPadName(k.slice(3));
+        console.log('k', k);
        return firstToUpperCase(k);
      }
      function mapAccelerator(acc) {
+        if (acc === 'mod++') {
+          return ['Cmd/Ctrl', '+'];
+        }
        return acc.split('+').map(getKeyName);
-      }    
+      }

      let registeredShortcuts = [];
      try {
-        registeredShortcuts = JSON.parse(window.process.argv.slice(-1)).reduce((arr, def) => {
-          arr.push([def.title, mapAccelerator(def.accelerators[0])]);
-          def.accelerators.slice(1).forEach(acc => arr.push(['', mapAccelerator(acc)]))
-          return arr;
-        }, []);
-      } catch { }
+        registeredShortcuts = JSON.parse(window.process.argv.slice(-1)).reduce(
+          (arr, def) => {
+            arr.push([def.title, mapAccelerator(def.accelerators[0])]);
+            def.accelerators
+              .slice(1)
+              .forEach(acc => arr.push(['', mapAccelerator(acc)]));
+            return arr;
+          },
+          []
+        );
+      } catch (err) {
+        console.log('Error while processing shortcuts', err);
+      }

      const shortcutNodes = registeredShortcuts.map(([label, keys]) => {
        const liElem = document.createElement('li');
--- a/desktop-app/app/utils/generalUtils.js
+++ b/desktop-app/app/utils/generalUtils.js
@ -1,7 +1,6 @@
 import {app} from 'electron';
-
-const path = require('path');
-const fs = require('fs');
+import path from 'path';
+import fs from 'fs';

 export function getPackageJson() {
  const appPath =
@ -12,5 +11,6 @@ export function getPackageJson() {
  return JSON.parse(pkgContent);
 }

-const pkg = getPackageJson();
-export {pkg};
+export const pkg = getPackageJson();
+
+export default {pkg};
--- a/desktop-app/app/utils/logUtils.js
+++ b/desktop-app/app/utils/logUtils.js
@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/electron';
+
+export const captureOnSentry = err => {
+  console.log('err', err);
+  if (process.env.NODE_ENV !== 'development') {
+    Sentry.captureException(err);
+  }
+};
--- a/desktop-app/package.json
+++ b/desktop-app/package.json
@ -292,7 +292,6 @@
    "electron-log": "^4.2.1",
    "electron-notarize": "^0.3.0",
    "electron-settings": "^3.2.0",
-    "electron-timber": "^0.5.1",
    "electron-updater": "^4.3.1",
    "flwww": "^2.0.10",
    "framer-motion": "^2.2.0",
--- a/desktop-app/yarn.lock
+++ b/desktop-app/yarn.lock
@ -2022,11 +2022,6 @@
    "@sentry/types" "5.20.1"
    tslib "^1.9.3"

-"@sindresorhus/fnv1a@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/fnv1a/-/fnv1a-1.2.0.tgz#d554da64c406f3b62ad06dfce9efd537a4a55de4"
-  integrity sha512-5ezb/dBSTWtKQ4sLQwMgOJyREXJcZZkTMbendMwKrXTghUhWjZhstzkkmt4/WkFy/GSTSGzfJOKU7dEXv3C/XQ==
-
 "@sindresorhus/is@^0.14.0":
  version "0.14.0"
  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@ -2037,13 +2032,6 @@
  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-2.1.1.tgz#ceff6a28a5b4867c2dd4a1ba513de278ccbe8bb1"
  integrity sha512-/aPsuoj/1Dw/kzhkgz+ES6TxG0zfTMGLwuK2ZG00k/iJzYHTLCE8mVU8EPqEOp/lmxPoq1C1C9RYToRKb2KEfg==

-"@sindresorhus/string-hash@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/string-hash/-/string-hash-1.2.0.tgz#20d7f88484406f2992391b55cf8aa486103f4d03"
-  integrity sha512-DLUEF2sS37k9QwG5mVP36suIVJO0vmXRvUCJT7s17AbMxCJMoyV/X5nAy3sEgB84MkHJd2WmEMtCSfmhZNk46A==
-  dependencies:
-    "@sindresorhus/fnv1a" "^1.2.0"
-
 "@sinonjs/commons@^1", "@sinonjs/commons@^1.3.0", "@sinonjs/commons@^1.4.0", "@sinonjs/commons@^1.7.0":
  version "1.8.1"
  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.1.tgz#e7df00f98a203324f6dc7cc606cad9d4a8ab2217"
@ -2152,25 +2140,11 @@
    "@types/node" "*"
    "@types/responselike" "*"

-"@types/color-convert@*":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d"
-  integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==
-  dependencies:
-    "@types/color-name" "*"
-
-"@types/color-name@*", "@types/color-name@^1.1.1":
+"@types/color-name@^1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==

-"@types/color@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071"
-  integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==
-  dependencies:
-    "@types/color-convert" "*"
-
 "@types/debug@^4.1.5":
  version "4.1.5"
  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
@ -3131,11 +3105,6 @@ atob@^2.1.2:
  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==

-auto-bind@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-1.2.1.tgz#807f7910b0210db9eefe133f3492c28e89698b96"
-  integrity sha512-/W9yj1yKmBLwpexwAujeD9YHwYmRuWFGV8HWE7smQab797VeHa4/cnE2NFeDhA+E+5e/OGBI8763EhLjfZ/MXA==
-
 autoprefixer@^9.8.0:
  version "9.8.5"
  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.5.tgz#2c225de229ddafe1d1424c02791d0c3e10ccccaa"
@ -5175,7 +5144,7 @@ color-support@^1.1.3:
  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==

-color@^3.0.0, color@^3.1.1:
+color@^3.0.0:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@ -6473,11 +6442,6 @@ electron-is-accelerator@^0.1.0:
  resolved "https://registry.yarnpkg.com/electron-is-accelerator/-/electron-is-accelerator-0.1.2.tgz#509e510c26a56b55e17f863a4b04e111846ab27b"
  integrity sha1-UJ5RDCala1Xhf4Y6SwThEYRqsns=

-electron-is-dev@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-0.3.0.tgz#14e6fda5c68e9e4ecbeff9ccf037cbd7c05c5afe"
-  integrity sha1-FOb9pcaOnk7L7/nM8DfL18BcWv4=
-
 electron-is-dev@^1.1.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-1.2.0.tgz#2e5cea0a1b3ccf1c86f577cee77363ef55deb05e"
@ -6528,17 +6492,6 @@ electron-settings@^3.2.0:
    clone "^2.1.1"
    jsonfile "^4.0.0"

-electron-timber@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/electron-timber/-/electron-timber-0.5.1.tgz#a9b78ec097611ad5d438dc4635f842dc484d99fc"
-  integrity sha512-5CTijMwDeIdwm7GzYqUIRI2SbTjTJq2khexNmqzuZTFi7QmsbeJyvMSHvmTLztQGGmKeAGp4ym2FYRBa+OA5bA==
-  dependencies:
-    auto-bind "^1.2.0"
-    chalk "^2.4.1"
-    electron-util "^0.8.2"
-    randoma "^1.2.0"
-    split2 "^2.2.0"
-
 electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.488:
  version "1.3.505"
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.505.tgz#0e55edbdfc13700b6742a73c81c0af7d0d71364f"
@ -6557,13 +6510,6 @@ electron-updater@^4.3.1:
    lodash.isequal "^4.5.0"
    semver "^7.1.3"

-electron-util@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/electron-util/-/electron-util-0.8.2.tgz#9ec18f54141192e3fcbfe1d6dfd22780de87ffed"
-  integrity sha512-35gFE5oxi39ZBchWWvMNiKyUaNp3OmH3S1UruM+P0ZLpnOgJUMdBxl514f6f9QsShn7Lj3u9t31tavN/PzmhPw==
-  dependencies:
-    electron-is-dev "^0.3.0"
-
 electron@^9.1.1:
  version "9.1.1"
  resolved "https://registry.yarnpkg.com/electron/-/electron-9.1.1.tgz#d52c9873be4113287c3eb2b02f85bad6644b100e"
@ -12087,11 +12033,6 @@ parent-module@^1.0.0:
  dependencies:
    callsites "^3.0.0"

-park-miller@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/park-miller/-/park-miller-1.1.0.tgz#5831ca3b353166735e52a9c5fbb9ff8b1211b7c5"
-  integrity sha512-6mLXc2jkM9dcavPoxDHfof2QM/baCsrgK51iHbJDHl94AwymJv2Z/iGKQVwJMWUAXFiIV6FzY9UskjU3+KvLuA==
-
 parse-asn1@^5.0.0, parse-asn1@^5.1.5:
  version "5.1.5"
  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
@ -13150,16 +13091,6 @@ randexp@0.4.6:
    discontinuous-range "1.0.0"
    ret "~0.1.10"

-randoma@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/randoma/-/randoma-1.3.0.tgz#adf382394f15202947062a2ae02e81374e94acad"
-  integrity sha512-bi5f+w340fQ9LI4R4xYQd/YwrasOOZBPKNneSfZoCfwKYGFOVCNHilUKVzpzovS1iYY+NF/lsn5FW+EaxPBOPg==
-  dependencies:
-    "@sindresorhus/string-hash" "^1.2.0"
-    "@types/color" "^3.0.0"
-    color "^3.1.1"
-    park-miller "^1.1.0"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@ -14882,13 +14813,6 @@ split-string@^3.0.1, split-string@^3.0.2:
  dependencies:
    extend-shallow "^3.0.0"

-split2@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
-  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
-  dependencies:
-    through2 "^2.0.2"
-
 sprintf-js@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
@ -15817,7 +15741,7 @@ throttle-debounce@^2.1.0:
  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==

-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0:
  version "2.0.5"
  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
--- a/website/pages/assets/appMessages.json
+++ b/website/pages/assets/appMessages.json
@ -3,11 +3,40 @@
    "text": "Do you enjoy the app? Show us some support on twitter!",
    "link": "https://twitter.com/ResponsivelyApp"
  },
-  "notification":{
-    "id":"100001",
-    "text":"We are running a feedback campaign to make the app better. Please pitch in your thoughts. 🙏",
-    "link":"https://docs.google.com/forms/d/e/1FAIpQLSdjwMkFD5ftq6mGqQKUn6ITh175uTkxoQ2LXsTshnBN6rVavw/viewform?usp=sf_link",
+  "notification": {
+    "id": "100001",
+    "text": "We are running a feedback campaign to make the app better. Please pitch in your thoughts. 🙏",
+    "link": "https://docs.google.com/forms/d/e/1FAIpQLSdjwMkFD5ftq6mGqQKUn6ITh175uTkxoQ2LXsTshnBN6rVavw/viewform?usp=sf_link",
    "okText": "OK",
    "dismissText": "Dismiss"
-  }
+  },
+  "notifications": [
+    {
+      "id": "100001",
+      "title": "Can you please share your thoughts?",
+      "text": "We are collecting feedback to make the app better.",
+      "link": "https://docs.google.com/forms/d/e/1FAIpQLSdjwMkFD5ftq6mGqQKUn6ITh175uTkxoQ2LXsTshnBN6rVavw/viewform?usp=sf_link",
+      "okText": "Open",
+      "dismissText": "Dismiss",
+      "minOpenCount": 20
+    },
+    {
+      "id": "github-repo-intro",
+      "title": "Do you know Responsively is an open-source project?",
+      "text": "Show us your support by staring our GitHub repo.",
+      "link": "https://github.com/responsively-org/responsively-app/stargazers",
+      "okText": "Open",
+      "dismissText": "Dismiss",
+      "minOpenCount": 0
+    },
+    {
+      "id": "twitter-handle-intro",
+      "title": "Keep yourselves informed!",
+      "text": "Follow us on Twitter and stay up to date on the tricks and tips.",
+      "link": "https://twitter.com/ResponsivelyApp",
+      "okText": "Open",
+      "dismissText": "Dismiss",
+      "minOpenCount": 5
+    }
+  ]
 }
--- a/website/pages/assets/css/custom.css
+++ b/website/pages/assets/css/custom.css
@ -33,4 +33,8 @@ html {

 #privacyPolicy ol, #privacyPolicy li {
  text-align: left !important;
+}
+
+.extensionButton {
+  width: 300px;
 }
--- a/website/pages/assets/img/icons/custom/chrome-icon.svg
+++ b/website/pages/assets/img/icons/custom/chrome-icon.svg
@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M25 17A8 8 0 1 0 25 33A8 8 0 1 0 25 17Z"/><path d="M25,2C12.317,2,2,12.317,2,25s10.317,23,23,23s23-10.317,23-23S37.683,2,25,2z M22.329,45.811l6.647-11.64C27.756,34.702,26.413,35,25,35c-3.559,0-6.682-1.875-8.454-4.683c-0.023-0.029-0.049-0.053-0.069-0.085L6.832,14.516c0.371-0.641,0.776-1.257,1.211-1.852l7.004,11.413C15.515,18.995,19.798,15,25,15h18.462c0.351,0.646,0.663,1.316,0.946,2H30.974C33.412,18.825,35,21.727,35,25c0,1.787-0.477,3.463-1.302,4.916c-0.007,0.014-0.006,0.029-0.014,0.043l-9.147,16.018C23.79,45.96,23.055,45.903,22.329,45.811z"/></svg>
--- a/website/pages/assets/img/icons/custom/edge-icon.svg
+++ b/website/pages/assets/img/icons/custom/edge-icon.svg
@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M22.62,46.82c-4.21-0.5-7.23-2.02-8.18-2.55c-6.6-3.68-12.15-11.9-11.36-21.06C5.48,17.91,9.65,15,14.85,15h0.03 c3.75,0.01,7.73,1.61,10.54,4.01c-0.14-0.02-0.27-0.02-0.41-0.02c-1.2,0-2.37,0.36-3.33,0.99l-0.01-0.01 c-6.35,4.32-9.06,11.4-6.9,18.03C16.07,41.99,18.9,45.06,22.62,46.82z"/><path d="M43.37,37.58l-0.09,0.12c-3.66,4.73-8.03,7.66-13.05,8.78c-6.45-0.02-11.74-3.54-13.55-9.1 c-1.37-4.21-0.46-8.64,2.32-12.21c-0.01,1.14,0.24,2.19,0.61,3.01c2.99,6.6,8.72,8.33,10.6,8.89c1.33,0.4,3.02,0.62,4.75,0.62 c2.06,0,3.98-0.3,5.27-0.83c0.34-0.14,0.6-0.24,0.83-0.32c0.22-0.08,0.4-0.14,0.6-0.23l0.48-0.22c0.41-0.18,0.89-0.06,1.18,0.28 C43.6,36.72,43.62,37.21,43.37,37.58z"/><path d="M44.26,29.24C41.82,31.69,39.22,32,37.23,32c-2.6,0-5.47-0.82-6.74-1.62l-0.26-0.16c-0.15-0.1-0.26-0.18-0.33-0.24 c-0.39-0.36-0.44-0.96-0.11-1.37l0.09-0.12c0.17-0.22,0.62-0.77,0.92-1.94c0.26-1.03,0.45-2.66-0.36-4.24h0.01 c-2.26-5.21-9.1-9.3-15.57-9.31h-0.03c-4.17,0-7.76,1.59-10.47,4.57C7.7,8.68,15.79,3,25.3,3c1.43,0,2.87,0.14,4.27,0.41 C41.1,5.61,45.21,14.95,46.2,17.76C46.78,19.42,48.36,25.14,44.26,29.24z"/></svg>
--- a/website/pages/assets/img/icons/custom/firefox-icon.svg
+++ b/website/pages/assets/img/icons/custom/firefox-icon.svg
@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M48.579,18.621c-0.103-0.433-0.492-0.748-0.937-0.748c-0.005,0-0.01,0-0.013,0c-0.38-2.756-1.289-6.538-3.471-8.691C43.973,9,43.729,8.906,43.483,8.906c-0.18,0-0.358,0.05-0.516,0.151c-0.121,0.077-0.219,0.177-0.292,0.291c-0.538-0.605-1.17-1.18-1.91-1.706C38.897,6.408,36.02,5,32.057,5c-0.651,0-1.335,0.018-2.054,0.056c0.367,0.002,0.702,0.024,1.049,0.039c-0.336-0.014-0.664-0.034-1.018-0.036c-0.011,0-0.02-0.003-0.031-0.003c2.908,0.025,5.061,2.851,5.31,3.635c-0.327-0.067-0.643-0.095-0.943-0.1c-0.249-0.004-0.486,0.007-0.707,0.032c-0.51,0.058-0.945,0.174-1.256,0.283c4.629,1.974,9.544,4.665,8.899,8.899c-0.456-0.771-1.389-1.336-1.856-1.336c0.008,0,0.019,0.006,0.025,0.006c-0.019,0-0.041-0.006-0.06-0.005c1.351,2.698,0.996,6.189,0.275,9.372c-0.21-1.568-1.435-2.979-1.435-2.979s1.292,7.463-2.539,11.248c0.602-1.488,0.52-3.669,0.52-3.669S32.078,37,27.003,37s-8.16-3.205-9-4c0.318,0.026,1.077,0.064,1.381,0.064c-0.004,0-0.009-0.001-0.013-0.001c0.291,0.001,0.574-0.011,0.851-0.031c3.974-0.296,6.264-2.625,6.503-2.797c0.357-0.256,0.6-0.351,0.868-0.351c0.173,0,0.355,0.039,0.585,0.101c0.061,0.017,0.133,0.01,0.205,0c0.294-0.039,0.621-0.28,0.621-0.649c0-0.675-1.38-2.335-3.405-2.335c-2.324,0-2.45,1.639-4.743,1.639c-2.328,0-5.147-3.502-5.229-3.791c0-0.368,0.066-1.587,1.371-1.782c1.711,0.271,2.91,0.6,3.255,0.615c0.316-1.769-0.63-3.33-0.779-3.629c0.673-0.856,2.91-2.269,3.125-2.42c0.399-0.279,0.826-0.978,0.826-1.376c0-0.344-0.367-0.428-0.367-0.428s-0.524-0.021-1.376-0.092c-1.585-0.133-1.712-0.397-2.507-1.101c-0.569-0.503-1.529-1.59-1.529-1.59s0.245-2.079,3.456-4.984c-2.63,0-6.177,3.088-6.177,3.088s-0.764-0.367-1.896-0.367c-2.049,0-3.425,0.704-3.425,0.704s-1.07-1.2-1.717-5.233C7.888,6.25,7.89,6.247,7.893,6.243c0-0.002-0.001-0.004-0.001-0.007C7.839,5.871,7.577,5.57,7.222,5.462c-0.091-0.027-0.184-0.04-0.276-0.04c-0.267,0-0.527,0.111-0.711,0.316c-2.515,2.777-2.651,7.735-2.64,9.069C1.433,17.96,1.002,19.284,1,20.476c0,0.838,0.098,1.232,0.375,1.507c0.123,0.122,0.271,0.204,0.428,0.247c-0.234,1.035-0.435,2.342-0.435,3.782c0,9.222,8.207,21.997,23.617,21.997c10.074,0,15.946-5.967,19.097-10.973C47.665,31.348,49,24.937,49,22.232C48.999,20.395,48.682,19.06,48.579,18.621z"/><path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M8.727,10.602C12.769,5.945,18.733,3,25.384,3c5.139,0,9.869,1.759,13.618,4.707"/></svg>
--- a/website/pages/assets/js/clipboard.min.js
+++ b/website/pages/assets/js/clipboard.min.js
--- a/website/pages/assets/js/flatpickr.min.js
+++ b/website/pages/assets/js/flatpickr.min.js
--- a/website/pages/assets/js/ion.rangeSlider.min.js
+++ b/website/pages/assets/js/ion.rangeSlider.min.js
--- a/website/pages/assets/js/jarallax-element.min.js
+++ b/website/pages/assets/js/jarallax-element.min.js
@ -1,7 +1,7 @@
 /*!
- * Name    : Elements Extension for Jarallax
+ * Name    : DEPRECATED Elements Extension for Jarallax. Use laxxx instead https://github.com/alexfoxy/laxxx
 * Version : 1.0.0
 * Author  : nK <https://nkdev.info>
 * GitHub  : https://github.com/nk-o/jarallax
- */!function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";var o=r(n(2));function r(t){return t&&t.__esModule?t:{default:t}}(0,r(n(3)).default)(),(0,o.default)(function(){"undefined"!=typeof jarallax&&jarallax(document.querySelectorAll("[data-jarallax-element]"))})},function(t,e,n){"use strict";t.exports=function(t){"complete"===document.readyState||"interactive"===document.readyState?t.call():document.attachEvent?document.attachEvent("onreadystatechange",function(){"interactive"===document.readyState&&t.call()}):document.addEventListener&&document.addEventListener("DOMContentLoaded",t)}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:i.default.jarallax;if(void 0===t)return;var e=t.constructor;["initImg","canInitParallax","init","destroy","clipContainer","coverImage","isVisible","onScroll","onResize"].forEach(function(f){var y=e.prototype[f];e.prototype[f]=function(){var t=this,e=arguments||[];if("initImg"===f&&null!==t.$item.getAttribute("data-jarallax-element")&&(t.options.type="element",t.pureOptions.speed=t.$item.getAttribute("data-jarallax-element")||t.pureOptions.speed),"element"!==t.options.type)return y.apply(t,e);switch(t.pureOptions.threshold=t.$item.getAttribute("data-threshold")||"",f){case"init":var n=t.pureOptions.speed.split(" ");t.options.speed=t.pureOptions.speed||0,t.options.speedY=n[0]?parseFloat(n[0]):0,t.options.speedX=n[1]?parseFloat(n[1]):0;var o=t.pureOptions.threshold.split(" ");t.options.thresholdY=o[0]?parseFloat(o[0]):null,t.options.thresholdX=o[1]?parseFloat(o[1]):null,y.apply(t,e);var r=t.$item.getAttribute("data-jarallax-original-styles");return r&&t.$item.setAttribute("style",r),!0;case"onResize":var i=t.css(t.$item,"transform");t.css(t.$item,{transform:""});var a=t.$item.getBoundingClientRect();t.itemData={width:a.width,height:a.height,y:a.top+t.getWindowData().y,x:a.left},t.css(t.$item,{transform:i});break;case"onScroll":var l=t.getWindowData(),s=(l.y+l.height/2-t.itemData.y-t.itemData.height/2)/(l.height/2),u=s*t.options.speedY,c=s*t.options.speedX,d=u,p=c;null!==t.options.thresholdY&&u>t.options.thresholdY&&(d=0),null!==t.options.thresholdX&&c>t.options.thresholdX&&(p=0),t.css(t.$item,{transform:"translate3d("+p+"px,"+d+"px,0)"});break;case"initImg":case"isVisible":case"clipContainer":case"coverImage":return!0}return y.apply(t,e)}})};var o,r=n(4),i=(o=r)&&o.__esModule?o:{default:o}},function(n,t,e){"use strict";(function(t){var e;e="undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{},n.exports=e}).call(this,e(5))},function(t,e,n){"use strict";var o,r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};o=function(){return this}();try{o=o||new Function("return this")()}catch(t){"object"===("undefined"==typeof window?"undefined":r(window))&&(o=window)}t.exports=o}]);
+ */!function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";n.r(e);var o=n(2),r=n.n(o),i=n(3),a=n.n(i),l=n(5);Object(l.default)(),r()(function(){void 0!==a.a.jarallax&&a.a.jarallax(document.querySelectorAll("[data-jarallax-element]"))})},function(t,e){t.exports=function(t){"complete"===document.readyState||"interactive"===document.readyState?t.call():document.attachEvent?document.attachEvent("onreadystatechange",function(){"interactive"===document.readyState&&t.call()}):document.addEventListener&&document.addEventListener("DOMContentLoaded",t)}},function(n,t,e){(function(t){var e;e="undefined"!=typeof window?window:void 0!==t?t:"undefined"!=typeof self?self:{},n.exports=e}).call(this,e(4))},function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var o;o=function(){return this}();try{o=o||new Function("return this")()}catch(t){"object"===("undefined"==typeof window?"undefined":n(window))&&(o=window)}t.exports=o},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return i});var o=n(3),r=n.n(o);function i(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:r.a.jarallax;if(void 0!==t){var e=t.constructor;["initImg","canInitParallax","init","destroy","clipContainer","coverImage","isVisible","onScroll","onResize"].forEach(function(y){var h=e.prototype[y];e.prototype[y]=function(){var t=this;"initImg"===y&&null!==t.$item.getAttribute("data-jarallax-element")&&(t.options.type="element",t.pureOptions.speed=t.$item.getAttribute("data-jarallax-element")||t.pureOptions.speed);for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];if("element"!==t.options.type)return h.apply(t,n);switch(t.pureOptions.threshold=t.$item.getAttribute("data-threshold")||"",y){case"init":var r=t.pureOptions.speed.split(" ");t.options.speed=t.pureOptions.speed||0,t.options.speedY=r[0]?parseFloat(r[0]):0,t.options.speedX=r[1]?parseFloat(r[1]):0;var i=t.pureOptions.threshold.split(" ");t.options.thresholdY=i[0]?parseFloat(i[0]):null,t.options.thresholdX=i[1]?parseFloat(i[1]):null,h.apply(t,n);var a=t.$item.getAttribute("data-jarallax-original-styles");return a&&t.$item.setAttribute("style",a),!0;case"onResize":var l=t.css(t.$item,"transform");t.css(t.$item,{transform:""});var s=t.$item.getBoundingClientRect();t.itemData={width:s.width,height:s.height,y:s.top+t.getWindowData().y,x:s.left},t.css(t.$item,{transform:l});break;case"onScroll":var u=t.getWindowData(),c=(u.y+u.height/2-t.itemData.y-t.itemData.height/2)/(u.height/2),p=c*t.options.speedY,d=c*t.options.speedX,f=p,m=d;null!==t.options.thresholdY&&p>t.options.thresholdY&&(f=0),null!==t.options.thresholdX&&d>t.options.thresholdX&&(m=0),t.css(t.$item,{transform:"translate3d(".concat(m,"px,").concat(f,"px,0)")});break;case"initImg":case"isVisible":case"clipContainer":case"coverImage":return!0}return h.apply(t,n)}})}}}]);
 //# sourceMappingURL=jarallax-element.min.js.map
--- a/website/pages/assets/js/jarallax-element.min.js.map
+++ b/website/pages/assets/js/jarallax-element.min.js.map
--- a/website/pages/assets/js/jarallax-video.min.js
+++ b/website/pages/assets/js/jarallax-video.min.js
--- a/website/pages/assets/js/jarallax-video.min.js.map
+++ b/website/pages/assets/js/jarallax-video.min.js.map
--- a/website/pages/assets/js/jarallax.min.js
+++ b/website/pages/assets/js/jarallax.min.js
--- a/website/pages/assets/js/jarallax.min.js.map
+++ b/website/pages/assets/js/jarallax.min.js.map
--- a/website/pages/assets/js/jquery.min.js
+++ b/website/pages/assets/js/jquery.min.js
--- a/website/pages/assets/js/plyr.polyfilled.min.js
+++ b/website/pages/assets/js/plyr.polyfilled.min.js
--- a/website/pages/assets/js/plyr.polyfilled.min.js.map
+++ b/website/pages/assets/js/plyr.polyfilled.min.js.map
--- a/website/pages/assets/js/prism.js
+++ b/website/pages/assets/js/prism.js
--- a/website/pages/assets/js/smooth-scroll.polyfills.min.js
+++ b/website/pages/assets/js/smooth-scroll.polyfills.min.js
--- a/website/pages/assets/js/svg-injector.umd.production.js
+++ b/website/pages/assets/js/svg-injector.umd.production.js
@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).SVGInjector={})}(this,function(t){"use strict";var e,r=function(t){return t.cloneNode(!0)},n=function(){return"file:"===window.location.protocol},i=new Map,o={},a=function(t,e){o[t]=o[t]||[],o[t].push(e)},l=function(t){for(var e=function(e,n){setTimeout(function(){if(Array.isArray(o[t])){var n=i.get(t),a=o[t][e];(n instanceof SVGSVGElement||n instanceof HTMLElement)&&a(null,r(n)),n instanceof Error&&a(n),e===o[t].length-1&&delete o[t]}},0)},n=0,a=o[t].length;n<a;n++)e(n)},s=0,c=[],u={},f="http://www.w3.org/1999/xlink",d=function(t,e,o,d,p){var v=t.getAttribute("data-src")||t.getAttribute("src");if(v&&/\.svg/i.test(v)){if(-1!==c.indexOf(t))return c.splice(c.indexOf(t),1),void(t=null);c.push(t),t.setAttribute("src",""),function(t,e){if(i.has(t)){var o=i.get(t);return o instanceof SVGSVGElement||o instanceof HTMLElement?void e(null,r(o)):o instanceof Error?void e(o):void a(t,e)}i.set(t,void 0),a(t,e);var s=new XMLHttpRequest;s.onreadystatechange=function(){try{if(4===s.readyState){if(404===s.status||null===s.responseXML)throw new Error(n()?"Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver.":"Unable to load SVG file: "+t);if(!(200===s.status||n()&&0===s.status))throw new Error("There was a problem injecting the SVG: "+s.status+" "+s.statusText);s.responseXML instanceof Document&&s.responseXML.documentElement&&i.set(t,s.responseXML.documentElement),l(t)}}catch(e){i.set(t,e),l(t)}},s.open("GET",t),s.overrideMimeType&&s.overrideMimeType("text/xml"),s.send()}(v,function(r,n){if(!n)return c.splice(c.indexOf(t),1),t=null,void p(r);var i=t.getAttribute("id");i&&n.setAttribute("id",i);var a=t.getAttribute("title");a&&n.setAttribute("title",a);var l=t.getAttribute("width");l&&n.setAttribute("width",l);var h=t.getAttribute("height");h&&n.setAttribute("height",h);var g=Array.from(new Set((n.getAttribute("class")||"").split(" ").concat(["injected-svg"],(t.getAttribute("class")||"").split(" ")))).join(" ").trim();n.setAttribute("class",g);var A=t.getAttribute("style");A&&n.setAttribute("style",A),n.setAttribute("data-src",v);var m=[].filter.call(t.attributes,function(t){return/^data-\w[\w-]*$/.test(t.name)});if(Array.prototype.forEach.call(m,function(t){t.name&&t.value&&n.setAttribute(t.name,t.value)}),o){var b,w,y,E,S={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],path:[],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(S).forEach(function(t){w=S[t];for(var e=function(t,e){var r;E=(y=b[t].id)+"-"+ ++s,Array.prototype.forEach.call(w,function(t){for(var e=0,i=(r=n.querySelectorAll("["+t+'*="'+y+'"]')).length;e<i;e++){var o=r[e].getAttribute(t);o&&!o.match(new RegExp("url\\(#"+y+"\\)"))||r[e].setAttribute(t,"url(#"+E+")")}});for(var i=n.querySelectorAll("[*|href]"),o=[],a=0,l=i.length;a<l;a++){var c=i[a].getAttributeNS(f,"href");c&&c.toString()==="#"+b[t].id&&o.push(i[a])}for(var u=0,d=o.length;u<d;u++)o[u].setAttributeNS(f,"href","#"+E);b[t].id=E},r=0,i=(b=n.querySelectorAll(t+"[id]")).length;r<i;r++)e(r)})}n.removeAttribute("xmlns:a");for(var x,j,k=n.querySelectorAll("script"),G=[],M=0,T=k.length;M<T;M++)(j=k[M].getAttribute("type"))&&"application/ecmascript"!==j&&"application/javascript"!==j&&"text/javascript"!==j||((x=k[M].innerText||k[M].textContent)&&G.push(x),n.removeChild(k[M]));if(G.length>0&&("always"===e||"once"===e&&!u[v])){for(var V=0,N=G.length;V<N;V++)new Function(G[V])(window);u[v]=!0}var O=n.querySelectorAll("style");Array.prototype.forEach.call(O,function(t){t.textContent+=""}),n.setAttribute("xmlns","http://www.w3.org/2000/svg"),n.setAttribute("xmlns:xlink",f),d(n),t.parentNode&&t.parentNode.replaceChild(n,t),c.splice(c.indexOf(t),1),t=null,p(null,n)})}else p(new Error("Attempted to inject a file with a non-svg extension: "+v))};(e=t.EvalScripts||(t.EvalScripts={})).Always="always",e.Once="once",e.Never="never";t.SVGInjector=function(e,r){var n=void 0===r?{}:r,i=n.afterAll,o=void 0===i?function(){}:i,a=n.afterEach,l=void 0===a?function(){}:a,s=n.beforeEach,c=void 0===s?function(){}:s,u=n.evalScripts,f=void 0===u?t.EvalScripts.Never:u,p=n.renumerateIRIElements,v=void 0===p||p;if(e&&"length"in e)for(var h=0,g=0,A=e.length;g<A;g++)d(e[g],f,v,c,function(t,r){l(t,r),e&&"length"in e&&e.length===++h&&o(h)});else e?d(e,f,v,c,function(t,r){l(t,r),o(1),e=null}):o(0)},Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).SVGInjector={})}(this,(function(t){"use strict";var e=function(t){return t.cloneNode(!0)},r=function(){return"file:"===window.location.protocol},n=new Map,i={},o=function(t,e){i[t]=i[t]||[],i[t].push(e)},a=function(t){for(var r=function(r,o){setTimeout((function(){if(Array.isArray(i[t])){var o=n.get(t),a=i[t][r];o instanceof SVGElement&&a(null,e(o)),o instanceof Error&&a(o),r===i[t].length-1&&delete i[t]}}),0)},o=0,a=i[t].length;o<a;o++)r(o)},l=0,s=function(){for(var t=0,e=0,r=arguments.length;e<r;e++)t+=arguments[e].length;var n=Array(t),i=0;for(e=0;e<r;e++)for(var o=arguments[e],a=0,l=o.length;a<l;a++,i++)n[i]=o[a];return n},u=[],c={},f="http://www.w3.org/1999/xlink",d=function(t,i,d,p,v){var h=t.getAttribute("data-src")||t.getAttribute("src");if(h&&/\.svg/i.test(h)){if(-1!==u.indexOf(t))return u.splice(u.indexOf(t),1),void(t=null);u.push(t),t.setAttribute("src",""),function(t,i){if(n.has(t)){var l=n.get(t);return l instanceof SVGElement?void i(null,e(l)):l instanceof Error?void i(l):void o(t,i)}n.set(t,void 0),o(t,i);var s=new XMLHttpRequest;s.onreadystatechange=function(){try{if(4===s.readyState){if(404===s.status||null===s.responseXML)throw new Error(r()?"Note: SVG injection ajax calls do not work locally without adjusting security setting in your browser. Or consider using a local webserver.":"Unable to load SVG file: "+t);if(!(200===s.status||r()&&0===s.status))throw new Error("There was a problem injecting the SVG: "+s.status+" "+s.statusText);s.responseXML instanceof Document&&s.responseXML.documentElement&&n.set(t,s.responseXML.documentElement),a(t)}}catch(e){n.set(t,e),a(t)}},s.open("GET",t),s.overrideMimeType&&s.overrideMimeType("text/xml"),s.send()}(h,(function(e,r){if(!r)return u.splice(u.indexOf(t),1),t=null,void v(e);var n=t.getAttribute("id");n&&r.setAttribute("id",n);var o=t.getAttribute("title");o&&r.setAttribute("title",o);var a=t.getAttribute("width");a&&r.setAttribute("width",a);var g=t.getAttribute("height");g&&r.setAttribute("height",g);var A=Array.from(new Set(s((r.getAttribute("class")||"").split(" "),["injected-svg"],(t.getAttribute("class")||"").split(" ")))).join(" ").trim();r.setAttribute("class",A);var m=t.getAttribute("style");m&&r.setAttribute("style",m),r.setAttribute("data-src",h);var b=[].filter.call(t.attributes,(function(t){return/^data-\w[\w-]*$/.test(t.name)}));if(Array.prototype.forEach.call(b,(function(t){t.name&&t.value&&r.setAttribute(t.name,t.value)})),d){var w,y,x,E,S={clipPath:["clip-path"],"color-profile":["color-profile"],cursor:["cursor"],filter:["filter"],linearGradient:["fill","stroke"],marker:["marker","marker-start","marker-mid","marker-end"],mask:["mask"],path:[],pattern:["fill","stroke"],radialGradient:["fill","stroke"]};Object.keys(S).forEach((function(t){y=S[t];for(var e=function(t,e){var n;E=(x=w[t].id)+"-"+ ++l,Array.prototype.forEach.call(y,(function(t){for(var e=0,i=(n=r.querySelectorAll("["+t+'*="'+x+'"]')).length;e<i;e++){var o=n[e].getAttribute(t);o&&!o.match(new RegExp("url\\(#"+x+"\\)"))||n[e].setAttribute(t,"url(#"+E+")")}}));for(var i=r.querySelectorAll("[*|href]"),o=[],a=0,s=i.length;a<s;a++){var u=i[a].getAttributeNS(f,"href");u&&u.toString()==="#"+w[t].id&&o.push(i[a])}for(var c=0,d=o.length;c<d;c++)o[c].setAttributeNS(f,"href","#"+E);w[t].id=E},n=0,i=(w=r.querySelectorAll(t+"[id]")).length;n<i;n++)e(n)}))}r.removeAttribute("xmlns:a");for(var j,k,G=r.querySelectorAll("script"),M=[],O=0,T=G.length;O<T;O++)(k=G[O].getAttribute("type"))&&"application/ecmascript"!==k&&"application/javascript"!==k&&"text/javascript"!==k||((j=G[O].innerText||G[O].textContent)&&M.push(j),r.removeChild(G[O]));if(M.length>0&&("always"===i||"once"===i&&!c[h])){for(var V=0,q=M.length;V<q;V++)new Function(M[V])(window);c[h]=!0}var N=r.querySelectorAll("style");Array.prototype.forEach.call(N,(function(t){t.textContent+=""})),r.setAttribute("xmlns","http://www.w3.org/2000/svg"),r.setAttribute("xmlns:xlink",f),p(r),t.parentNode&&t.parentNode.replaceChild(r,t),u.splice(u.indexOf(t),1),t=null,v(null,r)}))}else v(new Error("Attempted to inject a file with a non-svg extension: "+h))};t.SVGInjector=function(t,e){var r=void 0===e?{}:e,n=r.afterAll,i=void 0===n?function(){}:n,o=r.afterEach,a=void 0===o?function(){}:o,l=r.beforeEach,s=void 0===l?function(){}:l,u=r.evalScripts,c=void 0===u?"never":u,f=r.renumerateIRIElements,p=void 0===f||f;if(t&&"length"in t)for(var v=0,h=0,g=t.length;h<g;h++)d(t[h],c,p,s,(function(e,r){a(e,r),t&&"length"in t&&t.length===++v&&i(v)}));else t?d(t,c,p,s,(function(e,r){a(e,r),i(1),t=null})):i(0)},Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=svg-injector.umd.production.js.map
--- a/website/pages/assets/js/svg-injector.umd.production.js.map
+++ b/website/pages/assets/js/svg-injector.umd.production.js.map
--- a/website/pages/assets/js/twitterFetcher_min.js
+++ b/website/pages/assets/js/twitterFetcher_min.js
--- a/website/pages/assets/js/typed.min.js
+++ b/website/pages/assets/js/typed.min.js
--- a/website/pages/assets/js/typed.min.js.map
+++ b/website/pages/assets/js/typed.min.js.map
--- a/website/pages/download.html
+++ b/website/pages/download.html
@ -15,9 +15,9 @@

      gtag("config", "UA-150751006-2");
    </script>
-    <script type="text/javascript">   
-      window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};   
-      heap.load("3340058302"); 
+    <script type="text/javascript">
+      window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+      heap.load("3340058302");
    </script>
    <meta charset="utf-8" />
    <title>Responsively App | A Web developer's browser</title>
@ -163,7 +163,7 @@
            <img class="icon navbar-toggler-close" src="assets/img/icons/interface/cross.svg" alt="cross interface icon"
              data-inject-svg />
          </button>
-    
+
          <div class="collapse navbar-collapse justify-content-end p-3 p-md-0">
            <div class="py-2 py-lg-0">
              <ul class="navbar-nav">
@ -202,11 +202,11 @@

    <section id="auto" class="bg-primary-3 text-light text-center has-divider">
      <div class="container">
-          <div class="row text-center py-6">
-              <div class="col">
-    
-                <h1>Your download should start automatically</h1>
-                <div class="lead mb-4">If the download doesn't start, <a href="#manual" class="light-link">Click here</a> to download manually.</div>
+          <div class="row text-center">
+              <div class="col pb-5">
+
+                <h1>Download Responsively App</h1>
+                <div class="lead mb-4">You are one step away from improving your web development speed!</div>
              </div>
            </div>

@ -246,17 +246,13 @@
                </a>
              </div>
              </div>
+            </div>

-              
-                
-        </div>
-
-        
      </div>

      </section>
        <div class="has-divider">
-        
+
          <div class="divider flip-x bg-primary-3">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="96px" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" class="injected-svg" data-src="assets/img/dividers/divider-3.svg">
         <path d="M0,0 C6.83050094,50 15.1638343,75 25,75 C41.4957514,75 62.4956597,0 81.2456597,0 C93.7456597,0 99.9971065,0 100,0 L100,100 L0,100"></path>
@ -272,6 +268,44 @@
 <path d="M0,0 C16.6666667,66 33.3333333,99 50,99 C66.6666667,99 83.3333333,66 100,0 L100,100 L0,100 L0,0 Z"></path>
 </svg>
  </div>
+
+  <section class="has-divider bg-primary-2-alt">
+    <div class="divider flip-y">
+      <img
+        src="assets/img/dividers/divider-2.svg"
+        alt="graphical divider"
+        data-inject-svg
+      />
+    </div>
+    <div class="container pt-3 pb-0">
+      <div class="row justify-content-center text-center mb-6">
+        <div class="col-xl-11 col-lg-9">
+          <h2 class="mx-xl-6 h1">
+            Browser Extension
+          </h2>
+          <p class="display-5 mx-xl-6">Install the handy browser extension to easily send links from your browser to the app and preview instantly.</p>
+          <a class="extensionButton m-1 btn btn-inline btn-lg btn-outline-primary" href="https://addons.mozilla.org/en-US/firefox/addon/responsively-helper" target="_blank">
+            <span class="m-1">Download for Firefox</span>
+          </a>
+          <a class="extensionButton m-1 btn btn-inline btn-lg btn-outline-primary" href="https://chrome.google.com/webstore/detail/responsively-helper/jhphiidjkooiaollfiknkokgodbaddcj" target="_blank">
+            <span class="m-1">Download for Chrome </span>
+          </a>
+          <a class="extensionButton m-1 btn btn-inline btn-lg btn-outline-primary" href="https://microsoftedge.microsoft.com/addons/detail/responsively-helper/ooiejjgflcgkbbehheengalibfehaojn" target="_blank">
+            <span class="m-1">Download  for  Edge </span>
+          </a>
+          <p class="lead"></p>
+        </div>
+      </div>
+    </div>
+    <div class="divider flip-x">
+      <img
+        src="assets/img/dividers/divider-3.svg"
+        alt="graphical divider"
+        data-inject-svg
+      />
+    </div>
+  </section>
+
    <!-- trusted section -->
    <footer id="Contact-Us" class="pb-1 bg-primary-3 text-light">
      <div class="container">
@ -454,7 +488,7 @@
        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
        iosPlatforms = ['iPhone', 'iPad', 'iPod'],
        os = null;
-  
+
    if (macosPlatforms.indexOf(platform) !== -1) {
      os = macOs;
    } else if (iosPlatforms.indexOf(platform) !== -1) {
@ -466,7 +500,7 @@
    } else if (!os && /Linux/.test(platform)) {
      os = linuxOs;
    }
-  
+
    return os;
  }

@ -505,21 +539,6 @@

  window.addEventListener('load', () => {
    setDownloadURL();
-    if (getCookie('downloaded') === "true" || getWidth() < 800) {
-      return;
-    }
-    setTimeout(() => {
-      if (window.location.href.indexOf('instructions') !== -1) {
-        return;
-      }
-      var os = getOS();
-      var downloadLink = document.getElementById(os);
-      if (downloadLink) {
-        downloadLink.click();
-        setCookie('downloaded', 'true', 2*60);
-        heap && heap.track('autoDownload');
-      }
-    }, 1000);
  });
  </script>
  </body>
--- a/website/pages/index.html
+++ b/website/pages/index.html
@ -15,9 +15,9 @@

      gtag("config", "UA-150751006-2");
    </script>
-    <script type="text/javascript">   
-      window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};   
-      heap.load("3340058302"); 
+    <script type="text/javascript">
+      window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+      heap.load("3340058302");
    </script>
    <meta charset="utf-8" />
    <title>Responsively App | A Web developer's browser</title>
@ -164,7 +164,7 @@
            <img class="icon navbar-toggler-close" src="assets/img/icons/interface/cross.svg" alt="cross interface icon"
              data-inject-svg />
          </button>
-    
+
          <div class="collapse navbar-collapse justify-content-end p-3 p-md-0">
            <div class="py-2 py-lg-0">
              <ul class="navbar-nav">
@ -517,6 +517,43 @@
        </div>
      </div>
    </section>
+    <section class="has-divider bg-primary-2-alt">
+      <div class="divider flip-y">
+        <img
+          src="assets/img/dividers/divider-2.svg"
+          alt="graphical divider"
+          data-inject-svg
+        />
+      </div>
+      <div class="container pt-3 pb-0">
+        <div class="row justify-content-center text-center mb-6">
+          <div class="col-xl-11 col-lg-9">
+            <h2 class="mx-xl-6 h1">
+              Browser Extension
+            </h2>
+            <p class="display-5 mx-xl-6">Install the handy browser extension to easily send links from your browser to the app and preview instantly.</p>
+            <a class="extensionButton m-1 btn btn-inline btn-lg btn-outline-primary" href="https://addons.mozilla.org/en-US/firefox/addon/responsively-helper" target="_blank">
+              <span class="m-1">Download for Firefox</span>
+            </a>
+            <a class="extensionButton m-1 btn btn-inline btn-lg btn-outline-primary" href="https://chrome.google.com/webstore/detail/responsively-helper/jhphiidjkooiaollfiknkokgodbaddcj" target="_blank">
+              <span class="m-1">Download for Chrome </span>
+            </a>
+            <a class="extensionButton m-1 btn btn-inline btn-lg btn-outline-primary" href="https://microsoftedge.microsoft.com/addons/detail/responsively-helper/ooiejjgflcgkbbehheengalibfehaojn" target="_blank">
+              <span class="m-1">Download  for  Edge </span>
+            </a>
+            <p class="lead"></p>
+          </div>
+        </div>
+      </div>
+      <div class="divider flip-x">
+        <img
+          src="assets/img/dividers/divider-3.svg"
+          alt="graphical divider"
+          data-inject-svg
+        />
+      </div>
+    </section>
+
    <!--
      <section id="How-It-Works" class="bg-primary-3 text-light has-divider jarallax" data-jarallax data-speed="0.2">
        <img src="assets/img/desktop-app-3.jpg" alt="Image" class="jarallax-img opacity-20">
--- a/website/scss/custom/components/plugins/ion.rangeSlider.css
+++ b/website/scss/custom/components/plugins/ion.rangeSlider.css
@ -1,7 +1,7 @@
 /**
-Ion.RangeSlider, 2.3.0
-© Denis Ineshin, 2010 - 2018, IonDen.com
-Build date: 2018-12-11 23:23:51
+Ion.RangeSlider, 2.3.1
+© Denis Ineshin, 2010 - 2019, IonDen.com
+Build date: 2019-12-19 16:51:02
 */
 .irs {
  position: relative;
--- a/website/scss/custom/components/plugins/plyr.css
+++ b/website/scss/custom/components/plugins/plyr.css
--- a/website/scss/custom/components/plugins/prism-okaidia.css
+++ b/website/scss/custom/components/plugins/prism-okaidia.css
@ -52,14 +52,14 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: slategray;
+	color: #8292a2;
 }

 .token.punctuation {
 	color: #f8f8f2;
 }

-.namespace {
+.token.namespace {
 	opacity: .7;
 }

--- a/website/scss/custom/components/plugins/prism.css
+++ b/website/scss/custom/components/plugins/prism.css
@ -77,7 +77,7 @@ pre[class*="language-"] {
 	color: #999;
 }

-.namespace {
+.token.namespace {
 	opacity: .7;
 }

@ -106,6 +106,7 @@ pre[class*="language-"] {
 .language-css .token.string,
 .style .token.string {
 	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
 	background: hsla(0, 0%, 100%, .5);
 }
				`@ -0,0 +1 @@`
				<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M25 17A8 8 0 1 0 25 33A8 8 0 1 0 25 17Z"/><path d="M25,2C12.317,2,2,12.317,2,25s10.317,23,23,23s23-10.317,23-23S37.683,2,25,2z M22.329,45.811l6.647-11.64C27.756,34.702,26.413,35,25,35c-3.559,0-6.682-1.875-8.454-4.683c-0.023-0.029-0.049-0.053-0.069-0.085L6.832,14.516c0.371-0.641,0.776-1.257,1.211-1.852l7.004,11.413C15.515,18.995,19.798,15,25,15h18.462c0.351,0.646,0.663,1.316,0.946,2H30.974C33.412,18.825,35,21.727,35,25c0,1.787-0.477,3.463-1.302,4.916c-0.007,0.014-0.006,0.029-0.014,0.043l-9.147,16.018C23.79,45.96,23.055,45.903,22.329,45.811z"/></svg>