Nested contextual links triggers don't work well

.

There are actually a lot of bugs there.

If you create a view with show content: full content, you'll get two or more (depending on row quantity) edit buttons, which cause this bugs:
1. if you click on the view's edit button, it can be under the the edit of the first row (image 1)
2. if you have no title for the view - first row's edit can cover the view's edit, so you can't get to it.
3. if you click on the row's edit button:
3_a. it will trigger the dropdown of the parent edit button in the same time
3 _b. if you unhover and try to click the view's edit button, it will appear for a split second and the disappear.
4. if you open element inspector in chrome (tested on v.24 on Ubuntu) and reload the page with inspector opened, you'll trigger all the edit links to be visible (image 2).
4_a. clicking the edit in toolbar in this case does nothing
4_b. if you click any edit button and hover a link in dropdown - it won't get a background image

Though enabling editing by clicking the button in the upper toolbar fixes some issues (3b).

Tested on Chrome v.24 on Ubuntu
I think most of this behaviors is present on other browsers.

Problem reproduced:

I'll fix this tomorrow.

I can reproduce everything described in #2, with the exception of step 4: the pencil icons appearing upon reloading the page with Chrome's inspector open.

The root cause for this is that contextual.module has never actually (AFAICT) been consciously designed to work with nested contextual regions. I.e., this particular problem also exists in the Drupal 7 implementation:

So, I can solve the particular problems at hand here, but what we should really do is truly think through how to make nested contextual links work well. Because the Drupal 8 front page may now be a View, but it's a View with a title, which causes the contextual links trigger for the view to be rendered higher than the contextual links trigger for the node it contains. However, imagine it without a title like the Drupal 7 example above, and you again have the same problem:

Here's a patch that fixes the direct interaction problems described in #2. Before and after screencasts (10 seconds each) attached (compressed in .zip files because it would otherwise not be accepted by d.o).

Image that I'm adding to #6.

Bojhan pointed out that the problems in #2 appear to be a regression of #1216776: Two nested contextual links regions are active, when the outer region is hovered.. Already included in the updated issue summary.

the greater problem/root cause: contextual links not being consciously designed for nested usage

Tagging VDC, because node teasers within a View is a common use case and affects the majority of D7 sites too. With Views in D8 core, we need to decide to either not add contextual links to views, or consciously design contextual links for nested usage.

After talking to Bojhan and yoroy about this, it seems the only way to solve this is by automatically inserting an offset when appropriate. It's the "when appropriate" part that is tricky. A 10-second screencast of the simplest solution I could think of (yet still hacky) is attached as "hacky proposed solution".

Do we *really* want to calculate whether the two container divs are at the same position on the screen (the same "offset")? If we do, then the result looks less annoying (because it only makes changes when it's really needed). Another 10-second screencast demonstrates this, which is slightly more complex code wise, but looks less hacky, attached as "slightly less hacky proposed solution".

yoroy, Bojhan and I agreed that we'd only check for *two*, not *n* "nested contextual links that happen to have overlapping tops for their contextual regions".

I think we should go with the less hacky, primarily because we don't want non-problematic contextual links to move around. You should probally check how this behaves when there are many contextual links on the page.

The less hacky one indeed because it doesn't affect non-nested contextual links.

Alright, #11 implemented based on feedback in #12 & #13.

This patch now addresses all problems raised, including the broadened problem scope introduced in #6, after solving the initial problem.

I made insignificant coding standard and comment changes (see the interdiff). Otherwise this patch is good to go.

Bot says green and my changes were insignificant, so I'm going to mark this as RTBC.

Thanks, good changes!

While testing this I ran into a situation where more than two levels of nesting were required:

This is a the front page view, exposed as a block, showing a node inside. The two overlapping ones are a contextual link for Views (edit view) and a contextual link for blocks (Configure block).

However, discussing w/ Alex and xjm, this isn't really the fault of this patch; Views should be doing what Menu module does and combining its own contextual link into the one from the Block, in which case 2 levels of nesting that this patch checks for would be sufficient.

We also found some really funky "flicker" behaviour with contextual links as a part of testing this patch, but since it's an existing bug in HEAD, we'll file an issue (and video!) separately for that.

So given that this patch does what it says it does, committed and pushed to 8.x. Thanks!

Let's get a follow-up issue for that views bug, and a follow-up for the "flicker" (if it doesn't already exist).

Here's the second one: #1960490: Random "flicker" with contextual links, depending on mouse direction when clicking (true story!)

So I can't reproduce what's in the screenshot in #18. However, I can confirm that the "Edit view" contextual link never appears in the block contextual links. I'm guessing mine are overlapping entirely and @webchick's were overlapping only partially.

The only VDC issues related to contextual links that I find all seem to be unrelated:
#1933426: [Followup] Fix contextual links on views (followup for a previous JS fix)
#1877376: Change notice: Improve Views UI text for the contextual links display setting
#1933766: Move all contextual links code to views_ui module

Added the remaining follow up requested in #18 / #22: #1961828: Views block displays fail to render the "Edit view" contextual link.

Nice one guys!

I faced the same issue in D7 trying to render node entities using Views, inside a Bootstrap Carousel block (multiple sub-contextuals). The node edit menu would sit on top of the block configure menu.

The code will adjust the parent wrapper, and move down the sub-contextual wrappers.

Here is a D7 backport based on @jessebeach above: https://www.drupal.org/node/1914966#comment-7248342

Thanks for the D7 backport @lcampanis! There is a console.log left behind, however. Attached patch is exactly the same, sans console.log.

Oops. didn't get it all. This one should do it.

Works great! Thank you.

Would be nice if D7 had this fixed too...
Patch #28 works for me on 7.28

PS:
Another working JS solution for that problem can be found on Stack Exchange:
http://drupal.stackexchange.com/questions/117719/css-fix-for-stacked-gea...

#28 working great for Drupal 7.

I tested this patch and am seeing the nested contextual links become significantly misaligned, even when they don't overlap with each other at all... see screenshots below.

Also, this could probably use a more in-depth code review, since the code wound up looking pretty different from what went into Drupal 8.

Before patch:

After patch:

I put the code from
http://drupal.stackexchange.com/questions/117719/css-fix-for-stacked-gea...
into a patch (i simply appended the code, which i guess is not really the correct drupal way).

This code leaves nested but non- overlapping gears alone, and moves them if they DO overlap.
It's less code, and far easyer to read.

For testing, i made a view with 2 blocks.
One with nested but non-overlapping links, one where the links overlap.
The overlap is created by removing the title, plus some css in the view's head, see it's export, list-of-views-view.txt

Screenshots taken with the patch applied:

Tested patch in #42 but encountered the following issue:

• Contextual link menus lower in the page hierarchy are covered by ones further up.

In my case I have a panel page, which contains a contextual menu (links: "edit panel"). Within the panel page is a views pane, also with a contextual menu (link: "Edit view", "Order view"). The view lists nodes. Each node also has a contextual menu. If the View title is removed then the node contextual link is overlapped by the view panel contextual menu. I have attached two images on show what happens when the view title is present, and the other which shows the contextual links with out the view title present.

Would it make more sense to adjust the horizontal positioning of overlapping elements rather than the vertical position?

The patch from #41 just worked with 1 level of nesting, just changing the if- to a while- statement should make it work with whatever depth. I tested it with three stacked gears.

Horizontal or vertical shifting makes no difference with the given problem. Which one would be better depends on the theme and the element's content, i think it's almost impossible to find a always perfectly good looking solution.

One thing to consider would be to also move gears which are only partially overlapping.

It worked for me

I tried the patch from #43 but I'm still getting contextual links on top of each other.

e.g. If I mouse from the left and click, I get the node contextual menu

but if I move over from the right I get the view contextual menu

Edit: I can't see how to delete this post but I can put some CSS padding on the view to separate them.

#44 is working well for me -- thanks!

#44 works for me!!

#44 is not working for me. We are using bootstrap theme as base theme and the overlapping is still there.
I am attaching a new patch.

Patch from #53 had no visible effect for me, #44 worked though.

For what it's worth we're using a custom Omega-derived theme.

I had Mini-Panels config and Node (view/edit) gears icons overlapping each other and was not able to click the underlying icon. This little css fixed it for me:

.contextual-links-wrapper + .contextual-links-wrapper {
  margin-right: 3em;
}

Anyone able to upload a theme/site with the bug or adding a test?