Merge pull request #1162 from astuanax/guids

Guides & Rulers

desktop-app/package.json

@@ -108,6 +108,7 @@
     "@headlessui/react": "^1.7.4",
     "@iconify/react": "^3.2.2",
     "@reduxjs/toolkit": "^1.9.5",
+    "@scena/react-guides": "^0.28.2",
     "autoprefixer": "^10.4.14",
     "bluebird": "^3.7.2",
     "browser-sync": "^2.29.3",

desktop-app/src/main/preload-webview.ts

@@ -15,14 +15,42 @@ const documentBodyInit = () => {
       contextMenuMeta: { x: e.x, y: e.y },
     });
   });
+
+  window.addEventListener('wheel', (e) => {
+    ipcRenderer.sendToHost('pass-scroll-data', {
+      coordinates: { x: e.deltaX, y: e.deltaY },
+      innerHeight: document.body.scrollHeight,
+      innerWidth: window.innerWidth,
+    });
+  });
+
+  window.addEventListener('dom-ready', () => {
+    const { body } = document;
+    const html = document.documentElement;
+
+    const height = Math.max(
+      body.scrollHeight,
+      body.offsetHeight,
+      html.clientHeight,
+      html.scrollHeight,
+      html.offsetHeight
+    );
+
+    ipcRenderer.sendToHost('pass-scroll-data', {
+      coordinates: { x: 0, y: 0 },
+      innerHeight: height,
+      innerWidth: window.innerWidth,
+    });
+  });
 };
 
 ipcRenderer.on('context-menu-command', (_, command) => {
   ipcRenderer.sendToHost('context-menu-command', command);
 });
 
 const documentBodyWaitHandle = setInterval(() => {
-  window.onerror = function (errorMsg, url, lineNumber) {
+  window.onerror = function logError(errorMsg, url, lineNumber) {
+    // eslint-disable-next-line no-console
     console.log(`Unhandled error: ${errorMsg} ${url} ${lineNumber}`);
     // Code to run when an error has occurred on the page
   };
@@ -32,10 +60,12 @@ const documentBodyWaitHandle = setInterval(() => {
     try {
       documentBodyInit();
     } catch (err) {
+      // eslint-disable-next-line no-console
       console.log('Error in documentBodyInit:', err);
     }
 
     return;
   }
+  // eslint-disable-next-line no-console
   console.log('document.body not ready');
 }, 300);

desktop-app/src/main/webview-context-menu/register.ts

@@ -1,5 +1,7 @@
 import { BrowserWindow, ipcMain, Menu } from 'electron';
 import { CONTEXT_MENUS } from './common';
+// import { webViewPubSub } from '../../renderer/lib/pubsub';
+// import { MOUSE_EVENTS } from '../ruler';
 
 export const initWebviewContextMenu = () => {
   ipcMain.removeAllListeners('show-context-menu');
@@ -22,6 +24,10 @@ export const initWebviewContextMenu = () => {
       BrowserWindow.fromWebContents(event.sender) as Electron.PopupOptions
     );
   });
+  // ipcMain.on('pass-scroll-data', (event, ...args) => {
+  //   console.log(args[0].coordinates);
+  //   webViewPubSub.publish(MOUSE_EVENTS.SCROLL, [args[0].coordinates]);
+  // });
 };
 
 export default initWebviewContextMenu;

desktop-app/src/renderer/AppContent.tsx

@@ -6,11 +6,12 @@ import { store } from './store';
 
 import './App.css';
 import ThemeProvider from './context/ThemeProvider';
-import { APP_VIEWS, selectAppView } from './store/features/ui';
 import type { AppView } from './store/features/ui';
+import { APP_VIEWS, selectAppView } from './store/features/ui';
 import DeviceManager from './components/DeviceManager';
 import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
-import { InfoPopups } from './components/InfoPopups';
+import { ReleaseNotes } from './components/ReleaseNotes';
+import { Sponsorship } from './components/Sponsorship';
 
 if ((navigator as any).userAgentData.platform === 'Windows') {
   import('./titlebar-styles.css');
@@ -48,7 +49,8 @@ const AppContent = () => {
       <ThemeProvider>
         <KeyboardShortcutsManager />
         <ViewComponent />
-        <InfoPopups />
+        <ReleaseNotes />
+        <Sponsorship />
       </ThemeProvider>
     </Provider>
   );

desktop-app/src/renderer/components/InfoPopups/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ReleaseNotes, isReleaseNotesUnseen } from '../ReleaseNotes';
+import { isReleaseNotesUnseen, ReleaseNotes } from '../ReleaseNotes';
 import { Sponsorship } from '../Sponsorship';
 
 export const InfoPopups = () => {

desktop-app/src/renderer/components/KeyboardShortcutsManager/constants.ts

@@ -1,40 +1,42 @@
 export const SHORTCUT_CHANNEL = {
-  ZOOM_IN: 'ZOOM_IN',
-  ZOOM_OUT: 'ZOOM_OUT',
-  ROTATE_ALL: 'ROTATE_ALL',
-  SCREENSHOT_ALL: 'SCREENSHOT_ALL',
-  INSPECT_ELEMENTS: 'INSPECT_ELEMENTS',
-  PREVIEW_LAYOUT: 'PREVIEW_LAYOUT',
-  THEME: 'THEME',
   BACK: 'BACK',
-  FORWARD: 'FORWARD',
-  RELOAD: 'RELOAD',
   BOOKMARK: 'BOOKMARK',
+  DELETE_ALL: 'DELETE_ALL',
   DELETE_CACHE: 'DELETE_CACHE',
-  DELETE_STORAGE: 'DELETE_STORAGE',
   DELETE_COOKIES: 'DELETE_COOKIES',
-  DELETE_ALL: 'DELETE_ALL',
+  DELETE_STORAGE: 'DELETE_STORAGE',
   EDIT_URL: 'EDIT_URL',
+  FORWARD: 'FORWARD',
+  INSPECT_ELEMENTS: 'INSPECT_ELEMENTS',
+  PREVIEW_LAYOUT: 'PREVIEW_LAYOUT',
+  RELOAD: 'RELOAD',
+  ROTATE_ALL: 'ROTATE_ALL',
+  SCREENSHOT_ALL: 'SCREENSHOT_ALL',
+  THEME: 'THEME',
+  TOGGLE_RULERS: 'TOGGLE_RULERS',
+  ZOOM_IN: 'ZOOM_IN',
+  ZOOM_OUT: 'ZOOM_OUT',
 } as const;
 
 export type ShortcutChannel =
   typeof SHORTCUT_CHANNEL[keyof typeof SHORTCUT_CHANNEL];
 
 export const SHORTCUT_KEYS: { [key in ShortcutChannel]: string[] } = {
-  [SHORTCUT_CHANNEL.ZOOM_IN]: ['mod+=', 'mod++', 'mod+shift+='],
-  [SHORTCUT_CHANNEL.ZOOM_OUT]: ['mod+-'],
   [SHORTCUT_CHANNEL.BACK]: ['alt+left'],
+  [SHORTCUT_CHANNEL.BOOKMARK]: ['mod+d'],
+  [SHORTCUT_CHANNEL.DELETE_ALL]: ['mod+alt+del', 'mod+alt+backspace'],
+  [SHORTCUT_CHANNEL.DELETE_CACHE]: ['mod+alt+z'],
+  [SHORTCUT_CHANNEL.DELETE_COOKIES]: ['mod+alt+a'],
+  [SHORTCUT_CHANNEL.DELETE_STORAGE]: ['mod+alt+q'],
+  [SHORTCUT_CHANNEL.EDIT_URL]: ['mod+l'],
   [SHORTCUT_CHANNEL.FORWARD]: ['alt+right'],
+  [SHORTCUT_CHANNEL.INSPECT_ELEMENTS]: ['mod+i'],
+  [SHORTCUT_CHANNEL.PREVIEW_LAYOUT]: ['mod+shift+l'],
   [SHORTCUT_CHANNEL.RELOAD]: ['mod+r'],
-  [SHORTCUT_CHANNEL.EDIT_URL]: ['mod+l'],
-  [SHORTCUT_CHANNEL.BOOKMARK]: ['mod+d'],
   [SHORTCUT_CHANNEL.ROTATE_ALL]: ['mod+alt+r'],
   [SHORTCUT_CHANNEL.SCREENSHOT_ALL]: ['mod+s'],
-  [SHORTCUT_CHANNEL.INSPECT_ELEMENTS]: ['mod+i'],
-  [SHORTCUT_CHANNEL.PREVIEW_LAYOUT]: ['mod+shift+l'],
   [SHORTCUT_CHANNEL.THEME]: ['mod+t'],
-  [SHORTCUT_CHANNEL.DELETE_CACHE]: ['mod+alt+z'],
-  [SHORTCUT_CHANNEL.DELETE_STORAGE]: ['mod+alt+q'],
-  [SHORTCUT_CHANNEL.DELETE_COOKIES]: ['mod+alt+a'],
-  [SHORTCUT_CHANNEL.DELETE_ALL]: ['mod+alt+del', 'mod+alt+backspace'],
+  [SHORTCUT_CHANNEL.TOGGLE_RULERS]: ['alt+r'],
+  [SHORTCUT_CHANNEL.ZOOM_IN]: ['mod+=', 'mod++', 'mod+shift+='],
+  [SHORTCUT_CHANNEL.ZOOM_OUT]: ['mod+-'],
 };

desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx

@@ -15,6 +15,7 @@ interface Props {
   device: Device;
   setScreenshotInProgress: (value: boolean) => void;
   openDevTools: () => void;
+  toggleRuler: () => void;
   onRotate: (state: boolean) => void;
   onIndividualLayoutHandler: (device: Device) => void;
   isIndividualLayout: boolean;
@@ -25,6 +26,7 @@ const Toolbar = ({
   device,
   setScreenshotInProgress,
   openDevTools,
+  toggleRuler,
   onRotate,
   onIndividualLayoutHandler,
   isIndividualLayout,
@@ -124,6 +126,13 @@ const Toolbar = ({
     setFullScreenshotLoading(false);
   };
 
+  const toggleRulers = async () => {
+    if (webview === null) {
+      return;
+    }
+    toggleRuler();
+  };
+
   const rotate = async () => {
     setRotated(!rotated);
     onRotate(!rotated);
@@ -178,6 +187,9 @@ const Toolbar = ({
             }
           />
         </Button>
+        <Button onClick={toggleRulers} title="Show rulers">
+          <Icon icon="tdesign:measurement-1" />
+        </Button>
         <ColorBlindnessTools webview={webview} />
       </div>
       <Button