use release version of pdf.js #116

liudongmiao · 2024-09-18T08:31:16Z

As discussing in #114, there are several options to include pdf.js.
In #114, we choose compile from pdf.js's source code.

However, we don't need to.

This PR simplify the processes, just download and unzip, the inject intellij-pdf-viewer's js and css, make it much easy.

liudongmiao · 2024-09-18T08:31:49Z

plugin/src/main/kotlin/com/firsttimeinforever/intellij/pdf/viewer/jcef/PdfStaticServer.kt

@@ -112,11 +112,11 @@ internal class PdfStaticServer : HttpRequestHandler() {
  fun getPreviewUrl(file: VirtualFile, withReloadSalt: Boolean = false): String {
    val salt = if (withReloadSalt) Random.nextInt() else 0
    vfsMap[file.url] = file
-    val url = parseEncodedPath("$serverUrl/index.html")
+    val url = parseEncodedPath("$serverUrl/web/viewer.html")


entry point of mozilla's pdf.js

liudongmiao · 2024-09-18T08:32:36Z

plugin/src/main/kotlin/com/firsttimeinforever/intellij/pdf/viewer/jcef/PdfStaticServer.kt

    val server = BuiltInServerManager.getInstance()
    return server.addAuthToken(url)
      // `file` would be read via `urlDecoder.path()`, which calls `decodeComponent`
-      .addParameters(mapOf("__reloadSalt" to "$salt", "file" to URLUtil.encodeURIComponent("get-file/${file.url}")))
+      .addParameters(mapOf("__reloadSalt" to "$salt", "file" to "/$uuid/get-file/${URLUtil.encodeURIComponent(file.url)}"))


as we use web/viewer.html, so change the file to absolute path.

liudongmiao · 2024-09-18T08:33:17Z

web-view/bootstrap/build.gradle.kts

+  doLast {
+    val viewerHtml = layout.buildDirectory.get().asFile.resolve("web/viewer.html")
+    val modifiedContent = viewerHtml.readText()
+      .replace("(<link rel=\"stylesheet\" href=\"viewer.css\">)".toRegex(), "$1<link rel=\"stylesheet\" href=\"../fixes.css\">")


This is the magic 1, add our css after original viewer.css

liudongmiao · 2024-09-18T08:33:29Z

web-view/bootstrap/build.gradle.kts

+    val viewerHtml = layout.buildDirectory.get().asFile.resolve("web/viewer.html")
+    val modifiedContent = viewerHtml.readText()
+      .replace("(<link rel=\"stylesheet\" href=\"viewer.css\">)".toRegex(), "$1<link rel=\"stylesheet\" href=\"../fixes.css\">")
+      .replace("(<script src=\"viewer.m?js\"[^<>]*></script>)".toRegex(), "$1<script src=\"../viewer.js\"></script>")


This is the magic 2, add our js after original viewer.js

liudongmiao · 2024-09-18T08:34:00Z

...c/jsMain/kotlin/com/firsttimeinforever/intellij/pdf/viewer/application/ApplicationFactory.kt

+
+@ExperimentalSerializationApi
+fun main() {
+  ApplicationFactory.init()


point to inject our javascript.

1. navigateTo is removed since v2.9.359 ref: mozilla/pdf.js@92ec10b 2. the type of `dest` in outline is `{string | Array<any> | null}` we use `JsonElement` to indicate

liudongmiao · 2024-09-18T14:00:22Z

This version won't use pdf_viewer.css, it may break theme values.
However, there are viewerCssTheme and pageColorsBackground, pageColorsForeground.
pageColorsXXX is available since pdf.js v2.14+, in commit mozilla/pdf.js@c8afd6c

liudongmiao · 2024-09-18T15:33:41Z

...kotlin/com/firsttimeinforever/intellij/pdf/viewer/application/pdfjs/types/InternalOutline.kt


 @Serializable
 data class InternalOutline(
-  val dest: String,
+  val dest: JsonElement,


the dest in outline is {string | Array | null}

PHPirates

Great! This solution is a lot cleaner. I'll create a release with this included.

PHPirates

This version won't use pdf_viewer.css, it may break theme values. However, there are viewerCssTheme and pageColorsBackground, pageColorsForeground. pageColorsXXX is available since pdf.js v2.14+, in commit mozilla/pdf.js@c8afd6c

Wait, as you say, something is not working with the theme. The background color of the sidebar is not correct anymore:
before:

now:

liudongmiao · 2024-09-19T22:01:36Z

@PHPirates it's nothing with pdf_viewer.css. However, it's other css changes in pdf viewer.

intellij-pdf-viewer/web-view/viewer/src/jsMain/kotlin/com/firsttimeinforever/intellij/pdf/viewer/application/pdfjs/ThemeUtils.kt

Lines 44 to 50 in fa79e56

    
           val pageViewerRule = pdfViewerCss?.cssRules?.asList()?.filterIsInstance<CSSStyleRule>() 
        
             ?.find { it.selectorText == ".pdfViewer .page" } 
        
           pageViewerRule?.style?.removeProperty("-o-border-image") 
        
           pageViewerRule?.style?.removeProperty("border-image") 
        
           val thumbnailRule = viewerCss.cssRules.asList().filterIsInstance<CSSStyleRule>().find { it.selectorText == ".thumbnailImage" } 
        
           thumbnailRule?.style?.removeProperty("box-shadow")

There is no border-image in .pdfViewer .page since v3.3.122 , see mozilla/pdf.js@685b586

There is no box-shadow in .thumbnailImage since v3.6.172, see mozilla/pdf.js@1b6a83d

I'll use the this new way with the old pdf.js, may be a downgrade until we solve the css.

liudongmiao · 2024-09-19T22:48:04Z

I don't see much difference. However, there is scrollbar in new version.

up: pdfjs-dist, with pdf.js 4.6
below: market version

pdf.js sidebar triangles switched to svg since 2.6.347 in commit mozilla/pdf.js@c0b671d However, previous viewer.css use a png, so it need fix Now, we use pdf.js version, which use svg already

liudongmiao · 2024-09-20T04:19:52Z

@PHPirates I have added severa commits, please help to review.

And, I cannot reproduct your sidebar's screenshot.

And, for the sidebar on macos, now, it shows always. However, I think it's acceptable, and Markdown plugin show the scrollbar always too. And, the scrollbar looks like the same as markdown plugin now.

liudongmiao · 2024-09-21T02:03:23Z

Wait, as you say, something is not working with the theme. The background color of the sidebar is not correct anymore:

@PHPirates Just found the differences. In pdf.js v2.7 and v0.16.1, the background color of sidebar is rgba(0, 0, 0, 0.1)

intellij-pdf-viewer/web-view/bootstrap/src/viewer.css

Lines 258 to 266 in 75b76e6

    
           #sidebarContent { 
        
               top: 32px; 
        
               bottom: 0; 
        
               overflow: auto; 
        
               -webkit-overflow-scrolling: touch; 
        
               position: absolute; 
        
               width: 100%; 
        
               background-color: rgba(0, 0, 0, 0.1); 
        
           }

https://github.com/mozilla/pdf.js/blob/v2.7.350/web/viewer.css#L258-L266
However, upstream change the background-color in mozilla/pdf.js@685b586
then remove the background-color (then inherit background color from body) in mozilla/pdf.js@8ab5476
both is in pdf.js v3.3.122

However, intellij-pdf-viewer want to change sidebar background color to the same as body background color.

intellij-pdf-viewer/web-view/viewer/src/jsMain/kotlin/com/firsttimeinforever/intellij/pdf/viewer/application/pdfjs/ThemeUtils.kt

Lines 17 to 18 in fa79e56

    
           setProperty(Internals.StyleVariables.bodyBackgroundColor, viewTheme.background) 
        
           setProperty(Internals.StyleVariables.sidebarBackgroundColor, viewTheme.background)

However, I don't know why your screenshot don't update the background. Please use DevTools to find it.
You can change the registry ide.browser.jcef.contextMenu.devTools.enabled to true, then open devtools.
ref: https://plugins.jetbrains.com/docs/intellij/jcef.html#debugging

PHPirates · 2024-09-21T08:34:50Z

Thanks for the explanation! Sorry must have been something wrong on my side, after a gradle clean everything works as expected. Also changing the background color in the PDF Viewer settings work fine (foreground --main-color doesn't look like it changes anything, but that was already in 0.16.1 so is not caused by the pdf.js update).

The scrollbar looks good to me, much better than it was!

upstream change the background-color of narrow sidebar to --sidebar-narrow-bg-color in commit mozilla/pdf.js@7c52c01 since v2.8.335

There is no `border-image` in `.pdfViewer .page` since v3.3.122, see mozilla/pdf.js@685b586 There is no `box-shadow` in `.thumbnailImage` since v3.6.172, see mozilla/pdf.js@1b6a83d #116 (comment)

liudongmiao · 2024-09-23T10:54:41Z

@PHPirates I self-review again, and it could be merged into master now.

For the events in

062acd1#diff-85699ae3492958e0a83d3d768422d1124006a9213eaa31c775de20f22a4755a5L223-L243

it's introduced in a2d6bdd, the commit message is to add mouse shortcuts for zoom in/out, however, it's core function was removed as in another commit ad34116

PHPirates · 2024-09-23T11:28:44Z

Great, thanks for checking!

pdfjs-dist releases

a78a9dc

liudongmiao commented Sep 18, 2024

View reviewed changes

liudongmiao added 2 commits September 18, 2024 19:50

fix assets directory

7fdc13f

support array<any> dest in outline, and don't use removed navigateTo

32fc416

1. navigateTo is removed since v2.9.359 ref: mozilla/pdf.js@92ec10b 2. the type of `dest` in outline is `{string | Array<any> | null}` we use `JsonElement` to indicate

liudongmiao added 2 commits September 18, 2024 22:27

prefer dynamic over Any in kotlin js

2648eac

remove unused *.pdf and js map and tmpdir

1d780cd

liudongmiao commented Sep 18, 2024

View reviewed changes

show error log if there is no pdf.js viewer

3217094

PHPirates approved these changes Sep 19, 2024

View reviewed changes

PHPirates reviewed Sep 19, 2024

View reviewed changes

fallback to main css if there is no pdf_viewer.css

2f0a615

liudongmiao added 3 commits September 20, 2024 10:22

fix tree item selected color

16accdd

remove sidebar-triangles.css

6cc6356

pdf.js sidebar triangles switched to svg since 2.6.347 in commit mozilla/pdf.js@c0b671d However, previous viewer.css use a png, so it need fix Now, we use pdf.js version, which use svg already

optimize scrollbars look and feel like ide

add1f7c

liudongmiao added 2 commits September 20, 2024 13:30

Merge branch 'FirstTimeInForever:master' into pdfjs-dist

d7b9566

avoid part download

c31f8da

liudongmiao added 2 commits September 23, 2024 15:09

fix background color for narrow sidebar

3602bb5

upstream change the background-color of narrow sidebar to --sidebar-narrow-bg-color in commit mozilla/pdf.js@7c52c01 since v2.8.335

remove unused border shadow

d3aa676

There is no `border-image` in `.pdfViewer .page` since v3.3.122, see mozilla/pdf.js@685b586 There is no `box-shadow` in `.thumbnailImage` since v3.6.172, see mozilla/pdf.js@1b6a83d #116 (comment)

PHPirates merged commit 7d25164 into FirstTimeInForever:master Sep 23, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

use release version of pdf.js #116

use release version of pdf.js #116

liudongmiao commented Sep 18, 2024

liudongmiao Sep 18, 2024

liudongmiao Sep 18, 2024

liudongmiao Sep 18, 2024

liudongmiao Sep 18, 2024

liudongmiao Sep 18, 2024

liudongmiao commented Sep 18, 2024

liudongmiao Sep 18, 2024

PHPirates left a comment

PHPirates left a comment

liudongmiao commented Sep 19, 2024

liudongmiao commented Sep 19, 2024

liudongmiao commented Sep 20, 2024

liudongmiao commented Sep 21, 2024

PHPirates commented Sep 21, 2024

liudongmiao commented Sep 23, 2024

PHPirates commented Sep 23, 2024

use release version of pdf.js #116

use release version of pdf.js #116

Conversation

liudongmiao commented Sep 18, 2024

liudongmiao Sep 18, 2024

Choose a reason for hiding this comment

liudongmiao Sep 18, 2024

Choose a reason for hiding this comment

liudongmiao Sep 18, 2024

Choose a reason for hiding this comment

liudongmiao Sep 18, 2024

Choose a reason for hiding this comment

liudongmiao Sep 18, 2024

Choose a reason for hiding this comment

liudongmiao commented Sep 18, 2024

liudongmiao Sep 18, 2024

Choose a reason for hiding this comment

PHPirates left a comment

Choose a reason for hiding this comment

PHPirates left a comment

Choose a reason for hiding this comment

liudongmiao commented Sep 19, 2024

liudongmiao commented Sep 19, 2024

liudongmiao commented Sep 20, 2024

liudongmiao commented Sep 21, 2024

PHPirates commented Sep 21, 2024

liudongmiao commented Sep 23, 2024

PHPirates commented Sep 23, 2024