Page MenuHomePhabricator

Highlighting for currently selected statement makes property unclickable and causes overlap with constraint violations popup
Closed, ResolvedPublic

Description

Main components:

  • COMPONENTS

User story:
As an editor, I want to visit links to specific statements (i.e. with a statement ID in the URL hash) without the page behaving weirdly.

Problem:
When you visit an item URL with a statement ID in the hash as a parameter, there are two problems:

  1. The property of that statement (Commons Creator page in the following screenshot/example) becomes unavailable for interaction: the cursor doesn’t change when hovering over it, and clicking it does nothing.
  1. If the statement has constraint violations, they will be shown below the property of the next statement:

Screenshot 2021-06-28 at 15-42-29 Louis Huard.png (237×577 px, 21 KB)

Example:
https://www.wikidata.org/wiki/Q21555912#Q21555912$E913B641-45F4-412C-9F5D-05DEE3FC072B

Solution:

  • Ideally, we want to keep the DOM untouched to minimize the risk of stuff breaking.
  • Instead, we will try via CSS only:
    • Layout changes so that the highlighted area only covers the part of the statement right of the property.
    • This might still risk breaking the layout of some gadgets.

Mockup:

image.png (637×785 px, 50 KB)

Notes:

Acceptance criteria:

  • The property is clickable.
  • The constraints popup isn’t hidden behind other parts of the page.
  • DOM is unchanged.

Open questions:
Do we need to announce this as it may break the layout of some gadgets?

Community communication:
Who we needs to keep in the loop and in what way:
Who this could be interesting for and in what way:

Original:
https://www.wikidata.org/wiki/Wikidata:Report_a_technical_problem/Archive/2022/01#Statements_without_properties_??

Event Timeline

Mormegil subscribed.

Just copying a note from my duplicate bug:

The problem seems to be impacted by a z-index: 1 declaration in the .wikibase-statementgrouplistview .wikibase-statementlistview .wikibase-statementview:target CSS rule. When I disable the z-index, the link becomes clickable.

Yes, but that z-index is there for a reason, the outline looks terrible without it:

Screenshot 2021-09-23 at 12-10-09 Louis Huard.png (143×932 px, 7 KB)

Oh, sure, I did not want to imply it should just be removed. It was only an observation intended to help with localizing the bug. (Even though probably unnecessary/self-evident, I guess, especially in this task where the original commit introducing the problem has been correctly identified already.)

The recent Wikidata common.css change to color deprecated/preferred rank has exacerbated this problem, because now the selected statement can make the property not just unclickable, but invisible, if it has a non-normal rank: the statement’s no-longer-transparent background covers the property name. Example:

Screenshot 2022-01-31 at 11-09-02 L 326-61.png (228×929 px, 19 KB)

The invisible property issue been fixed with this change to limit the background color to the main snak element.

Screenshot 2022-02-07 at 11-05-28 L 326-61.png (228×935 px, 21 KB)

I’m not sure if that’s a good solution for the “targeted statement” outline… though I have to say it looks less terrible than I feared:

Screenshot 2022-02-07 at 11-06-40 L 326-61.png (231×938 px, 21 KB)

Change 772498 had a related patch set uploaded (by Hoo man; author: Hoo man):

[mediawiki/extensions/Wikibase@master] statementlistview should not overlap the property

https://gerrit.wikimedia.org/r/772498

Change 772498 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] statementlistview should not overlap the property

https://gerrit.wikimedia.org/r/772498

Change 772498 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] statementlistview should not overlap the property

https://gerrit.wikimedia.org/r/772498

I just noticed that this breaks the highlighting of whole statement groups :( example:

Screenshot 2022-03-30 at 22-43-26 Douglas Adams.png (270×1 px, 26 KB)

Changing the selector from .wikibase-statementgrouplistview :target .wikibase-statementlistview to .wikibase-statementgrouplistview :target isn’t ideal either:

Screenshot 2022-03-30 at 22-44-26 Douglas Adams.png (278×1 px, 26 KB)

Lydia_Pintscher subscribed.

Not good. I'll reopen so we can look at it.

Change 775889 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/Wikibase@master] Fix outline for selected statement group

https://gerrit.wikimedia.org/r/775889

Change 775889 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Fix outline for selected statement group

https://gerrit.wikimedia.org/r/775889

I don’t know why this is back in the backlog – what’s left to do here?

Good question Lucas, thank you! @hoo I think we did this in the daily to indicate that you wanted to optimize or fix something before I resolve this, but I might be wrong. If you can remember, could you please add the info?