Merge branch 'main' into main

desktop-app-rewrite/.erb/configs/webpack.config.main.prod.ts

@@ -32,6 +32,10 @@ const configuration: webpack.Configuration = {
   entry: {
     main: path.join(webpackPaths.srcMainPath, 'main.ts'),
     preload: path.join(webpackPaths.srcMainPath, 'preload.ts'),
+    'preload-webview': path.join(
+      webpackPaths.srcMainPath,
+      'preload-webview.ts'
+    ),
   },
 
   externals: ['fsevents'],

desktop-app-rewrite/release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ResponsivelyApp",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "A developer-friendly browser for developing responsive web apps",
   "license": "MIT",
   "author": {

desktop-app-rewrite/src/main/main.ts

@@ -167,7 +167,7 @@ app.on('certificate-error', (event, _, url, __, ___, callback) => {
     return callback(true);
   }
   console.log('certificate-error event', url, BROWSER_SYNC_HOST);
-  return callback(false);
+  return callback(store.get('userPreferences.allowInsecureSSLConnections'));
 });
 
 app

desktop-app-rewrite/src/main/native-functions/index.ts

@@ -1,4 +1,4 @@
-import { ipcMain, webContents } from 'electron';
+import { ipcMain, nativeTheme, webContents } from 'electron';
 
 export interface DisableDefaultWindowOpenHandlerArgs {
   webContentsId: number;
@@ -8,18 +8,34 @@ export interface DisableDefaultWindowOpenHandlerResult {
   done: boolean;
 }
 
+export interface SetNativeThemeArgs {
+  theme: 'dark' | 'light';
+}
+
+export interface SetNativeThemeResult {
+  done: boolean;
+}
+
 export const initNativeFunctionHandlers = () => {
   ipcMain.handle(
     'disable-default-window-open-handler',
     async (
       _,
       arg: DisableDefaultWindowOpenHandlerArgs
     ): Promise<DisableDefaultWindowOpenHandlerResult> => {
-      webContents.fromId(arg.webContentsId).setWindowOpenHandler((edata) => {
-        console.log('window open handler', edata);
+      webContents.fromId(arg.webContentsId).setWindowOpenHandler(() => {
         return { action: 'deny' };
       });
       return { done: true };
     }
   );
+
+  ipcMain.handle(
+    'set-native-theme',
+    async (_, arg: SetNativeThemeArgs): Promise<SetNativeThemeResult> => {
+      const { theme } = arg;
+      nativeTheme.themeSource = theme;
+      return { done: true };
+    }
+  );
 };

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

@@ -129,20 +129,20 @@ const Toolbar = ({
           />
         </div>
       </Button>
-      <Button
-        onClick={toggleEventMirroring}
-        isActive={eventMirroringOff}
-        title="Disable Event Mirroring"
-      >
-        <Icon icon="fluent:plug-disconnected-24-regular" />
-      </Button>
       <Button
         onClick={fullScreenshot}
         isLoading={fullScreenshotLoading}
         title="Full Page Screenshot"
       >
         <Icon icon="ic:outline-photo-camera" />
       </Button>
+      <Button
+        onClick={toggleEventMirroring}
+        isActive={eventMirroringOff}
+        title="Disable Event Mirroring"
+      >
+        <Icon icon="fluent:plug-disconnected-24-regular" />
+      </Button>
       <Button onClick={openDevTools} title="Open Devtools">
         <Icon icon="ic:round-code" />
       </Button>

desktop-app-rewrite/src/renderer/components/Previewer/Device/index.tsx

@@ -43,6 +43,11 @@ interface Props {
   isPrimary: boolean;
 }
 
+interface ErrorState {
+  code: number;
+  description: string;
+}
+
 const Device = ({ isPrimary, device }: Props) => {
   const rotateDevice = useSelector(selectRotate);
   let { height, width } = device;
@@ -53,6 +58,7 @@ const Device = ({ isPrimary, device }: Props) => {
   }
   const address = useSelector(selectAddress);
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<ErrorState | null>(null);
   const [screenshotInProgress, setScreenshotInProgess] =
     useState<boolean>(false);
   const dispatch = useDispatch();
@@ -161,11 +167,26 @@ const Device = ({ isPrimary, device }: Props) => {
 
     webview.addEventListener('did-start-loading', () => {
       setLoading(true);
+      setError(null);
     });
     webview.addEventListener('did-stop-loading', () => {
       setLoading(false);
     });
 
+    webview.addEventListener(
+      'did-fail-load',
+      ({ errorCode, errorDescription }) => {
+        if (errorCode === -3) {
+          // Aborted error, can be ignored
+          return;
+        }
+        setError({
+          code: errorCode,
+          description: errorDescription,
+        });
+      }
+    );
+
     webview.addEventListener('crashed', () => {
       // eslint-disable-next-line no-console
       console.error('Web view crashed');
@@ -301,6 +322,17 @@ const Device = ({ isPrimary, device }: Props) => {
             <Spinner spinnerHeight={30} />
           </div>
         ) : null}
+        {error != null ? (
+          <div
+            className="absolute top-0 left-0 flex h-full w-full items-center justify-center bg-slate-600 bg-opacity-95"
+            style={{ height: scaledHeight, width: scaledWidth }}
+          >
+            <div className="text-center text-sm text-white">
+              <div className="text-base font-bold">ERROR: {error.code}</div>
+              <div className="text-sm">{error.description}</div>
+            </div>
+          </div>
+        ) : null}
       </div>
     </div>
   );

desktop-app-rewrite/src/renderer/components/ToolBar/ColorSchemeToggle/index.tsx

@@ -0,0 +1,38 @@
+import { Icon } from '@iconify/react';
+import {
+  SetNativeThemeArgs,
+  SetNativeThemeResult,
+} from 'main/native-functions';
+import { useState } from 'react';
+import Button from 'renderer/components/Button';
+
+const ColorSchemeToggle = () => {
+  const [isDarkColorScheme, setIsDarkColorScheme] = useState<boolean>(false);
+
+  return (
+    <Button
+      onClick={() => {
+        window.electron.ipcRenderer.invoke<
+          SetNativeThemeArgs,
+          SetNativeThemeResult
+        >('set-native-theme', {
+          theme: isDarkColorScheme ? 'light' : 'dark',
+        });
+        setIsDarkColorScheme(!isDarkColorScheme);
+      }}
+      subtle
+      title="Device theme color toggle"
+    >
+      <span className="relative">
+        <Icon icon="iconoir:empty-page" />
+        <Icon
+          icon={isDarkColorScheme ? 'carbon:moon' : 'carbon:sun'}
+          className="absolute inset-0 m-auto"
+          fontSize={10}
+        />
+      </span>
+    </Button>
+  );
+};
+
+export default ColorSchemeToggle;

desktop-app-rewrite/src/renderer/components/ToolBar/Menu/Flyout/AllowInSecureSSL/index.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import Toggle from 'renderer/components/Toggle';
+
+const AllowInSecureSSL = () => {
+  const [allowed, setAllowed] = useState<boolean>(
+    window.electron.store.get('userPreferences.allowInsecureSSLConnections')
+  );
+
+  return (
+    <div className="flex flex-row items-center justify-start px-4">
+      <span className="w-1/2">Allow Insecure SSL</span>
+      <div className="flex items-center gap-2 border-l px-4 dark:border-slate-400">
+        <Toggle
+          isOn={allowed}
+          onChange={(value) => {
+            setAllowed(value.target.checked);
+            window.electron.store.set(
+              'userPreferences.allowInsecureSSLConnections',
+              value.target.checked
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AllowInSecureSSL;

desktop-app-rewrite/src/renderer/components/ToolBar/Menu/Flyout/Devtools/index.tsx

@@ -4,7 +4,7 @@ import {
   selectDockPosition,
   setDockPosition,
 } from 'renderer/store/features/devtools';
-import Toggle from './Toggle';
+import Toggle from 'renderer/components/Toggle';
 
 const Devtools = () => {
   const dockPosition = useSelector(selectDockPosition);

desktop-app-rewrite/src/renderer/components/ToolBar/Menu/Flyout/index.tsx

@@ -7,6 +7,7 @@ import { APP_VIEWS, setAppView } from 'renderer/store/features/ui';
 import Devtools from './Devtools';
 import UITheme from './UITheme';
 import Zoom from './Zoom';
+import AllowInSecureSSL from './AllowInSecureSSL';
 
 interface Props {
   onClose: () => void;
@@ -30,8 +31,9 @@ const MenuFlyout = ({ onClose }: Props) => {
       ref={ref}
     >
       <Zoom />
-      <Devtools />
       <UITheme />
+      <Devtools />
+      <AllowInSecureSSL />
       <Button
         onClick={() => {
           dispatch(setAppView(APP_VIEWS.DEVICE_MANAGER));

desktop-app-rewrite/src/renderer/components/ToolBar/Menu/index.tsx

@@ -7,7 +7,10 @@ const Menu = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   return (
     <div className="relative flex items-center">
-      <Button onClick={() => setIsOpen(!isOpen)} isActive={isOpen}>
+      <Button
+        onClick={() => (!isOpen ? setIsOpen(true) : null)}
+        isActive={isOpen}
+      >
         <Icon icon="carbon:overflow-menu-vertical" />
       </Button>
       {isOpen ? <MenuFlyout onClose={() => setIsOpen(false)} /> : null}

desktop-app-rewrite/src/renderer/components/ToolBar/index.tsx

@@ -10,6 +10,7 @@ import NavigationControls from './NavigationControls';
 import Menu from './Menu';
 import Button from '../Button';
 import AddressBar from './AddressBar';
+import ColorSchemeToggle from './ColorSchemeToggle';
 
 const ToolBar = () => {
   const rotateDevice = useSelector(selectRotate);
@@ -23,6 +24,7 @@ const ToolBar = () => {
       <Button
         onClick={() => dispatch(setRotate(!rotateDevice))}
         isActive={rotateDevice}
+        title="Rotate Devices"
       >
         <Icon
           icon={
@@ -35,9 +37,11 @@ const ToolBar = () => {
       <Button
         onClick={() => dispatch(setIsInspecting(!isInspecting))}
         isActive={isInspecting}
+        title="Inspect Elements"
       >
         <Icon icon="lucide:inspect" />
       </Button>
+      <ColorSchemeToggle />
       <Menu />
     </div>
   );

desktop-app-rewrite/src/store/index.ts

@@ -35,6 +35,15 @@ const schema = {
     },
     default: {},
   },
+  userPreferences: {
+    type: 'object',
+    properties: {
+      allowInsecureSSLConnections: {
+        type: 'boolean',
+        default: false,
+      },
+    },
+  },
 };
 
 const store = new Store({ schema, watch: true });