search

laurent22 / joplin

Joplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.
https://joplinapp.org
Other
45.4k stars 4.94k forks source link

Web clipper causes UI trouble in Joplin #4817

Open christianlupus opened 3 years ago

christianlupus commented 3 years ago

Environment

Joplin 1.7.11 (prod, linux) Sync-Version: 2 Profil-Version: 34 Revision: d6b77db (master) Platform: Linux OS specifics: Archlinux

Steps to reproduce

  1. Using Firefox, go to https://www.w3schools.com/python/python_dictionaries.asp
  2. Using webclipper use Clip simplified page
  3. Using webclipper use Clip complete page (HTML) in the same notebook as step 2
  4. Wait for it to finish
  5. Go to Joplin and open the simplified page
  6. Open the complete (HTML-based) page
  7. Go back to the simplified page

Describe what you expected to happen

The HTML-page should be clipped correctly. Currently it looks a bit out of the form. (Should I open another issue here? It is still beta...)

Anyway, switching between the notes should not derange the UI

Actual behavior

After step 5 the note is shown as expected: grafik

Switching to the complete HTML-based capture is a bit deranged. There are dependencies missing and the page is not full width (on the right side) when scrolling down grafik

Switching back to the simplified version, the narrower view is still active, the right part of the rendered view is completely empty: grafik

Logfile

Log file I hope this is what you need. It sort of is a bit messy what I can see. There seem to be a problem with some font/style files missing but no other errors that indicate a bigger problem. ``` www.google.com/images/logos/google_logo_41.png:1 GET file://www.google.com/images/logos/google_logo_41.png net::ERR_FAILED Image (async) ipc.setHtml @ index.html:212 (anonymous) @ index.html:101 (anonymous) @ lib.js:179 postMessage (async) send @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteTextViewer.js:118 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:512 commitHookEffectList @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:19986 commitPassiveHookEffects @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:20016 callCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:347 invokeGuardedCallbackDev @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:397 invokeGuardedCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:454 flushPassiveEffectsImpl @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:22868 unstable_runWithPriority @ /usr/share/joplin-desktop/resources/app.asar/node_modules/scheduler/cjs/scheduler.development.js:643 runWithPriority$2 @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11305 flushPassiveEffects @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:22841 renderRoot @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21801 runRootCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21554 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11353 unstable_runWithPriority @ /usr/share/joplin-desktop/resources/app.asar/node_modules/scheduler/cjs/scheduler.development.js:643 runWithPriority$2 @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11305 flushSyncCallbackQueueImpl @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11349 flushSyncCallbackQueue @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11338 scheduleUpdateOnFiber @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21431 dispatchAction @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:15816 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:498 fulfilled @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:5 Promise.then (async) step @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:7 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:8 __awaiter @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:4 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:482 listOnTimeout @ internal/timers.js:549 processTimers @ internal/timers.js:492 www.gstatic.com/images/branding/product/2x/translate_24dp.png:1 GET file://www.gstatic.com/images/branding/product/2x/translate_24dp.png net::ERR_FAILED /home/christian/.config/joplin-desktop/lib/fonts/fontawesome.woff?14663396:1 GET file:///home/christian/.config/joplin-desktop/lib/fonts/fontawesome.woff?14663396 net::ERR_FILE_NOT_FOUND /home/christian/.config/joplin-desktop/lib/fonts/fontawesome.ttf?14663396:1 GET file:///home/christian/.config/joplin-desktop/lib/fonts/fontawesome.ttf?14663396 net::ERR_FILE_NOT_FOUND www.google.com/images/logos/google_logo_41.png:1 GET file://www.google.com/images/logos/google_logo_41.png net::ERR_FAILED Image (async) ipc.setHtml @ index.html:212 (anonymous) @ index.html:101 (anonymous) @ lib.js:179 postMessage (async) send @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteTextViewer.js:118 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:512 commitHookEffectList @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:19986 commitPassiveHookEffects @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:20016 callCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:347 invokeGuardedCallbackDev @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:397 invokeGuardedCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:454 flushPassiveEffectsImpl @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:22868 unstable_runWithPriority @ /usr/share/joplin-desktop/resources/app.asar/node_modules/scheduler/cjs/scheduler.development.js:643 runWithPriority$2 @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11305 flushPassiveEffects @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:22841 renderRoot @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21801 runRootCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21554 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11353 unstable_runWithPriority @ /usr/share/joplin-desktop/resources/app.asar/node_modules/scheduler/cjs/scheduler.development.js:643 runWithPriority$2 @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11305 flushSyncCallbackQueueImpl @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11349 flushSyncCallbackQueue @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11338 scheduleUpdateOnFiber @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21431 dispatchAction @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:15816 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:498 fulfilled @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:5 Promise.then (async) step @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:7 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:8 __awaiter @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:4 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:482 listOnTimeout @ internal/timers.js:549 processTimers @ internal/timers.js:492 www.google.com/images/logos/google_logo_41.png:1 GET file://www.google.com/images/logos/google_logo_41.png net::ERR_FAILED Image (async) ipc.setHtml @ index.html:212 (anonymous) @ index.html:101 (anonymous) @ lib.js:179 postMessage (async) send @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteTextViewer.js:118 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:512 commitHookEffectList @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:19986 commitPassiveHookEffects @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:20016 callCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:347 invokeGuardedCallbackDev @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:397 invokeGuardedCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:454 flushPassiveEffectsImpl @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:22868 unstable_runWithPriority @ /usr/share/joplin-desktop/resources/app.asar/node_modules/scheduler/cjs/scheduler.development.js:643 runWithPriority$2 @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11305 flushPassiveEffects @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:22841 renderRoot @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21801 runRootCallback @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21554 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11353 unstable_runWithPriority @ /usr/share/joplin-desktop/resources/app.asar/node_modules/scheduler/cjs/scheduler.development.js:643 runWithPriority$2 @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11305 flushSyncCallbackQueueImpl @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11349 flushSyncCallbackQueue @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:11338 scheduleUpdateOnFiber @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:21431 dispatchAction @ /usr/share/joplin-desktop/resources/app.asar/node_modules/react-dom/cjs/react-dom.development.js:15816 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:498 fulfilled @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:5 Promise.then (async) step @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:7 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:8 __awaiter @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:4 (anonymous) @ /usr/share/joplin-desktop/resources/app.asar/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js:482 listOnTimeout @ internal/timers.js:549 processTimers @ internal/timers.js:492 index.html:1 sending message index.html:1 Got response in Markdown-it content script: Backlinks
No backlinks ```
jalajcodes commented 3 years ago

Looks like a padding-right style is getting applied upon switching to the HTML based page. Also, I can't reproduce this issue on other websites, it looks like it is specific to this website only. Can you reproduce it on other websites?

I'll look into it more in the morning.

christianlupus commented 3 years ago

I did not try the clipper much. Just a few (sandboxed) tries. So, I have no other site that causes the issue.

I am just surprised that with switching back to the non-HTML page the issue persists.