Snooze tabs pane flickers on opening

barryvan · February 23, 2017, 11:35pm

As you can see in this video, the snooze tabs panel flickers rather unpleasantly when it’s opened. I’m running Firefox Dev Edition 53.0a2 (32bit) on a Surface Pro 3. The Surface Pro is a retina screen, but Firefox has been placed on a secondary non-retina screen.

lorchard · February 27, 2017, 5:48pm

Huh. That’s definitely weird. There is logic in there to try to tailor the styles of the panel to match whether it’s been summoned from the toolbar or from the more narrow menu (under the hamburger menu), and there have been issues with how that’s working. I suspect there’s something going awry there.

If you see this again, by chance could you open the Browser Console from the Developer item in the menu and see if there are some log messages that say something like “SnoozeTabs (FE) resize 320”? That number reports the width of the panel, which could be helpful to me in diagnosing this.

Thanks!

barryvan · February 27, 2017, 11:49pm

Nothing about 320, @lorchard, but there do seem to be quite a few reflows:

reflow: 0.14ms function openPopup, popup.xml line 51
reflow: 0.36ms function get_alignmentPosition, popup.xml line 156
reflow: 0.13ms function get_alignmentPosition, popup.xml line 156
reflow: 0.16ms
reflow: 0.39ms function get_alignmentPosition, popup.xml line 156
reflow: 0.23ms function handler, snooze-content.js line 32200
POST 
XHR 
https://ssl.google-analytics.com/collect [HTTP/2.0 200 OK 180ms]
1488239262100	addons.manager	WARN	Exception calling callback: TypeError: h.Services.appShell.hiddenDOMWindow.navigator.sendBeacon is not a function (resource://gre/modules/commonjs/toolkit/loader.js -> resource://testpilot-addon/data/bundle.js:1:11785) JS Stack trace: a/<@bundle.js:1:11785 < safeCall@AddonManager.jsm:196:5 < makeSafe/<@AddonManager.jsm:211:25 < process@Promise-backend.js:917:23 < walkerLoop@Promise-backend.js:801:7 < Promise*scheduleWalkerLoop@Promise-backend.js:734:11 < schedulePromise@Promise-backend.js:765:7 < Promise.prototype.then@Promise-backend.js:450:5 < getAddon@XPIProviderUtils.js:1067:12 < getVisibleAddonForID@XPIProviderUtils.js:1116:5 < getAddonByID@XPIProvider.jsm:4150:5 < callProviderAsync@AddonManager.jsm:298:12 < promiseCallProvider/<@AddonManager.jsm:322:53 < Promise@Promise-backend.js:385:5 < promiseCallProvider@AddonManager.jsm:321:10 < getAddonByID/promises<@AddonManager.jsm:2470:12 < getAddonByID@AddonManager.jsm:2469:20 < getAddonByID@AddonManager.jsm:3578:7 < a@bundle.js:1:10955 < value@bundle.js:1:12956 < value/<@bundle.js:1:14757 < value@bundle.js:1:15493 < e/this.handleEvent@bundle.js:1:14132 < EventListener.handleEvent*e@bundle.js:1:14295 < value@bundle.js:1:14686 < value/<@bundle.js:2:11953 < promise callback*value@bundle.js:2:11371 < o@bundle.js:1:27197 < run@runner.js:153:7 < startup/</<@runner.js:87:9 < process@Promise-backend.js:917:23 < walkerLoop@Promise-backend.js:801:7 < Promise*scheduleWalkerLoop@Promise-backend.js:734:11 < schedulePromise@Promise-backend.js:765:7 < completePromise@Promise-backend.js:702:7 < handler@window.js:56:3 < EventListener.handleEvent*@window.js:54:1 < evaluate@loader.js:444:19 < load@loader.js:497:5 < _require@loader.js:803:16 < require@loader.js:757:12 < startup/<@runner.js:72:21 < process@Promise-backend.js:917:23 < walkerLoop@Promise-backend.js:801:7 < Promise*scheduleWalkerLoop@Promise-backend.js:734:11 < schedulePromise@Promise-backend.js:765:7 < completePromise@Promise-backend.js:702:7 < listener/<@Startup.js:52:46

Is there a setting I can enable to allow more verbose logging from the addon?

lorchard · February 28, 2017, 4:47pm

Oh, crud, that’s right: Our production builds of Snooze Tabs don’t log anything at all, because that code gets excluded from the add-on altogether. So, no, there’s no such setting right now. Maybe we should change that in the near future.

But, if you’re feeling adventurous, we do have a development build of v1.0.15:

https://255-15314951-gh.circle-artifacts.com/0/tmp/circle-artifacts.0rYlBqi/snoozetabs-dev.zip

You can install this as a temporary add-on - which, TL;DR, works like this:

Remove the existing add-on from Test Pilot
Download the .zip file & unpack it
Type about:debugging in Firefox’s URL bar
Check “Enable add-on debugging”
Click “Load Temporary Add-on”
Select manifest.json from wherever you unpacked the .zip file

And then, you should have a development build of the add-on installed. Main difference is that logging & debugging code is enabled, so you should see many more messages in the Browser Console.

If you don’t feel like going through those steps, I totally understand If you do, we definitely appreciate the feedback & help!

6a68 · March 1, 2017, 4:52pm

I wonder if this line is a possible culprit

1488239262100 addons.manager WARN Exception calling callback: TypeError: h.Services.appShell.hiddenDOMWindow.navigator.sendBeacon is not a function

I thought this was a fixed bug, but maybe not?

@barryvan, do you have ad blockers installed, or privacy-related addons like Privacy Badger? Some of these addons toggle the beacon.enabled preference to false.

Give this a try:

navigate to about:config
search for beacon.enabled, and make sure it’s set to true
restart Firefox

After resetting that pref, then restarting Firefox, hopefully that error will be gone from the console, and hopefully the flickering will be gone with it.

Let us know if this helps!

Cheers,

Jared

barryvan · March 3, 2017, 6:29am

@6a68 Yep, I use uBlock. I tried flipping beacon.enabled back to true, and it doesn’t appear to have made a difference. In fact, things seem to have gotten worse.

https://1drv.ms/v/s!Auu1uPcNgVBFvH9R11BpCOKBqmmD

As you can see in that video, the flickering isn’t so much solved as it is, well, exacerbated.

I’ll try and find a bit of time to install the development build in the next couple of days, which will then hopefully allow me to capture some useful debug logs.

EDIT: config doesn’t seem to have caused flickering; updated to reflect.

lorchard · March 6, 2017, 8:21pm

Oh, ugh! I don’t know why that’s happening for you, but I suspect it has something to do with the styles switch we try to do when the button is on the toolbar vs when it’s in the side menu. I’ve never seen it oscillate like that before, though! Will try to reproduce on my machine

barryvan · March 8, 2017, 6:24am

I’ve (finally) installed the dev version of this addon and grabbed the debug logs. This is the result of clicking it four times.

The first time, it didn’t flicker, but it was also about twice as large as it normally is.
The second time, it flickered a tiny bit, but then went down to normal size.
The third and fourth times, it flickered a fair bit (without looping), and then stayed at normal size.

I’ve split the logs on the “Download the React devtools” message.

Summary

First click

SnoozeTabs (FE) init  snooze-content.js:34346:8
SnoozeTabs (FE) fetching items  snooze-content.js:34346:8
SnoozeTabs (FE) resize 320 false false snooze-content.js:34346:8
SnoozeTabs (FE) fetched items true Object { 1490662835952-https://www.fivesenses.com.au/blog/level-even-espresso-distribution/: Object, 1489107628195-https://msdn.microsoft.com/en-us/office/office365/howto/query-Office-graph-using-gql-with-search-rest-api: Object, 1489107630939-https://dev.office.com/officegraph: Object, 1489107633890-https://blogs.office.com/2017/02/22/onenote-class-notebook-add-in-now-includes-grade-scales-improved-lms-integration-and-sticker-customization/: Object }  snooze-content.js:34346:8
SnoozeTabs (BE) backend received panelOpened undefined  background.js:178:8
SnoozeTabs (Metrics) sendEvent 0623a970-81b4-4c2e-be47-cda11ff73bbe Object { event: "panel-opened" }  background.js:178:8
SnoozeTabs (FE) resize 320 false false snooze-content.js:34346:8

Second click

snooze-content.js:18904:9
SnoozeTabs (FE) init  snooze-content.js:34346:8
SnoozeTabs (FE) fetching items  snooze-content.js:34346:8
SnoozeTabs (FE) resize 320 false false snooze-content.js:34346:8
SnoozeTabs (FE) fetched items true Object { 1490662835952-https://www.fivesenses.com.au/blog/level-even-espresso-distribution/: Object, 1489107628195-https://msdn.microsoft.com/en-us/office/office365/howto/query-Office-graph-using-gql-with-search-rest-api: Object, 1489107630939-https://dev.office.com/officegraph: Object, 1489107633890-https://blogs.office.com/2017/02/22/onenote-class-notebook-add-in-now-includes-grade-scales-improved-lms-integration-and-sticker-customization/: Object }  snooze-content.js:34346:8
SnoozeTabs (BE) backend received panelOpened undefined  background.js:178:8
SnoozeTabs (Metrics) sendEvent 0623a970-81b4-4c2e-be47-cda11ff73bbe Object { event: "panel-opened" }  background.js:178:8
SnoozeTabs (FE) resize 213 false true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true snooze-content.js:34346:8
SnoozeTabs (FE) resize 142 true true snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true snooze-content.js:34346:8

Third click

snooze-content.js:18904:9
SnoozeTabs (FE) init  snooze-content.js:34346:8
SnoozeTabs (FE) fetching items  snooze-content.js:34346:8
SnoozeTabs (FE) resize 320 false false snooze-content.js:34346:8
SnoozeTabs (FE) fetched items true Object { 1490662835952-https://www.fivesenses.com.au/blog/level-even-espresso-distribution/: Object, 1489107628195-https://msdn.microsoft.com/en-us/office/office365/howto/query-Office-graph-using-gql-with-search-rest-api: Object, 1489107630939-https://dev.office.com/officegraph: Object, 1489107633890-https://blogs.office.com/2017/02/22/onenote-class-notebook-add-in-now-includes-grade-scales-improved-lms-integration-and-sticker-customization/: Object }  snooze-content.js:34346:8
SnoozeTabs (BE) backend received panelOpened undefined  background.js:178:8
SnoozeTabs (Metrics) sendEvent 0623a970-81b4-4c2e-be47-cda11ff73bbe Object { event: "panel-opened" }  background.js:178:8
SnoozeTabs (FE) resize 213 false true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 142 true true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 142 true true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true  snooze-content.js:34346:8

Fourth click

snooze-content.js:18904:9
SnoozeTabs (FE) init  snooze-content.js:34346:8
SnoozeTabs (FE) fetching items  snooze-content.js:34346:8
SnoozeTabs (FE) resize 320 false false  snooze-content.js:34346:8
SnoozeTabs (FE) resize 320 false false  snooze-content.js:34346:8
SnoozeTabs (FE) fetched items true Object { 1490662835952-https://www.fivesenses.com.au/blog/level-even-espresso-distribution/: Object, 1489107628195-https://msdn.microsoft.com/en-us/office/office365/howto/query-Office-graph-using-gql-with-search-rest-api: Object, 1489107630939-https://dev.office.com/officegraph: Object, 1489107633890-https://blogs.office.com/2017/02/22/onenote-class-notebook-add-in-now-includes-grade-scales-improved-lms-integration-and-sticker-customization/: Object }  snooze-content.js:34346:8
SnoozeTabs (BE) backend received panelOpened undefined  background.js:178:8
SnoozeTabs (Metrics) sendEvent 0623a970-81b4-4c2e-be47-cda11ff73bbe Object { event: "panel-opened" }  background.js:178:8
SnoozeTabs (FE) resize 213 false true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true  snooze-content.js:34346:8
SnoozeTabs (FE) resize 142 true true snooze-content.js:34346:8
SnoozeTabs (FE) resize 213 true true

lorchard · March 15, 2017, 4:37pm

Thanks for installing the dev version and including these log messages! Oof, yeah those are definitely weird results that would explain the flickering.

When the button is in the Toolbar (the default spot), it should be 320px wide—i.e. “twice as large as it normally is”. The weird thing is that larger style should be what you normally see. The narrower version should only be visible when the button is moved to the side menu, either via the Customize feature or with a right click and “Move to Menu”.

That number in the “resize” log messages is the width of the panel, and we use that to decide which styles to enable. That you’re seeing so many different widths is weird!

I don’t have a Surface Pro, but I do have a Windows machine around here. I’ll try seeing if I can reproduce this issue at all on there. I’ve tried Snooze Tabs on there before, but I’ve never seen this issue.

We may also have a new version of the experiment coming out soon which disables the switching logic altogether until we can work out the kinks—that would hopefully make this work better on your machine

lorchard · March 16, 2017, 5:11pm

Just to follow up: I pushed out a new release today. One of the changes is to react to panel width only once, so that should stop the flickering issue. Hopefully it also picks the correct size. But, it doesn’t, hopefully the narrow style set is at least usable.

leo · April 12, 2018, 10:51pm