Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#2602 closed defect (fixed)

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

Reported by: mapx Assignee: sebastian
Priority: P3 Milestone: Adblock-Plus-1.9-for-Chrome-Opera-Safari
Module: Platform Keywords:
Cc: sebastian, greiner, MSI, Team, philll Blocked By:
Blocking: Platform: Chrome
Ready: yes Confidential: no
Tester: Verified working: yes
Review URL(s):

http://codereview.adblockplus.org/5852174588313600
http://codereview.adblockplus.org/5755650030174208

Description (last modified by 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

Change History (48)

comment:1 Changed 4 years ago by mapx

  • Cc greiner added

comment:2 Changed 4 years ago by mapx

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

Last edited 4 years ago by mapx (previous) (diff)

comment:3 Changed 4 years ago by mapx

  • Description modified (diff)

comment:4 Changed 4 years ago by philll

  • Summary changed from ABP breaks gmail to ABP for Chrome breaks gmail layout when trying to submit a feedback report to Google

comment:5 Changed 4 years ago by mapx

  • Description modified (diff)

comment:6 Changed 4 years ago by 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.

comment:7 Changed 4 years ago by mapx

  • Cc MSI Team added

comment:8 Changed 4 years ago by 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.

comment:9 Changed 4 years ago by sebastian

  • Review URL(s) modified (diff)

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.

comment:10 Changed 4 years ago by sebastian

  • Owner set to sebastian

comment:11 Changed 4 years ago by sebastian

  • Priority changed from Unknown to P3
  • Ready set

comment:12 Changed 4 years ago by sebastian

  • Milestone set to Adblock-Plus-for-Chrome-Opera-Safari-next
  • Resolution set to fixed
  • Status changed from new to closed

comment:13 Changed 4 years ago by 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.

comment:14 Changed 4 years ago by sebastian

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

Last edited 4 years ago by sebastian (previous) (diff)

comment:15 Changed 4 years ago by 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.

comment:16 Changed 4 years ago by 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.

comment:17 follow-up: Changed 4 years ago by 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?

comment:18 Changed 4 years ago by 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

Last edited 4 years ago by mapx (previous) (diff)

comment:19 Changed 4 years ago by mapx

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:20 in reply to: ↑ 17 Changed 4 years ago by sebastian

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

comment:21 Changed 4 years ago by 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?

comment:22 Changed 4 years ago by mapx

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

comment:23 Changed 4 years ago by sebastian

  • Review URL(s) modified (diff)
  • Status changed from reopened to reviewing

comment:24 Changed 4 years ago by mapx

  • Review URL(s) modified (diff)

MSI team is talking about feedback on productforums

comment:25 Changed 4 years ago by sebastian

  • Summary changed from ABP for Chrome breaks gmail layout when trying to submit a feedback report to Google to Shadow DOM breaks layout when using feedback dialog on Google's websites

comment:26 Changed 4 years ago by sebastian

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

comment:27 Changed 4 years ago by mapx

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

comment:29 Changed 4 years ago by 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?

comment:30 follow-ups: Changed 4 years ago by MSI Team

Does this issue affect other browsers?

comment:31 Changed 4 years ago by mapx

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

Last edited 4 years ago by mapx (previous) (diff)

comment:32 follow-up: Changed 4 years ago by MSI Team

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

comment:33 Changed 4 years ago by mapx

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

Last edited 4 years ago by mapx (previous) (diff)

comment:34 in reply to: ↑ 30 Changed 4 years ago by 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).

comment:35 follow-up: Changed 4 years ago by MSI Team

Update Review URLs?

comment:36 Changed 4 years ago by 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.

comment:37 in reply to: ↑ 35 Changed 4 years ago by sebastian

  • Review URL(s) modified (diff)

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.

comment:38 in reply to: ↑ 32 Changed 4 years ago by 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.

comment:39 in reply to: ↑ 30 Changed 4 years ago by 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.

comment:40 Changed 4 years ago by MSI Team

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

comment:41 Changed 4 years ago by 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.

comment:42 Changed 4 years ago by MSI Team

Verified working: yes?

comment:43 Changed 4 years ago by sebastian

  • Cc philll added
  • Verified working set

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

comment:44 Changed 4 years ago by 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.

comment:45 Changed 4 years ago by mapx

yep, one more domain to add
blogger.com

comment:46 Changed 4 years ago by mapx

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:47 Changed 4 years ago by sebastian

  • Resolution set to fixed
  • Status changed from reopened to closed

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

comment:48 Changed 4 years ago by mapx

done ==> #2687

Note: See TracTickets for help on using tickets.