1652380 - Prevent animations in markup panel on DOM mutations when "prefers-reduced-motion" is set

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[MarjaE]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

I encountered a site which used javascript to flash some text. I tried to "inspect element."

I found this code in the page source:

<script type="text/javascript">
// <![CDATA[
var news=Array("navigate");
var cursor="_"; // set cursor
var delay=12; // seconds between each news item

/***************************\

• News Ticker Text Effect *
  (c) 2004-6 mf2fm web-design
• https://www.mf2fm.com/rv *
• DON'T EDIT BELOW THIS BOX *
  ***************************/
  var newsp, cursp, flash, item=0;
  window.onload=function() { if (document.getElementById) {
  var span=document.getElementById("news");
  while (span.childNodes.length) span.removeChild(span.childNodes[0]);
  delay*=1000;
  newsp=document.createElement("span");
  cursp=document.createElement("span");
  cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor));
  span.appendChild(newsp);
  span.appendChild(cursp);
  ticker();
  }}

function ticker() {
var i;
while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
newsp.appendChild(document.createTextNode(news[item].substring(0,1)));
for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100i);
if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100i);
setTimeout('flash=setInterval("cursp.style.visibility=(cursp.style.visibility=='visible')?'hidden':'visible'", 234)', 100*i)
setTimeout('clearInterval(flash)', delay);
setTimeout('cursp.style.visibility="visible"', delay);
setTimeout('ticker()', delay);
item=++item%news.length;
}

function linkit(q) {
var a,p,e,l;
p=news[q].indexOf("www");
e=news[q].indexOf(" ", p);
if (e==-1) e=news[q].length;
l=news[q].substring(p, e);
while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
newsp.appendChild(document.createTextNode(news[q].substring(0, p)));
a=document.createElement("a");
a.href="https://"+l;
a.appendChild(document.createTextNode(l));
newsp.appendChild(a);
newsp.appendChild(document.createTextNode(news[q].substring(e)));
}
// ]]>
</script>

Actual results:

I couldn't see the inspector window because there was too much flashing, not just in the main window, but in the inspector window.

Expected results:

The inspector window should not fire blinding pain at users. Maybe it use 2 or more lines to show these changing statuses.

The current behavior means malicious sites could disable the inspector window for photosensitive users by including flashing elements in their code. There may be ways to disable the inspector window for all users if they can including changing line counts, etc.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Razvan Caliman [:rcaliman]]

The code above is triggering mutations within the DOM which are highlighted in the markup view as they happen.
We can't disable those easily. They're intentionally added to draw attention to the changes.

Perhaps we can adjust the highlighting behavior for users with "prefers-reduced-motion" set.

I will put this on the backlog to consider. It will require coordination on UX.