For now, we can see the issue of the selected element, but instead, show all issues in the document in the compatibility pane.

Hi Victoria!
As I made 1st prototype that shows all compatibility issues in the document we are browsing.
The added information is node information that causes the issue.
Could you check please?

This is looking great!

I see that the errors are being organized by element here rather than by property/value (with the "Occurrences" sections) - what's the reason for that change?

Ideally, we would also have both Selected Element and All Issues sections as seen in the latest mockup. Needinfoing Martin to make sure we're all on the same page :)

Thank you very much, Victoria!
Oh, indeed! I had mistaken the way to show :)
I'll change to make groups by property/value.

And regarding Selected Element.
I had thought as we will show the warning on the ruleview (GSOC project), this pane will not be needed.
But yes, I also would like to know Martin's opinion :)

Hi Victoria, Martin!

I have updated the UI.

1. Show all issues with issues on a selected element together.
2. Group issues by property/value.

And, as I attach a video, please check the interaction as well.
Thanks!

Thanks Daisuke, this looks great!

I like the grouping by property/value. This should help us to reduce duplication. Regarding "selected element", I think it makes sense to have it. Once we have the inline warnings we can still decide to remove it, though I don't see a big issue in having both.

Can't wait to flip the pref on this one! 👏

Hi Victoria, Martin!
I attach a new video that navigates to youtube.com.
As you can see, in the example, the time when display the first issue takes about 7 sec after navigating.
However, actually the tool is processing.
Thus, I thought we need to add something like throbber here, what do you think?
And if we need that, where do you think we should display?

Yes! This does look fantastic!

I think it's fine to keep the "Selected Element" even after we have the GSoC feature because this panel works as a complete standalone tool with all the info together.

The Accessibility panel's "Check for Issues" currently has a basic loading screen with progress bar - maybe you could borrow that for the first launch of this feature.

Thank you very much for the information, Victoria!
Okay, I'll try to show the progress bar until the first issue will be displayed.

To avoid storing declarationBlocks in reducer.
The reason why I held the information is because had thought that want to update
as soon as possible when change the target browser.
However, as it seems that to update the target browser is not so frequently,
remove the information to reduce the memory.

Depends on D64305

Depends on D64306

Depends on D64307

Depends on D64308

Depends on D64309

Depends on D64310

Depends on D64311

Depends on D64312

Depends on D64314

Depends on D64315

Depends on D64316

Depends on D64317

Depends on D64318

Depends on D64319

Depends on D64533

Depends on D64534

Hi Victoria!
I have tried a throbber that also is used in the accessibility panel instead of a progress bar.
Because to know the number of processing takes more some time and be complex the mechanism a bit. And it seems this might be enough if we want to know only whether it is processing or not.
What do you think??

Hi Daisuke, that looks good! I know progress bars are tricky so it makes sense to keep it simple. I'd suggest we hide the "No compatibility issues found" message as soon as the throbber appears. Otherwise, this seems great!

Thank you very much for taking a look, Victoria!
Yes, I will hide the message!

Depends on D64535

Depends on D65284

Backed out 19 changesets (bug 1615509) for node and ES failure.

Push that started the failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=292841918&resultStatus=superseded%2Ctestfailed%2Cbusted%2Cexception%2Crunnable&revision=c74ae992992f0edd2ce7313df706f2a646bd25e5

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=292841918&repo=autoland&lineNumber=695
ES lint: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=292841931&repo=autoland&lineNumber=332

Backout: https://hg.mozilla.org/integration/autoland/rev/8abcb30b61e2c202d34b19774e19fd9156b3bea1

https://hg.mozilla.org/mozilla-central/rev/f67873989fcd
https://hg.mozilla.org/mozilla-central/rev/5f78a5443663
https://hg.mozilla.org/mozilla-central/rev/af49cf9465dc
https://hg.mozilla.org/mozilla-central/rev/afdf29f4f9df
https://hg.mozilla.org/mozilla-central/rev/48a549b1e1b5
https://hg.mozilla.org/mozilla-central/rev/4f963ee21af7
https://hg.mozilla.org/mozilla-central/rev/664ab598f651
https://hg.mozilla.org/mozilla-central/rev/d0d42889e642
https://hg.mozilla.org/mozilla-central/rev/448b3a12fbb0
https://hg.mozilla.org/mozilla-central/rev/7e6fec746b47
https://hg.mozilla.org/mozilla-central/rev/9f36a6f85237
https://hg.mozilla.org/mozilla-central/rev/d0547562011d
https://hg.mozilla.org/mozilla-central/rev/be92dd7a0069
https://hg.mozilla.org/mozilla-central/rev/3c9a23c99e19
https://hg.mozilla.org/mozilla-central/rev/a37e0b3c5337
https://hg.mozilla.org/mozilla-central/rev/597c0b19571d
https://hg.mozilla.org/mozilla-central/rev/6442b6dbc71d
https://hg.mozilla.org/mozilla-central/rev/c72542e3da98
https://hg.mozilla.org/mozilla-central/rev/6b84773529d2