CODEWITHSUNDEEP
csssafaribootstrap-modalwebkitmutation-observers
McMurphy
McMurphy

Reputation: 1264

Listen for Safari Hide Distracting Items

I need to be able to take action if a Safari user has used the new "Hide distracting items" feature to remove a modal that required user interaction.

In the hope that it is, at least partially, done with DOM manipulation, I have set up a mutation observer to listen for changes.

        console.log("observing")
        new bootstrap.Modal($('#fred')).show();
        const observer = new MutationObserver((mutations, myInstance) => {
        mutations.forEach((mutation, myInstance) => {

                console.log(mutation.type, mutation.target.id, mutation.attributeName);
                console.log(mutation.target.classList, mutation.target.style)
 //                   myInstance.disconnect()
        })
    })
    observer.observe(document.getElementById('parent-panel'), {
        attributes: true,
        childList: true,
        subtree: true
    });

The problem I have is not knowing how Safari implements the feature. And also the memory of what has been hidden.

Any ideas/pointers?

Or load this on Safari then hide the distracting inner/absolute div and please tell me what shows up in the DEV tools console: -

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", () => {
        console.log("observing")
        const observer = new MutationObserver((mutations, myInstance) => {
        mutations.forEach((mutation) => {

                console.log(mutation.type, mutation.target.id, mutation.attributeName);
                console.log(mutation.target.classList, mutation.target.style)
 //                   myInstance.disconnect()
            })
        })
        observer.observe(document.body, {
            attributes: true,
            childList: true,
            subtree: true
        })
//      document.getElementById("abs").remove()

    })
</script>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute" id="abs">This div element has position: absolute;</div>
</div>

</body>
</html>

I have to say it's not looking good :-(

            myInstance.disconnect()
            if (document.getElementById("abs") == null) {
                hostDiv.innerHTML += '<br>rel DIV has gone'
            } else {
                hostDiv.innerHTML += '<br>rel DIV still there'
                hostDiv.innerHTML += '<br>type = ' + mutation.type + " target = " +  mutation.target.id + " attr = " + mutation.attributeName
                console.log(mutation.type, mutation.target.id, mutation.attributeName);
                console.log(mutation.target.classList, mutation.target.style)
            }

Upvotes: 0

Views: 191

Answers (1)

Tatachiblob
Tatachiblob

Reputation: 176

This might not be the answer you are looking for, but to give you some pointers, Safari browser adds an "External Style Sheet" for your page.

Let's say in stackoverflow, and I deleted this "The Overflow Blog " on the right side.

high lighted div

It will generate this css.

DIV[data-tracker='cb=1'] {
    display: none !important;
}

added stylesheet

However, if I delete this extra stylesheet, the contents will still be hidden, and I assume something within Safari holds data to hide the chosen content. The stylesheet is most likely to remove the element from the browser so that "collectives" will move up.

I guess that's why your code couldn't detect any changes since there weren't any actual DOM manipulations.

Hopefully you find this helpful.

Upvotes: 1

Related Questions