Skip to content

Screenshot is not automatically added when using "Report site issue" #2509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
softvision-oana-arbuzov opened this issue Jun 19, 2018 · 22 comments

Comments

@softvision-oana-arbuzov
Copy link
Member

softvision-oana-arbuzov commented Jun 19, 2018

URL: http://www.google.com/ redirecting to www.webcompat.com
Browser / Version: Firefox Nightly 62.0a1 (2018-06-17)
Operating System: Samsung Galaxy S6 (Android 7.0) - Resolution 1440 x 2560 pixels (~577 ppi pixel density), Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density)

Prerequisites:
1. “webcompat.com reporter” add-on installed on Firefox.

Steps to Reproduce:
1. Navigate to any site (e.g http://www.google.com/)
2. Tap “More” button.
3. Tap “Report site issue”.
4. Observe form.

Expected Behavior:
Screenshot is automatically added to “Screenshot” area.

Actual Behavior:
Screenshot is not available in the “Screenshot” area.

Note
1. Not reproducible on Desktop.
2. Not reproducible on Firefox Release 60.0.2
3. Affected area:

<div class="form-upload js-image-upload js-Form-group">
	<input accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp" class="form-input input-upload" id="image" name="image" type="file">
		<div class="label-icon label-upload js-label-upload">
			<svg class="icon icon-big" role="presentation" title="Upload Screenshot">
				<use class="icon-upload" xlink:href="#svg-plus">Upload Screenshot</use>
			</svg>
			<small class="label-icon-message">Upload screenshot</small>
		</div>
		<div class="label-icon label-remove is-hidden js-remove-upload">
			<svg class="icon icon-big" role="presentation" title="Remove Screenshot">
				<use class="icon-remove" xlink:href="#svg-x">Remove Screenshot</use>
			</svg>
			<small class="label-icon-message">Remove screenshot</small>
		</div>
		<div class="label-icon label-error is-hidden js-error-upload">
			<svg class="icon icon-big" role="presentation" title="An error occoured">
				<use class="icon-error" xlink:href="#svg-warning">An error occoured</use>
			</svg>
		</div>
</div>

screenshotnotautoadded

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv;

@miketaylr
Copy link
Member

@softvision-oana-arbuzov just to verify -- this is with the addon from AMO installed? And not the built-in menu item?

@karlcow
Copy link
Member

karlcow commented Jun 19, 2018

@miketaylr I just tried to reproduce and indeed this is happening.

  1. I used the built-in menu item.
  2. I do NOT have installed the addon.
  3. Version 62.0a1 / 2018-06-18

@miketaylr
Copy link
Member

Thanks @karlcow. Sounds like a regression.

@softvision-oana-arbuzov
Copy link
Member Author

Note:

  • on Firefox Nightly I did not have the add-on installed, I only had the build-in menu item;
  • on Firefox Release I've installed the add-on.

@miketaylr
Copy link
Member

@softvision-oana-arbuzov, are you able to get mozregression working on an android device? I'm running into some errors... (ADBRootError: Can not run command ls -a /storage/sdcard0/ as root! -- never seen that before).

It seems like maybe the bug is on the Firefox for Android side, it would be interesting to try to pin down what broke this.

Something like mozregression --good 57 --app fennec should do the trick, assuming this was working in 57.

@softvision-oana-arbuzov
Copy link
Member Author

@miketaylr , I was able to run mozrregression, but was not able to find a good Nightly build where the screenshot was automatically added when using "Report site issue" option.

I've tried many different ranges:

  • mozregression --app fennec --good 2017-03-13 --bad 2018-07-02
  • mozregression --app fennec --good 2017-02-28 --bad 2017-05-30
  • mozregression --app fennec --good 2017-10-30 --bad 2018-01-30
  • mozregression --app fennec --good 2015-03-13 --bad 2017-03-02

It might be possible that it never worked on Nightly, but always worked on Release.

@miketaylr
Copy link
Member

It might be possible that it never worked on Nightly, but always worked on Release.

Hm, it for sure has worked on Nightly. I'll try to debug further. Thanks.

@miketaylr miketaylr modified the milestone: Paris October 2018 Sep 24, 2018
@karlcow
Copy link
Member

karlcow commented Oct 1, 2018

We will not work on it during Paris work week.

@karlcow
Copy link
Member

karlcow commented Dec 5, 2018

@miketaylr @softvision-oana-arbuzov is it something related to the work of @wisniewskit or completely different?

@miketaylr
Copy link
Member

is it something related to the work of @wisniewskit or completely different?

yep! he fixed it for us by porting the fennec reporter to a web extension.

@softvision-sergiulogigan
Copy link
Collaborator

Reopening this issue, as per @miketaylr 's IRC note:
<miketaylr> sergiu: taking a screenshot should always happen, from the browser or from the add-on

Note:
This is happening on both Mobile and Desktop.

@miketaylr
Copy link
Member

@softvision-sergiulogigan I assume you mean in Nightly? I see that it's working for me in DevEdition, so possible regression here.

@miketaylr
Copy link
Member

Interesting mozregression result here:

10:38.37 INFO: Last good revision: 02272a7500f3f3b643733d707caefd2f67dee1e8
10:38.37 INFO: First bad revision: eec1a6963a9cc61b02611259233f54fd15094792
10:38.37 INFO: Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=02272a7500f3f3b643733d707caefd2f67dee1e8&tochange=eec1a6963a9cc61b02611259233f54fd15094792

Both related to deferring timers:
https://bugzilla.mozilla.org/show_bug.cgi?id=1270059
https://bugzilla.mozilla.org/show_bug.cgi?id=1522150

@miketaylr
Copy link
Member

Nothing really timer-related in the code that handles the message event,

window.addEventListener("message", this.onReceiveMessage, false);
};
this.onReceiveMessage = function(event) {
// We're getting a report about our own site, so let's bail.
if (this.isSelfReport()) {
return false;
}
// Make sure the data is coming from a trusted source.
// (i.e., our add-on or some other priviledged code sent it)
if (location.origin === event.origin) {
// See https://github.com/webcompat/webcompat.com/issues/1252 to track
// the work of only accepting blobs, which should simplify things.
if (event.data instanceof Blob) {
// convertToDataURI sends the resulting string to the upload
// callback.
this.convertToDataURI(event.data, this.showUploadPreview);
} else {
// ...the data is already a data URI string
this.showUploadPreview(event.data);
}
}

@wisniewskit, is there anything timer-ish in our web-extension that relates to sending screenshots?

@miketaylr
Copy link
Member

Reopening this issue

(Note: nothing about this bug before yesterday is relevant -- the symptoms are the same, but causes entirely unrelated. We can spin off a new bug if we need to).

@wisniewskit
Copy link
Member

@miketaylr: hmm. It's working for me on today's nightly.

Our code isn't explicitly using any timers, no. It uses a standard extension API to grab the screenshot, then it POSTS using an experimental addon API, then it uses another standard extension API to send the screenshot using a postMessage call, as one might expect.

So unless these are somehow thrown off by those two bug-fixes, I'm not sure what's going on. Is any message logged to the browser console when the screenshot fails?

@miketaylr
Copy link
Member

I wonder if there's some subtle timing issue related to when webextensions run? Will investigate a bit more.

@karlcow
Copy link
Member

karlcow commented Feb 21, 2019

Steps to reproduce with 67.0a1 (2019-02-21) (64-bit)

  1. Go to https://www.lemonde.fr/
  2. Select Report Site Issue
    capture d ecran 2019-02-22 a 06 56 30
  3. It opens a new tab with information but no screenshots.
    capture d ecran 2019-02-22 a 06 57 26

@karlcow
Copy link
Member

karlcow commented Feb 21, 2019

So unless these are somehow thrown off by those two bug-fixes, I'm not sure what's going on. Is any message logged to the browser console when the screenshot fails?

Loading the page of the site.

07:04:24.004 OpenGL compositor Initialized Succesfully.
Version: 2.1 INTEL-12.4.7
Vendor: Intel Inc.
Renderer: Intel(R) Iris(TM) Plus Graphics 640
FBO Texture Target: TEXTURE_2D

07:04:43.635 The resource at “https://a.ligatus.com/?ids=104722&t=js” was blocked because content blocking is enabled.
www.lemonde.fr
07:04:43.821 The resource at “https://a.ligatus.com/?ids=104722&t=js” was blocked because content blocking is enabled.
www.lemonde.fr
07:04:43.856 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.068 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.166 Request to access cookie or storage on “https://www.youtube.com/yts/cssbin/www-player-vfl8kcEe-.css” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.166 Request to access cookie or storage on “https://www.youtube.com/yts/jsbin/www-embed-player-vflN3jHrV/www-embed-player.js” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.167 Request to access cookie or storage on “https://www.youtube.com/yts/jsbin/player-vflDKtRkK/en_US/base.js” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.347 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:313:69
07:04:44.502 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:2191:29
07:04:44.502 Request to access cookie or storage on “https://www.google.com/js/bg/ytw6ZC4ZfmZw-ulAI3_kb2XLbaHgV_kOR6dFp4_K49Y.js” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.502 Request to access cookie or storage on “https://static.doubleclick.net/instream/ad_status.js” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.502 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:4781:41
07:04:44.502 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6241:190
07:04:44.502 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6241:218
07:04:44.502 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:2191:29
07:04:44.502 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.656 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.656 Request to access cookie or storage on “https://googleads.g.doubleclick.net/pagead/id” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.657 Request to access cookie or storage on “https://www.youtube.com/yts/jsbin/player-vflDKtRkK/en_US/remote.js” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.657 Request to access cookie or storage on “https://googleads.g.doubleclick.net/pagead/id” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.681 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:1:65
07:04:44.681 Request to access cookie or storage on “https://googleads.g.doubleclick.net/pagead/id?slf_rd=1” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.681 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.868 Request to access cookie or storage on “https://googleads.g.doubleclick.net/pagead/id?slf_rd=1” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.869 Request to access cookie or storage on “https://www.youtube.com/generate_204?Exx2uA” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:44.869 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.869 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:4781:41
07:04:44.869 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:4780:344
07:04:44.869 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:2191:29
07:04:44.869 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6242:33
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6242:33
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6244:30
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6244:30
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:4781:41
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:4780:344
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6244:30
07:04:44.872 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:04:44.872 Request to access cookie or storage on “https://yt3.ggpht.com/-mlZURIoYJjU/AAAAAAAAAAI/AAAAAAAAAAA/WprjPAJIBfk/s68-c-k-no-mo-rj-c0xffffff/photo.jpg” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr
07:04:45.013 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:115:39
07:04:45.014 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:114:333
07:04:46.464 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:535:35

Then using the menu to report site issue (°°°)

07:05:24.657 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6243:29
07:05:24.657 Request to access cookie or storage on “https://www.youtube.com/embed/eyMffKwWJuk” was blocked because it came from a tracker and content blocking is enabled.
www.lemonde.fr:6244:30
07:05:26.020 Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
07:05:26.045 Request to access cookie or storage on “https://www.google-analytics.com/analytics.js” was blocked because it came from a tracker and content blocking is enabled.
new
07:05:27.356 Request to access cookie or storage on “https://www.google-analytics.com/r/collect?v=1&_v=j73&a=1203965620&t=pageview&_s=1&dl=https%3A%2F%2Fwebcompat.com%2Fissues%2Fnew&ul=en-us&de=UTF-8&dt=New%20Issue%20%7C%20webcompat.com&sd=24-bit&sr=3200x1800&vp=1047x1025&je=0&_u=IEBAAAAB~&jid=1348039012&gjid=1852560550&cid=1769696758.1550786727&tid=UA-116539473-1&_gid=636334489.1550786727&_r=1&z=63468778” was blocked because it came from a tracker and content blocking is enabled.
new

@miketaylr
Copy link
Member

Note to self: Panos mentioned he ran into this, and it seems like it sometimes worked, and sometimes didn't.

@miketaylr
Copy link
Member

Starting to look into this now. On Nightly, for my local server it seems to work 100% of the time for small /simple images. However, I can get the bug to reproduce consistently with this URL:

https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Rainbow-gradient-fully-saturated.svg/1024px-Rainbow-gradient-fully-saturated.svg.png

@miketaylr
Copy link
Member

Just testing out a theory here, and it seems to work:

diff --git a/webcompat/static/js/lib/bugform.js b/webcompat/static/js/lib/bugform.js
index f8daca67..b555b247 100644
--- a/webcompat/static/js/lib/bugform.js
+++ b/webcompat/static/js/lib/bugform.js
@@ -84,7 +84,22 @@ function BugForm() {
   this.stepsToReproduceField = this.inputs.steps_reproduce.el;
   this.contactField = this.inputs.contact.el;
 
+  // Is the user trying to report a site against webcompat.com itself?
+  this.isSelfReport = function(href) {
+    href = href || location.href;
+    var url = href.match(this.urlParamRegExp);
+    if (url !== null) {
+      if (_.includes(decodeURIComponent(url[0]), location.origin)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
   this.init = function() {
+    // Set up listener for message events from screenshot-enabled add-ons
+    window.addEventListener("message", this.onReceiveMessage.bind(this), false);
+
     this.checkURLValidity = this.checkURLValidity.bind(this);
     this.checkDescriptionValidity = this.checkDescriptionValidity.bind(this);
     this.checkProblemTypeValidity = this.checkProblemTypeValidity.bind(this);
@@ -93,7 +108,6 @@ function BugForm() {
     this.checkOptionalNonEmpty = this.checkOptionalNonEmpty.bind(this);
     this.storeClickedButton = this.storeClickedButton.bind(this);
     this.onFormSubmit = this.onFormSubmit.bind(this);
-    this.onReceiveMessage = this.onReceiveMessage.bind(this);
     this.preventSubmitByEnter = this.preventSubmitByEnter.bind(this);
 
     // Make sure we're not getting a report
@@ -125,9 +139,6 @@ function BugForm() {
     // See if the user already has a valid form
     // (after a page refresh, back button, etc.)
     this.checkForm();
-
-    // Set up listener for message events from screenshot-enabled add-ons
-    window.addEventListener("message", this.onReceiveMessage, false);
   };
 
   this.onReceiveMessage = function(event) {
@@ -202,18 +213,6 @@ function BugForm() {
     img.src = dataURI;
   };
 
-  // Is the user trying to report a site against webcompat.com itself?
-  this.isSelfReport = function(href) {
-    href = href || location.href;
-    var url = href.match(this.urlParamRegExp);
-    if (url !== null) {
-      if (_.includes(decodeURIComponent(url[0]), location.origin)) {
-        return true;
-      }
-    }
-    return false;
-  };
-
   // Do some extra work based on the GET params that come with the request
   this.checkParams = function() {
     // Don't bother doing any work for bare requests.

It seems like with the timing changes, perhaps we're getting the screenshot slightly faster than our script even knows what to do with it, depending on how big or small the image is (🤔). We could register a message event handler as early as possible and stash the data to be picked up once BugForm has run its init method... or we could just land this as-is and see what happens (just a band-aid, really). I bet there's some optimization work that could be done to make this script faster in general too.

ksy36 added a commit that referenced this issue May 30, 2019
ksy36 added a commit that referenced this issue May 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants