Page MenuHomePhabricator

Highlight the important jump mark letter by making it bold
Closed, ResolvedPublic8 Estimated Story Points

Description

Problem:
As a Wikipedia reader, I sometimes want to know the source of a statement. When I click on the footnote indicator (e.g. [12]), I am led to the references section and see the source. But if I want to continue reading the article, and the footnote was mentioned multiple times in the article, I have no idea which of the jump marks to click to get back to my reading position.

Solution
Highlight the jump mark where the reader comes from by making it bold.

Mock:

Bildschirmfoto 2018-05-14 um 13.49.25.png (60×242 px, 9 KB)

  • Please note that the arrow you see in the mock is the German implementation. In en-wiki it is a caret (^), and the way this is being represented in all of the wikis should not change.
  • Please don't pay attention to the blue background of the letter. Effectively, the whole line will be blue because it is in focus (as the user just jumped down to it)

Acceptance Criteria
GIVEN I am on an article page
AND a footnote is mentioned multiple times
WHEN I click on its second mention
THEN the page shows the footnote in the reference section
AND the jump mark that leads back to the clicked footnote is bold.

  • When people scroll back up the highlighting may persist
  • There may always just be one highlighted letter, the last one that people jumped to.
  • When people follow the arrow or the highlighted letter, highlight the reference where they land on the page. This is the current behavior, so you might not need to do anything, but make sure it still works.

Notes

  • The plan is to implement much of it in css, as currently reference highlighting is done through pure css. Some investigation needs to be done in that regard
  • For the CiteExtension it is pretty important to work in TDD mode

Event Timeline

Lea_WMDE triaged this task as Medium priority.Sep 24 2018, 12:02 PM
Lea_WMDE created this task.

First findings here:

  • CSS :target could be used to make the highlighting happen, this then would work without JS
  • this means that the fragment then points to the a element of the "back link" rather then the whole li
  • we should try make the li still highlighted

I did a quick hack that contains all we talked about during lunch. We forgot the fact that we need to remove the extra class name, otherwise multiple letters get highlighted. I added this.

<meta charset="UTF-8">
<style>
:target {
	background: rgba( 100%, 0%, 0%, 0.2 );
}
li:target .extra {
	background: yellow;
}
</style>
<p><a id="ref-1" href="#note-1">[ref-1]</a>
<a href="#References">CSS</a> is awesome!
<a id="ref-3-a" href="#note-3">[ref-3-a]</a>
<p><a id="ref-2" href="#note-2">[ref-2]</a>
<p><a id="ref-3-b" href="#note-3">[ref-3-b]</a>
<h2 id="References">References</h2>
<ul>
<li id="note-1"><a href="#ref-1">back</a> note-1
<li id="note-2"><a href="#ref-2">back</a> note-2
<li id="note-3">
	<a id="note-3-a" href="#ref-3-a">back to a</a>
	<a id="note-3-b" href="#ref-3-b">back to b</a>
	note-3
</ul>
<script>
var links = document.getElementsByTagName( 'A' );
for ( var i in links ) {
	var sourceElement = links[i];
	if ( !sourceElement.href ) continue;
	var hashPosition = sourceElement.href.indexOf( '#' );
	if ( hashPosition === -1 ) continue;
	var targetId = sourceElement.href.slice( hashPosition + 1 );
	var targetElement = document.getElementById( targetId );
	if ( !targetElement ) continue;
	if ( targetElement.nodeName !== 'A' ) continue;
	targetElement.addEventListener( 'click', function () {
		var links = document.getElementsByTagName( 'A' );
		for ( var i in links ) {
			var e = links[i];
			if ( e && e.href.indexOf( '#' + this.id ) >= 0 ) {
				removeExtraClassFromChilds( e.parentElement );
				e.className += ' extra';
				break;
			}
		}
	} );
}
function removeExtraClassFromChilds( parentElement ) {
	var childs = parentElement.childNodes;
	for ( var i in childs ) {
		var child = childs[i];
		if ( child.nodeType !== 1 ) continue;
		child.className = child.className.replace( ' extra', '' );
	}
}
</script>

Change 473795 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Cite@master] Highlight backreference jump marks by making them bold

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

Change 474134 had a related patch set uploaded (by WMDE-Fisch; owner: WMDE-Fisch):
[integration/config@master] Add quibble job for selenium tests on Cite

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

Change 474134 abandoned by WMDE-Fisch:
Add experimental selenium tests on Cite

Reason:
ok seems they run already and I did not get that ;-)

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

Change 474171 had a related patch set uploaded (by WMDE-Fisch; owner: WMDE-Fisch):
[mediawiki/extensions/Cite@master] Add browser test for highlighting of jump mark symbols

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

Change 473795 merged by jenkins-bot:
[mediawiki/extensions/Cite@master] Highlight backreference jump marks by making them bold

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

Change 474171 merged by jenkins-bot:
[mediawiki/extensions/Cite@master] Add browser test for highlighting of jump mark symbols

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

Can be tested on beta e.g. here: https://de.wikipedia.beta.wmflabs.org/wiki/Tacrin?purge=now ( cache might still hinder the feature from working that's why I applied the purge parameter. )

Lea_WMDE moved this task from Demo to Done on the WMDE-QWERTY-Sprint-2018-11-06 board.

Change 476237 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Cite@master] Make backlink highlighting robust for community customized HTML

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

Change 476241 had a related patch set uploaded (by WMDE-Fisch; owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Cite@wmf/1.33.0-wmf.6] Make backlink highlighting robust for community customized HTML

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

Change 476237 merged by jenkins-bot:
[mediawiki/extensions/Cite@master] Make backlink highlighting robust for community customized HTML

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

Change 476246 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Cite@master] Make backlink highlighting robust when "mw-cite-backlink" is missing

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

Change 476241 merged by jenkins-bot:
[mediawiki/extensions/Cite@wmf/1.33.0-wmf.6] Make backlink highlighting robust for community customized HTML

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

Mentioned in SAL (#wikimedia-operations) [2018-11-28T12:43:12Z] <zfilipin@deploy1001> Synchronized php-1.33.0-wmf.6/extensions/Cite: SWAT: [[gerrit:476241|Make backlink highlighting robust for community customized HTML (T205270 T210520)]] (duration: 00m 55s)

Change 476246 merged by jenkins-bot:
[mediawiki/extensions/Cite@master] Make backlink highlighting robust when "mw-cite-backlink" is missing

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

For the record, on frwiki I have changed the classname back to the regular name (refs Cite references link one, Cite references link many), as I think it's the only proper way to handle this. The classname just shouldn't had been allowed to be renamed in the first place. Triggered by the custom name, these subsequent JavaScript workarounds were in turn causing some bug in gadget ReferenceTooltips...

Change 543400 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Cite@master] Remove unused ResourceLoader module ext.cite.a11y

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

Change 543400 merged by jenkins-bot:
[mediawiki/extensions/Cite@master] Remove unused ResourceLoader module ext.cite.a11y

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