Bug 1404078 - notify user when full page is cut off r=kmag

Adds a new captureType, fullPageTruncated Fixes upstream bug: mozilla-services/screenshots#2129 Export of commit: mozilla-services/screenshots@e31c321 MozReview-Commit-ID: HB3e5Q24afT
JerryShih · Sep 28, 2017 · 7021ee6 · 7021ee6
1 parent 24456dd
commit 7021ee6
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 11 deletions.
diff --git a/browser/extensions/screenshots/webextension/_locales/en_US/messages.json b/browser/extensions/screenshots/webextension/_locales/en_US/messages.json
@@ -40,6 +40,14 @@
       }
     }
   },
+  "imageCroppedWarning": {
+    "message": "This image has been cropped to $PIXELS$px.",
+    "placeholders": {
+      "pixels": {
+        "content": "$1"
+      }
+    }
+  },
   "requestErrorTitle": {
     "message": "Out of order."
   },

diff --git a/browser/extensions/screenshots/webextension/build/buildSettings.js b/browser/extensions/screenshots/webextension/build/buildSettings.js
@@ -3,7 +3,9 @@ window.buildSettings = {
   logLevel: "" || "warn",
   captureText: ("" === "true"),
   uploadBinary: ("" === "true"),
-  pngToJpegCutoff: parseInt("" || 2500000, 10)
+  pngToJpegCutoff: parseInt("" || 2500000, 10),
+  maxImageHeight: parseInt("" || 5000, 10),
+  maxImageWidth: parseInt("" || 5000, 10)
 };
 null;
 
diff --git a/browser/extensions/screenshots/webextension/build/inlineSelectionCss.js b/browser/extensions/screenshots/webextension/build/inlineSelectionCss.js
@@ -542,6 +542,18 @@ window.inlineSelectionCss = `
   padding-top: 20px;
   width: 400px; }
 
+#imageCroppedWarning {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.8);
+  bottom: 0;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
+  font-size: 12px;
+  padding: 10px;
+  text-align: center;
+  width: 100%;
+  z-index: 2; }
+
 .myshots-all-buttons-container {
   display: flex;
   flex-direction: row-reverse;

diff --git a/browser/extensions/screenshots/webextension/build/shot.js b/browser/extensions/screenshots/webextension/build/shot.js
@@ -707,7 +707,14 @@ class _Clip {
     }
     assert(checkObject(image, ["url"], ["dimensions", "text", "location", "captureType", "type"]), "Bad attrs for Clip Image:", Object.keys(image));
     assert(isValidClipImageUrl(image.url), "Bad Clip image URL:", image.url);
-    assert(image.captureType == "madeSelection" || image.captureType == "selection" || image.captureType == "visible" || image.captureType == "auto" || image.captureType == "fullPage" || !image.captureType, "Bad image.captureType:", image.captureType);
+    assert(
+      image.captureType == "madeSelection" ||
+      image.captureType == "selection" ||
+      image.captureType == "visible" ||
+      image.captureType == "auto" ||
+      image.captureType == "fullPage" ||
+      image.captureType == "fullPageTruncated" ||
+      !image.captureType, "Bad image.captureType:", image.captureType);
     assert(typeof image.text == "string" || !image.text, "Bad Clip image text:", image.text);
     if (image.dimensions) {
       assert(typeof image.dimensions.x == "number" && typeof image.dimensions.y == "number", "Bad Clip image dimensions:", image.dimensions);

diff --git a/browser/extensions/screenshots/webextension/selector/shooter.js b/browser/extensions/screenshots/webextension/selector/shooter.js
@@ -47,14 +47,16 @@ this.shooter = (function() { // eslint-disable-line no-unused-vars
     let width = selectedPos.right - selectedPos.left;
     let canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
     let ctx = canvas.getContext('2d');
-    if (captureType == 'fullPage') {
+    let expand = window.devicePixelRatio !== 1;
+    if (captureType == 'fullPage' || captureType == 'fullPageTruncated') {
+      expand = false;
       canvas.width = width;
       canvas.height = height;
     } else {
       canvas.width = width * window.devicePixelRatio;
       canvas.height = height * window.devicePixelRatio;
     }
-    if (window.devicePixelRatio !== 1 && captureType != 'fullPage') {
+    if (expand) {
       ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     }
     ui.iframe.hide();

diff --git a/browser/extensions/screenshots/webextension/selector/ui.js b/browser/extensions/screenshots/webextension/selector/ui.js
@@ -1,4 +1,4 @@
-/* globals log, util, catcher, inlineSelectionCss, callBackground, assertIsTrusted, assertIsBlankDocument */
+/* globals log, util, catcher, inlineSelectionCss, callBackground, assertIsTrusted, assertIsBlankDocument, buildSettings */
 
 "use strict";
 
@@ -707,10 +707,16 @@ this.ui = (function() { // eslint-disable-line no-unused-vars
   };
 
   exports.Preview = {
-    display(dataUrl) {
+    display(dataUrl, showCropWarning) {
       let img = makeEl("IMG");
       img.src = dataUrl;
       iframe.document().querySelector(".preview-image").appendChild(img);
+      if (showCropWarning) {
+        let imageCroppedEl = makeEl("DIV");
+        imageCroppedEl.id = "imageCroppedWarning";
+        imageCroppedEl.textContent = browser.i18n.getMessage("imageCroppedWarning", buildSettings.maxImageHeight);
+        iframe.document().querySelector(".preview-overlay").appendChild(imageCroppedEl);
+      }
     }
   };
 

diff --git a/browser/extensions/screenshots/webextension/selector/uicontrol.js b/browser/extensions/screenshots/webextension/selector/uicontrol.js
@@ -1,5 +1,5 @@
 /* globals log, catcher, util, ui, slides */
-/* globals shooter, callBackground, selectorLoader, assertIsTrusted */
+/* globals shooter, callBackground, selectorLoader, assertIsTrusted, buildSettings */
 
 "use strict";
 
@@ -45,8 +45,8 @@ this.uicontrol = (function() {
 
   const { watchFunction, watchPromise } = catcher;
 
-  const MAX_PAGE_HEIGHT = 5000;
-  const MAX_PAGE_WIDTH = 5000;
+  const MAX_PAGE_HEIGHT = buildSettings.maxImageHeight;
+  const MAX_PAGE_WIDTH = buildSettings.maxImageWidth;
   // An autoselection smaller than these will be ignored entirely:
   const MIN_DETECT_ABSOLUTE_HEIGHT = 10;
   const MIN_DETECT_ABSOLUTE_WIDTH = 30;
@@ -160,22 +160,28 @@ this.uicontrol = (function() {
     },
     onClickFullPage: () => {
       sendEvent("capture-full-page", "selection-button");
+      captureType = "fullPage";
       let width = Math.max(
         document.body.clientWidth,
         document.documentElement.clientWidth,
         document.body.scrollWidth,
         document.documentElement.scrollWidth);
+      if (width > MAX_PAGE_WIDTH) {
+        captureType = "fullPageTruncated";
+      }
       width = Math.min(width, MAX_PAGE_WIDTH);
       let height = Math.max(
         document.body.clientHeight,
         document.documentElement.clientHeight,
         document.body.scrollHeight,
         document.documentElement.scrollHeight);
+      if (height > MAX_PAGE_HEIGHT) {
+        captureType = "fullPageTruncated";
+      }
       height = Math.min(height, MAX_PAGE_HEIGHT);
       selectedPos = new Selection(
         0, 0,
         width, height);
-      captureType = 'fullPage';
       setState("previewing");
     },
     onSavePreview: () => {
@@ -368,7 +374,7 @@ this.uicontrol = (function() {
     start() {
       dataUrl = shooter.screenshotPage(selectedPos, captureType);
       ui.iframe.usePreview();
-      ui.Preview.display(dataUrl);
+      ui.Preview.display(dataUrl, captureType == "fullPageTruncated");
     }
   };