From 6d3b203dd8c0d18535b62eb65054342a5c9cd96c Mon Sep 17 00:00:00 2001
From: Stan Hu <stanhu@gmail.com>
Date: Sun, 28 Jul 2019 08:06:59 -0700
Subject: Fix pdf.js rendering pages in the wrong order

There was an implicit assumption that the pages returned from the
Promise of `pdf.getPage(num)` would return in order, but no such
guarantee exists. To handle this, we explicitly set which array index
based on the page number and then trigger a Vue update via `splice`.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/64467
---
 app/assets/javascripts/pdf/index.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'app/assets')

diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 6d39abd4a1f..a0142df0806 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -40,6 +40,8 @@ export default {
         .then(() => this.$emit('pdflabload'))
         .catch(error => this.$emit('pdflaberror', error))
         .then(() => {
+          // Trigger a Vue update: https://vuejs.org/v2/guide/list.html#Caveats
+          this.pages.splice(this.pages.length);
           this.loading = false;
         });
     },
@@ -47,7 +49,11 @@ export default {
       const pagePromises = [];
       this.loading = true;
       for (let num = 1; num <= pdf.numPages; num += 1) {
-        pagePromises.push(pdf.getPage(num).then(p => this.pages.push(p)));
+        pagePromises.push(
+          pdf.getPage(num).then(p => {
+            this.pages[p.pageIndex] = p;
+          }),
+        );
       }
       return Promise.all(pagePromises);
     },
-- 
cgit v1.2.1


From 5246626d2cf8bb23e4fb9a7172542573a6e17ba3 Mon Sep 17 00:00:00 2001
From: Lukas Eipert <leipert@gitlab.com>
Date: Mon, 29 Jul 2019 18:04:00 +0200
Subject: Simplify pdf.js logic

Instead of complicated splicing, we can simply return all pages.
Promise.all will take care of the correct ordering for us.
---
 app/assets/javascripts/pdf/index.vue      | 22 ++++++++--------------
 app/assets/javascripts/pdf/page/index.vue |  4 +++-
 2 files changed, 11 insertions(+), 15 deletions(-)

(limited to 'app/assets')

diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index a0142df0806..2b468aa5744 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -14,7 +14,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       pages: [],
     };
   },
@@ -37,23 +36,18 @@ export default {
       return pdfjsLib
         .getDocument(this.document)
         .then(this.renderPages)
-        .then(() => this.$emit('pdflabload'))
-        .catch(error => this.$emit('pdflaberror', error))
-        .then(() => {
-          // Trigger a Vue update: https://vuejs.org/v2/guide/list.html#Caveats
-          this.pages.splice(this.pages.length);
-          this.loading = false;
+        .then(pages => {
+          this.pages = pages;
+          this.$emit('pdflabload');
+        })
+        .catch(error => {
+          this.$emit('pdflaberror', error);
         });
     },
     renderPages(pdf) {
       const pagePromises = [];
-      this.loading = true;
       for (let num = 1; num <= pdf.numPages; num += 1) {
-        pagePromises.push(
-          pdf.getPage(num).then(p => {
-            this.pages[p.pageIndex] = p;
-          }),
-        );
+        pagePromises.push(pdf.getPage(num));
       }
       return Promise.all(pagePromises);
     },
@@ -65,8 +59,8 @@ export default {
   <div v-if="hasPDF" class="pdf-viewer">
     <page
       v-for="(page, index) in pages"
+      v-if="page"
       :key="index"
-      :v-if="!loading"
       :page="page"
       :number="index + 1"
     />
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
index f16aaca6cd7..d933fdf220a 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -39,7 +39,9 @@ export default {
       .then(() => {
         this.rendering = false;
       })
-      .catch(error => this.$emit('pdflaberror', error));
+      .catch(error => {
+        this.$emit('pdflaberror', error);
+      });
   },
 };
 </script>
-- 
cgit v1.2.1