Browser Edition

.log.convention.ignore

@@ -0,0 +1,31 @@
+.git
+.vscode/
+.tx
+.github/
+_locales/
+_locales/**
+bin/
+images/
+docs/
+static/help/
+static/fonts/
+test/
+.DS_Store
+.*ignore
+*.md
+*.xdc
+*.png
+*.json
+*.xml
+*.html
+*.yaml
+
+packages/target-electron/tests/
+packages/target-electron/static/
+packages/target-electron/build/
+
+packages/target-browser/static/
+
+packages/frontend/static/
+packages/frontend/themes/
+packages/frontend/scss/

.prettierignore

@@ -4,4 +4,6 @@ node_modules
 
 packages/target-electron/bundle_out
 packages/target-electron/tests/compiled
-packages/shared/ts-compiled-for-tests
+packages/shared/ts-compiled-for-tests
+
+packages/target-browser/dist

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 - Experimental Telegram-style Esc to cancel reply (quote) #4153
 - new ViewProfile context menu for blocking/unblocking contact and checking encryption #4043
+- added experimental browser version for developers (`packages/target-browser`)
 
 ### Changed
 - Update electron from `30.3.1` to `32.1.0` #4138
@@ -53,6 +54,7 @@
 - cancel old message highlight animations when a new message is highlighted #4203
 - fix: packaging: include architecture in filename for all appimages #4202
 - fix: make open external link scheme case insensive #4201
+- target-electron: make sure log of stdio server is also logged to file
 
 <a id="1_46_8"></a>
 

_locales/_untranslated_en.json

@@ -74,5 +74,8 @@
   },
   "join_group": {
     "message": "Join Group"
+  },
+  "explain_desktop_browser_disabled_tray_pref": {
+    "message": "Tray icon does exist in the web version, install the full version from https://get.delta.chat"
   }
 }

bin/log-conventions.js

@@ -18,68 +18,67 @@ ${lines}
 
 Consider using our logger (log.debug) or add this line ${green(
       '/* ignore-console-log */'
-    )} above to add an exception
+    )} above to add an exception (or add your file to '.log.convention.ignore')
 ${blue('------------------------------------------------')}`
   )
 }
 
-import { walk as _walk } from 'walk'
-import { readFile } from 'fs'
-import { join } from 'path'
-const walker = _walk('./src')
+import { readFile } from 'fs/promises'
+import walk from 'ignore-walk'
+import { basename, relative } from 'path'
+//@ts-ignore
+const files = await walk({
+  ignoreFiles: ['.log.convention.ignore', '.gitignore'],
+})
 let found = 0
 
-walker.on('file', function(root, fileStats, next) {
-  if (!fileStats.name.includes('.js')) next()
-  const filename = join(root, fileStats.name)
-  readFile(filename, 'utf-8', function(err, data) {
-    if (err) throw err
-    const lines = data.split('\n')
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i]
-      const previousLine = i === 0 ? '' : lines[i - 1]
+for (const file of files) {
+  if (!file.endsWith('.ts')) {
+    continue
+  }
 
-      const lineContainsConsoleLog =
-        line.indexOf('console.') !== -1 &&
-        /console.(debug|log|info|error)\(/.test(line) === true
+  //@ts-ignore
+  const data = await readFile(file, 'utf-8')
 
-      if (!lineContainsConsoleLog) continue
+  const lines = data.split('\n')
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const previousLine = i === 0 ? '' : lines[i - 1]
 
-      const ignoreConsoleLog =
-        previousLine.includes('/* ignore-console-log */') ||
-        /^\s*\/\//.test(line)
+    const lineContainsConsoleLog =
+      line.indexOf('console.') !== -1 &&
+      /console.(debug|log|info|error)\(/.test(line) === true
 
-      if (ignoreConsoleLog) continue
+    if (!lineContainsConsoleLog) continue
 
-      formattedOutput(
-        `${filename}:${i + 1}`,
-        lines
-          .slice(i - 1, i + 2)
-          .join('\n')
-          .replace(line, string =>
-            string.replace(
-              /^([^]*)(console.(?:debug|log|info|error))([^]*)$/,
-              (_s, s1, s2, s3) => `${cyan(s1)}${red(s2)}${cyan(s3)}`
-            )
-          )
-      )
-      found++
-    }
-    next()
-  })
-})
+    const ignoreConsoleLog =
+      previousLine.includes('/* ignore-console-log */') || /^\s*\/\//.test(line)
 
-walker.on('errors', function(root, nodeStatsArray, next) {
-  next()
-})
+    if (ignoreConsoleLog) continue
 
-walker.on('end', function() {
-  console.log(
-    `found ${[
-      found > 0 ? bgRed(found.toString()) : bgGreen(found.toString()),
-    ]} misplaced console.log statements ( ${grey(
-      '// comment'
-    )} lines were ignored)`
-  )
-  process.exit(found > 0 ? 1 : 0)
-})
+    const filename = relative(process.cwd(), file)
+
+    formattedOutput(
+      `${filename}:${i + 1}`,
+      lines
+        .slice(i - 1, i + 2)
+        .join('\n')
+        .replace(line, string =>
+          string.replace(
+            /^([^]*)(console.(?:debug|log|info|error))([^]*)$/,
+            (_s, s1, s2, s3) => `${cyan(s1)}${red(s2)}${cyan(s3)}`
+          )
+        )
+    )
+    found++
+  }
+}
+
+console.log(
+  `found ${[
+    found > 0 ? bgRed(found.toString()) : bgGreen(found.toString()),
+  ]} misplaced console.log statements ( ${grey(
+    '// comment'
+  )} lines were ignored)`
+)
+process.exit(found > 0 ? 1 : 0)

package.json

@@ -27,7 +27,6 @@
     "test-and-check": "pnpm test && pnpm check",
     "reset:node_modules": "rm -rf node_modules && rm -rf packages/*/node_modules || true && pnpm i"
   },
-  "dependencies": {},
   "engineStrict": true,
   "engines": {
     "node": "^20",
@@ -48,17 +47,18 @@
     }
   },
   "devDependencies": {
-    "yaml": "^2.4.5",
+    "@types/ignore-walk": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "chokidar": "^3.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
+    "ignore-walk": "^7.0.0",
     "prettier": "3.1.0",
-    "walk": "^2.3.15",
-    "xml-js": "^1.6.11",
     "typescript": "catalog:",
-    "chokidar": "^3.6.0"
+    "xml-js": "^1.6.11",
+    "yaml": "^2.4.5"
   }
 }

packages/frontend/scss/_global.scss

@@ -90,6 +90,11 @@ button:focus:not(:focus-visible) {
   outline: none;
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbarThumb) transparent;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 0;

packages/frontend/scss/chat/_chat-list.scss

@@ -12,6 +12,9 @@
   // So that `.floating-action-button` is positioned relative to `.chat-list`.
   position: relative;
 
+  // don't show extra scrollbar in browser edition
+  overflow: hidden;
+
   .search-result-divider {
     line-height: 43px;
     height: 40px;

packages/frontend/scss/message/_message-list.scss

@@ -86,11 +86,12 @@
     bottom: 0;
     // There is also `will-change: scroll-position` dynamically set on this
     // element.
-    overflow: scroll;
+    overflow-y: scroll;
     max-height: 100%;
     width: 100%;
     padding: 0 0.5em;
 
+    scrollbar-color: var(--scrollbarThumb) transparent;
     &::-webkit-scrollbar-track {
       background: transparent;
     }

packages/frontend/src/components/AccountListSidebar/AccountItem.tsx

@@ -7,6 +7,7 @@ import {
   onDCEvent,
   EffectfulBackendActions,
 } from '../../backend-com'
+import { runtime } from '@deltachat-desktop/runtime-interface'
 import { avatarInitial } from '../Avatar'
 import { getLogger } from '../../../../shared/logger'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
@@ -204,7 +205,7 @@ export default function AccountItem({
           {account.profileImage ? (
             <img
               className={styles.content}
-              src={'file://' + account.profileImage}
+              src={runtime.transformBlobURL(account.profileImage)}
             />
           ) : (
             <div

packages/frontend/src/components/AccountListSidebar/styles.module.scss

@@ -57,8 +57,8 @@
     flex-grow: 1;
     overflow-y: scroll;
     padding-top: 2px;
-    scrollbar-width: 0;
 
+    scrollbar-width: none;
     &::-webkit-scrollbar {
       width: 0;
     }

packages/frontend/src/components/Avatar/index.tsx

@@ -7,6 +7,7 @@ import FullscreenAvatar from '../dialogs/FullscreenAvatar'
 import type { Type } from '../../backend-com'
 import type { PropsWithChildren } from 'react'
 import { get_first_emoji } from '@deltachat/message_parser_wasm'
+import { runtime } from '@deltachat-desktop/runtime-interface'
 
 import styles from './styles.module.scss'
 
@@ -58,7 +59,7 @@ export function Avatar(props: {
   } = props
 
   const content = avatarPath ? (
-    <img className='content' src={'file://' + avatarPath} />
+    <img className='content' src={runtime.transformBlobURL(avatarPath)} />
   ) : (
     <div className='content' style={{ backgroundColor: color }}>
       {avatarInitial(displayName, addr)}

packages/frontend/src/components/Settings/Appearance.tsx

@@ -329,17 +329,23 @@ function SettingsTrayIcon({
 }) {
   const tx = useTranslationFunction()
 
+  const isBrowser = runtime.getRuntimeInfo().target === 'browser'
+  const disabled = settingsStore.rc.minimized || isBrowser
+
   return (
     <>
       <DesktopSettingsSwitch
         settingsKey='minimizeToTray'
         label={tx('pref_show_tray_icon')}
-        disabled={settingsStore.rc.minimized}
-        disabledValue={settingsStore.rc.minimized}
+        disabled={disabled}
+        disabledValue={settingsStore.rc.minimized && !isBrowser}
       />
       {settingsStore.rc.minimized && (
         <Callout>{tx('explain_desktop_minimized_disabled_tray_pref')}</Callout>
       )}
+      {isBrowser && (
+        <Callout>{tx('explain_desktop_browser_disabled_tray_pref')}</Callout>
+      )}
     </>
   )
 }

packages/frontend/src/components/chat/ChatListItem.tsx

@@ -108,7 +108,9 @@ const Message = React.memo<
           <div
             className='summary_thumbnail'
             style={{
-              backgroundImage: `url(${JSON.stringify(summaryPreviewImage)})`,
+              backgroundImage: `url("${JSON.stringify(
+                runtime.transformBlobURL(summaryPreviewImage)
+              )}")`,
             }}
           />
         )}

packages/frontend/src/components/composer/Composer.tsx

@@ -7,6 +7,7 @@ import React, {
   useCallback,
 } from 'react'
 import { C, T } from '@deltachat/jsonrpc-client'
+import { extension } from 'mime-types'
 
 import MenuAttachment from './menuAttachment'
 import ComposerMessageInput from './ComposerMessageInput'
@@ -247,7 +248,9 @@ const Composer = forwardRef<
 
     try {
       // Write clipboard to file then attach it to the draft
-      const path = await runtime.writeClipboardToTempFile()
+      const path = await runtime.writeClipboardToTempFile(
+        file.name || `file.${extension(file.type)}`
+      )
       await addFileToDraft(path, msgType)
       // delete file again after it was sucessfuly added
       await runtime.removeTempFile(path)

packages/frontend/src/components/dialogs/About.tsx

@@ -153,6 +153,12 @@ export default function About({ onClose }: DialogProps) {
                   <td style={{ userSelect: 'all' }}>{value}</td>
                 </tr>
               ))}
+              {runtime.getRuntimeInfo().target === 'browser' && (
+                <tr key={'browser-version'} style={{ color: 'grey' }}>
+                  <td>Browser UA</td>
+                  <td style={{ userSelect: 'all' }}>{navigator.userAgent}</td>
+                </tr>
+              )}
               {runtime.getRuntimeInfo().runningUnderARM64Translation && (
                 <tr>
                   <td>runningUnderARM64Translation</td>

packages/frontend/src/components/message/Message.tsx

@@ -795,7 +795,10 @@ export const Quote = ({
           </div>
         </div>
         {hasMessage && quote.image && (
-          <img className='quoted-image' src={quote.image} />
+          <img
+            className='quoted-image'
+            src={runtime.transformBlobURL(quote.image)}
+          />
         )}
         {hasMessage && quote.viewType == 'Webxdc' && (
           <img

packages/frontend/src/components/screens/AccountDeletionScreen/AccountDeletionScreen.tsx

@@ -18,6 +18,7 @@ import { Screens } from '../../../ScreenController'
 import { avatarInitial } from '../../Avatar'
 import { getLogger } from '../../../../../shared/logger'
 import ImageBackdrop from '../../ImageBackdrop'
+import { runtime } from '@deltachat-desktop/runtime-interface'
 
 const log = getLogger('AccountDeletionScreen')
 
@@ -69,7 +70,7 @@ export default function AccountDeletionScreen({
                     {accountInfo.profileImage ? (
                       <img
                         className={styles.content}
-                        src={'file://' + accountInfo.profileImage}
+                        src={runtime.transformBlobURL(accountInfo.profileImage)}
                       />
                     ) : (
                       <div