Shadow DOM breaks layout when using feedback dialog on Google's websites

[mapx]

Environment

windows
chrome 44.0.2403.18 beta-m
ABP last dev build 1.8.12.1432 or stable 1.8.12

How to reproduce

1. Open gmail.com with Adblock Plus (even without any list)
2. Click the gear icon button near the top right corner of Gmail and click "Send feedback."
3. Type something into the text box and click Next (proceeding to the screenshot). Note: Please do not actually submit the report.

or simply just close the "send feedback" box

Observed behaviour

Gmail user interface layout is completely broken and corrupted.
Even closing the send feedback window and scrolling the emails page ==> the page is completely broken

Expected behaviour

Gmail should work

Repeating the test with ABP disabled ==> the gmail behaviour is normal

from
​https://forums.lanik.us/viewtopic.php?f=64&t=23075

[mapx]

It seems to be only an ABP for chrome issue (not firefox).

[MSI Team]

If you want to collect more data regarding the problem, you can press Ctrl+Shift+I to open Chrome DevTools, open the Console, and see the 'ERROR_BLOCKED_BY_CLIENT' error messages. This reproduces even with no filterlists enabled.

[greiner]

I was able to reproduce this issue except for the error message in the JavaScript console. It appears to be the same problem that we encountered in #1770. When applying the same workaround for mail.google.com this issue is no longer reproducible.

[sebastian]

I can confirm what greiner said. This happens when there is a shadow DOM for the document element, as created by Adblock Plus. It can also be reproduced without Adblock Plus, when you run following code from the JavaScript console:

document.documentElement.createShadowRoot().appendChild(document.createElement("shadow"));

I filed a ​Chrome bug and wrote a workaround to skip shadow DOM on mail.google.com.

[sebastian]

​https://hg.adblockplus.org/adblockpluschrome/rev/c8aa03e3391f

[MSI Team]

Fix successfully verified on Chrome 44.0.2403.30 beta and Adblock Plus development build 1.8.12.1445.

1. Opened gmail.com with Adblock Plus development build enabled, no filterlists enabled, and Adblock Plus stable build disabled.
2. Clicked the gear icon button and clicked "Send feedback."
3. Typed "test" or anything into the feedback dialog and clicked the "Next" button.
4. No user interface layout issues, errors, or corruption observed.
5. Repeated steps 1-3 except closed the feedback dialog instead of clicking the "Next" button.
6. Still no user interface layout issues, errors, or corruption observed.

Can we merge the fix into the stable build? Thanks.

[sebastian]

We are going to release Adblock-Plus-1.9-for-Chrome-Opera-Safari including this fix, next Tuesday.

[MSI Team]

OK, from my understanding this is a Chrome bug but your Adblock Plus fix is simply a workaround. This bug has proceeded through many changes.

1. I originally thought this was a Gmail bug and therefore reported the issue in the Gmail Help Forum.
2. A top contributor on the Gmail Help Forum asked me to check my extensions. I narrowed the issue down to Adblock Plus, and erroneously assumed it was an EasyList issue.
3. I visited the EasyList Forums and ​reported the issue in the "Report incorrectly blocked content" category.
4. The issue reproduced with no filterlists enabled and was therefore reported here.
5. A workaround is committed and a Chromium issue is filed.

[MSI Team]

Umm, Adblock Plus (development build with your fix) completely breaks Google Product Forums user interface layout after following the same reproduction instructions.

1. Open the ​Gmail Help Forum on Chrome with Adblock Plus development build enabled.
2. Click the gear icon near the top right corner to the left of the big red "NEW QUESTION" button and click "Help and Feedback."
3. Scroll to the bottom of the Help and Feedback window and click "Send Feedback."
4. Type anything into the feedback box and click the "Next" button. Note: Please do not actually submit the feedback report.

Same conditions as the Gmail issue except using the Adblock Plus development build.

[MSI Team]

The issue reproduces with no filterlists enabled and does not reproduce with Adblock Plus disabled. Adblock Plus development build. Should we reopen this issue?

[mapx]

The issue affects also Inbox by Gmail as reported here:
​https://adblockplus.org/forum/viewtopic.php?p=128973#p128973

affected domain
inbox.google.com

[sebastian]

mapx also mentioned ​https://productforums.google.com/ on IRC.
I'm going to disable shadow DOM on all *.google.com subdomains now.

[sebastian]

Replying to MSI Team:

The issue reproduces with no filterlists enabled and does not reproduce with Adblock Plus disabled. Adblock Plus development build. Should we reopen this issue?

Are you saying the issue is back on Google Mail? Or do you talk about the same issue as mapx, that it happens with other Google websites as well?

[mapx]

yep, MSI Team mentioned productforums.google.com above (and I can confirm it)

[mapx]

MSI team is talking about feedback on productforums

[sebastian]

​https://hg.adblockplus.org/adblockpluschrome/rev/849821cfe2c4

New devbuild (1.8.12.1446) should be available in a half hour or earlier.
Please confirm that the issue is fixed there.

[mapx]

productforums is ok now
gmail still ok
inbox ==> I can't test it but I'll ask the users on forum

[mapx]

inbox subdomain fixed too
​https://adblockplus.org/forum/viewtopic.php?p=129117#p129117

[MSI Team]

The Product Forums issue is now fixed for me on the development build. YouTube is not experiencing this issue despite youtube.com being its own domain outside google.com.

"Also, using shadow DOM causes issues on some Google websites,

1.19 + including Goolgle Docs and Gmail (#1770, #2602)."

Goolgle?

[MSI Team]

Does this issue affect other browsers?

[mapx]

only chromium family. As you can see above Sebastian opened an issue on chromium bug tracker.
​https://crbug.com/496055

[MSI Team]

Thanks. Can we keep an outdated ABP build containing the bug/without the fix around if Chromium developers need to access it?

[mapx]

read the bug opened on chromium tracker. You can simulate the bug simply running some code from console.

[MSI Team]

Replying to MSI Team:

Does this issue affect other browsers?

Sorry for asking this question. Comment:2 already answered this question.

Replying to mapx:

read the bug opened on chromium tracker. You can simulate the bug simply running some code from console.

Sorry, skipped over that because I am not a very good programmer (at least currently).

[MSI Team]

Update Review URLs?

[MSI Team]

Fix successfully verified on Chrome 44.0.2403.30 beta and Adblock Plus development build 1.8.12.1447.

1. Followed the Gmail, Google Product Forums, and YouTube reproduction instructions above. Unable to reproduce the issue.
2. Opened ​Google+, clicked the menu below the Google+ logo, clicked the small "Feedback" link at the bottom of the menu, and followed the normal problem reproduction instructions. Unable to reproduce the issue.

[sebastian]

Replying to MSI Team:

Update Review URLs?

I suppose mapx accidentally overrode my changes to the "Review URLs" field. I added the review URL for the follow up change again, now.

[sebastian]

Replying to MSI Team:

Thanks. Can we keep an outdated ABP build containing the bug/without the fix around if Chromium developers need to access it?

Every release version get's archived in our ​downloads repository. But as mapx indicated, this issue is caused by creating a shadow root for the document element, which can be reproduced without Adblock Plus as well, as described in the Chromium bug.

[sebastian]

Replying to MSI Team:

Does this issue affect other browsers?

Currently, Shadow DOM is only available in Blink, and this seems to be an issue specific to the implementation there. So only Chromium-based browsers (like Chrome and Opera) are affected.

[MSI Team]

Anyway, what is the benefit of using Shadow DOM on websites other than Google?

[sebastian]

Without shadow DOM, we have to inject a <style> element directly into the light DOM. However, this would break some websites (for example ​http://ptable.com/, see #309), when they rely on the order of their (style) elements. Generally the prospect of breaking something is smaller when using shadow DOM.

[MSI Team]

Verified working: yes?

[sebastian]

There you go. (Usually this field is only used by our QA team)

[MSI Team]

Thanks for fixing this issue, but now two more issues, which might be related. With Adblock Plus and no filterlists enabled, opening issues.adblockplus.org (ironically, Adblock Plus' own website) displays a corrupted, mostly broken page. Additionally, when opening the Blogger console, clicking the gear icon, and clicking Send Feedback, Adblock Plus with no filterlists enabled blocks Send Feedback.

[mapx]

yep, one more domain to add
blogger.com

[sebastian]

Can we please open a new issue? The fix here already has been released with Adblock Plus 1.9.

[mapx]

done ==> #2687