Hide add paragraph buttons when viewing behaviors perspective

After committing #2877847: Perspective tabs misbehave when multiple paragraphs fields we can continue with this.

Changed .js a little bit, uploading screenshot.

If we define this as favorised, then we need to test cover it.

This should wait for this one #2877847: Perspective tabs misbehave when multiple paragraphs fields

The other issue was fixed long ago... :-)

With variable length, the related issue about scrolling is even more important.

Reroll, cleaner approach for adding the class and better class name.

Will look at tests.

Here are tests and removed the changes from the old widget, that doesn't have behaviors, no point in changing that.

I tested it with default Paragraphs install based on Paragraphs Collection (with Dropbutton as add mode) and it didn't work.

In fact this is the problem:

    if (count($options) > 1 && $add_mode == 'dropdown') {
      $add_more_elements = $this->buildDropbutton($add_more_elements);

The additional attribute added before is then overwritten.

Also as discussed, this works very well with the collapse all mode and the patch for sticky perspective tabs... Then switching the tabs leads to persistent scroll position as nothing above the viewport changes in height. But as soon as container like items above the viewport are expanded, the scroll position is messed up and you loose orientation. And now it's even harder to identify the item again.

Autocollapse is an optional thing, so this would be a UX degradation for most users IMHO if we get the sticky perspective tabs without scroll preservation.

The problem is also: If we would output the Paragraph summary on the behavior tab, it is likely outdated (or even empty for a just added Paragraph).

I would vote for this sequence:
- #2825581: [META] Introduce a sticky header
- #2901995: Scroll to the right position after edit / collapse
- (this issue) #2882783: Hide add paragraph buttons when viewing behaviors perspective

The class should be added to the button now, and properly hidden on the behavior tab.

I am wondering, why don't we hide and show these things with css?

   if ($parWidget.find('#content').hasClass('is-active')) {
        $parWidget.find('.layout-region-node-main').addClass('content-active');
        $parWidget.find('.paragraphs-content').show();
        $parWidget.find('.paragraphs-behavior').hide();
        $parWidget.find('.paragraphs-add-wrapper').show();
      }

      if ($parWidget.find('#behavior').hasClass('is-active')) {
        $parWidget.find('.layout-region-node-main').addClass('behavior-active');
        $parWidget.find('.paragraphs-content').hide();
        $parWidget.find('.paragraphs-behavior').show();
        $parWidget.find('.paragraphs-add-wrapper').hide();
      }

This should work.

This patch should apply.

Added some improvements and code fixes.

Rerolled again.

I missed the button wrapper for the case when there is only one paragraph to add. This should make the test pass.

This should fix the failing test.

Soft-postponed on #3025693: Scroll to the right position after switching Behavior/Content tabs

Reroll.

Committed!