Edge to edge 3

app/build.gradle.kts

@@ -48,7 +48,7 @@ android {
     defaultConfig {
         applicationId = "app.grapheneos.pdfviewer"
         minSdk = 26
-        targetSdk = 35
+        targetSdk = 36
         versionCode = 32
         versionName = versionCode.toString()
     }
@@ -98,19 +98,27 @@ fun getCommand(command: String, winExt: String = "cmd"): String {
     return if (Os.isFamily(Os.FAMILY_WINDOWS)) "$command.$winExt" else command
 }
 
+val npmSetupOutputs = rootProject.file("node_modules")
 val npmSetup = tasks.register("npmSetup", Exec::class) {
     workingDir = rootDir
+    inputs.files(rootProject.files("package.json", "package-lock.json"))
+        .withPathSensitivity(PathSensitivity.RELATIVE)
+    outputs.dirs(npmSetupOutputs)
     commandLine(getCommand("npm"), "ci", "--ignore-scripts")
 }
 
+val processStaticOutputs = rootProject.files("app/src/main/assets/viewer", "app/src/debug/assets/viewer")
 val processStatic = tasks.register("processStatic", Exec::class) {
     workingDir = rootDir
     dependsOn(npmSetup)
+    inputs.files(npmSetupOutputs, rootProject.files("process_static.js", "eslint.config.js", "viewer"))
+        .withPathSensitivity(PathSensitivity.RELATIVE)
+    outputs.dirs(processStaticOutputs)
     commandLine(getCommand("node", "exe"), "process_static.js")
 }
 
 val cleanStatic = tasks.register("cleanStatic", Delete::class) {
-    delete("src/main/assets/viewer", "src/debug/assets/viewer")
+    delete(npmSetupOutputs, processStaticOutputs)
 }
 
 tasks.preBuild {

app/src/main/java/app/grapheneos/pdfviewer/PdfViewer.java

@@ -29,7 +29,10 @@
 import androidx.activity.result.contract.ActivityResultContracts;
 import androidx.annotation.NonNull;
 import androidx.appcompat.app.AppCompatActivity;
+import androidx.core.graphics.Insets;
+import androidx.core.view.ViewCompat;
 import androidx.core.view.WindowCompat;
+import androidx.core.view.WindowInsetsCompat;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentTransaction;
 import androidx.lifecycle.ViewModelProvider;
@@ -38,6 +41,8 @@
 
 import com.google.android.material.snackbar.Snackbar;
 
+import org.json.JSONObject;
+
 import java.io.FileNotFoundException;
 import java.io.IOException;
 import java.io.InputStream;
@@ -265,6 +270,23 @@ public void onLoaded() {
         public String getPassword() {
             return mEncryptedDocumentPassword != null ? mEncryptedDocumentPassword : "";
         }
+
+        @JavascriptInterface
+        public String getInsets() {
+            WindowInsetsCompat wic = ViewCompat.getRootWindowInsets(binding.getRoot());
+            int types = WindowInsetsCompat.Type.statusBars()
+                    | WindowInsetsCompat.Type.navigationBars()
+                    | WindowInsetsCompat.Type.displayCutout();
+            Insets insets = (wic != null) ? wic.getInsetsIgnoringVisibility(types) : Insets.NONE;
+
+            HashMap<String, Integer> insetMap = new HashMap<>(4);
+            insetMap.put("top", insets.top + binding.toolbar.getHeight());
+            insetMap.put("right", insets.right);
+            insetMap.put("bottom", insets.bottom);
+            insetMap.put("left", insets.left);
+
+            return new JSONObject(insetMap).toString();
+        }
     }
 
     private void showWebViewCrashed() {
@@ -279,11 +301,19 @@ private void showWebViewCrashed() {
     @SuppressLint({"SetJavaScriptEnabled"})
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
-        WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
+        WindowCompat.enableEdgeToEdge(getWindow());
 
         binding = PdfviewerBinding.inflate(getLayoutInflater());
         setContentView(binding.getRoot());
         setSupportActionBar(binding.toolbar);
+
+        ViewCompat.setOnApplyWindowInsetsListener(binding.getRoot(), (v, insets) -> {
+            if (mUri != null) {
+                binding.webview.evaluateJavascript("updateInsets()", null);
+            }
+            return insets;
+        });
+
         viewModel = new ViewModelProvider(this, ViewModelProvider.AndroidViewModelFactory.getInstance(getApplication())).get(PdfViewModel.class);
 
         viewModel.getOutline().observe(this, requested -> {

app/src/main/res/layout/pdfviewer.xml

@@ -4,6 +4,11 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
+    <WebView
+        android:id="@+id/webview"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+
     <com.google.android.material.appbar.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -18,12 +23,6 @@
 
     </com.google.android.material.appbar.AppBarLayout>
 
-    <WebView
-        android:id="@+id/webview"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
-
     <ScrollView
         android:id="@+id/webview_alert_layout"
         android:layout_width="match_parent"

viewer/css/pdf_viewer.css

@@ -1,53 +1,65 @@
 html,
 body {
+    width: 100%;
     height: 100%;
 }
 
-body,
-canvas {
-    padding: 0;
-    margin: 0;
-}
-
 body {
+    margin: 0;
+    padding: 0;
     background-color: #c0c0c0;
 }
 
 #container {
     --scale-factor: 1;
+
+    --inset-top: 0;
+    --inset-right: 0;
+    --inset-bottom: 0;
+    --inset-left: 0;
+
+    --padding: 8px;
+
+    position: fixed;
+    overflow: auto;
+    inset: 0;
+    padding-top: calc(var(--padding) + var(--inset-top));
+    padding-right: calc(var(--padding) + var(--inset-right));
+    padding-bottom: calc(var(--padding) + var(--inset-bottom));
+    padding-left: calc(var(--padding) + var(--inset-left));
+}
+
+#container .page {
     --user-unit: 1;
     --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
     --scale-round-x: 1px;
     --scale-round-y: 1px;
 
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-}
+    --page-width: 0;
+    --page-height: 0;
 
-#container canvas,
-#container .textLayer {
-    /* overlay child elements on top of each other */
-    grid-row-start: 1;
-    grid-column-start: 1;
+    position: relative;
+    width: round(down, var(--total-scale-factor) * var(--page-width), var(--scale-round-x));
+    height: round(down, var(--total-scale-factor) * var(--page-height), var(--scale-round-y));
+    margin: 0 auto;
 }
 
-canvas {
-    display: inline-block;
-    position: relative;
+.page canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
 }
 
 [data-main-rotation="90"] {
-    transform: rotate(90deg);
+    transform: rotate(90deg) translateY(-100%);
 }
 
 [data-main-rotation="180"] {
-    transform: rotate(180deg);
+    transform: rotate(180deg) translate(-100%, -100%);
 }
 
 [data-main-rotation="270"] {
-    transform: rotate(270deg);
+    transform: rotate(270deg) translateX(-100%);
 }
 
 .hiddenCanvasElement {

viewer/css/text_layer.css

@@ -3,13 +3,15 @@
 }
 
 .textLayer {
-    text-align: initial;
     position: absolute;
+    text-align: initial;
+    inset: 0;
     overflow: clip;
     opacity: 1;
     line-height: 1;
     text-size-adjust: none;
     forced-color-adjust: none;
+    transform-origin: 0 0;
     caret-color: CanvasText;
     z-index: 0;
 }

viewer/index.html

@@ -8,8 +8,10 @@
     </head>
     <body>
         <div id="container">
-            <canvas id="content"></canvas>
-            <div id="text" class="textLayer"></div>
+            <div id="single-page-view" class="page">
+                <canvas id="content"></canvas>
+                <div id="text" class="textLayer"></div>
+            </div>
         </div>
     </body>
 </html>