Update available - get CSS or TagName of DIV

[francwalter]

Hallo

I have the old and tedious issue in some electron apps (Ferdium etc.) that my WhatsApp service has always after starting the (wrong) message with "Update available" which is not fixable with UserAgent change.
I think it must be possible to fix it with some css or javascript, which I could insert then.
But the problem is, that in a "real" browser, I never get this message, and in electron the "webview" element, where the whole web.whatsapp.com is inside, is not debuggable. The Developer Tools wont show into that webview.

I noticed in Chrome (actual version, Ubuntu 22) that I have also a message about allowing desktop messages, looks a bit similar, maybe it is the same skeleton for WhatsApp Web in the end?

<span class="_3P5VY" data-testid="chat-butterbar">
   <div class="_2XcXo">
      <div class="_2C_7j _22XJC">
         <div class="_384go _1-SiY">
            <span data-testid="alert-notification" data-icon="alert-notification" class="">
               <svg viewBox="0 0 48 48" height="48" width="48" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 48 48" xml:space="preserve">
                  <path fill="currentColor" d="M24.154,2C11.919,2,2,11.924,2,24.165S11.919,46.33,24.154,46.33 s22.154-9.924,22.154-22.165S36.389,2,24.154,2z M23.41,17.428V16.81c0-0.706,0.618-1.324,1.324-1.324s1.323,0.618,1.323,1.324 v0.618c2.559,0.618,4.412,2.823,4.412,5.559v3.176l-8.294-8.294C22.527,17.692,22.969,17.516,23.41,17.428z M24.733,33.134 c-0.971,0-1.765-0.794-1.765-1.765h3.529C26.498,32.34,25.704,33.134,24.733,33.134z M31.969,32.251l-1.765-1.765H17.233v-0.882 l1.765-1.765v-4.853c0-1.059,0.265-2.029,0.794-2.912l-2.559-2.559l1.147-1.147l14.735,14.736L31.969,32.251z"></path>
               </svg>
            </span>
         </div>
         <div class="_1Yy79 _1-SiY">
            <div class="_2z7gr">Über neue Nachrichten informiert werden</div>
            <div data-testid="" class="_2BxMU">
               <span class="f804f6gw">
                  <button class="i5tg98hk f9ovudaz przvwfww gx1rr48f shdiholb phqmzxqs gtscxtjd ajgl1lbb thr4l2wc cc8mgx9x eta5aym1 d9802myq e4xiuwjv" tabindex="0" type="button"><span class="edeob0r2 t94efhq2">Desktop-Benachrichtigungen einschalten</span></button>
                  <span data-testid="chevron-right-text" data-icon="chevron-right-text" class="l7jjieqr hymafltn k6y3xtnu fewfhwl7">
                     <svg viewBox="0 0 8 12" height="12" width="8" preserveAspectRatio="xMidYMid meet" class="" version="1.1" x="0px" y="0px" enable-background="new 0 0 8 12" xml:space="preserve">
                        <path fill="currentColor" d="M2.173,1l4.584,4.725L2.142,10.34L1.039,9.237l3.512-3.512L1,2.173L2.173,1z"></path>
                     </svg>
                  </span>
               </span>
            </div>
         </div>
         <div class="_3UDm1">
            <button class="i5tg98hk f9ovudaz przvwfww gx1rr48f shdiholb phqmzxqs gtscxtjd ajgl1lbb thr4l2wc cc8mgx9x eta5aym1 d9802myq e4xiuwjv" tabindex="0" type="button" aria-label="Schließen">
               <span data-testid="x" data-icon="x" class="_1K1wg">
                  <svg viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" class="" fill="currentColor" enable-background="new 0 0 24 24" xml:space="preserve">
                     <path d="M19.6004 17.2L14.3004 11.9L19.6004 6.60005L17.8004 4.80005L12.5004 10.2L7.20039 4.90005L5.40039 6.60005L10.7004 11.9L5.40039 17.2L7.20039 19L12.5004 13.7L17.8004 19L19.6004 17.2Z"></path>
                  </svg>
               </span>
            </button>
         </div>
      </div>
   </div>
</span>

So when I look at the <span class="_3P5VY" data-testid="chat-butterbar"> I think the class ("_3P5VY") is surely dynamically created and so it wont help to kill it (display:none) but that "data-testid" attribute with value "chat-butterbar" seems not dynamically created.
Could it help to grab it with DOM functions and hide it? E.g. with:

document.querySelectorAll('[data-testid="chat-butterbar"]')[0].style.display = "none";

What do you think?
Maybe you even know the real elements name and tags of these annoying and useless "Update available" messages?

I ask that here, because I guess you have the knowledge about such things, which I didnt find since a while (nobody could help me about that whereever I asked it).
My last idea was, to use JS to search through the website for just that text "Update available" (its in german acutally in my case, "Update verfügbar") and then to get the sourrunding element, and climb up as many levels as needed to hide the whole placeholder.
But as I cannot do it directly (webview problem) it would be fishing in the dark.

Thanks for hints, frank.

[francwalter]

Now I noticed, that I can indeedly look into the real code of WhatsApp Web in Ferdium, with:
View > Toggle Service Developer Tools (ALT+CTRL+SHIFT+I) and indeed I found the Update message in the chat-butterbar!
But my code didnt help, so I changed it in the service's user.js to:

module.exports = (config, Ferdium) => {
  // Write your scripts here
  // 2023-03-25: warten bis Seite fertig geladen ist...
  window.addEventListener("load", (event) => {
    document.querySelectorAll('[data-testid="chat-butterbar"]')[0].style.display = "none";
  });  
  // zur Sicherheit noch mal mit Timeout (delay in ms)
  let timeout;
  let delay = 15000;
  function waTimeout() {
    timeout = setTimeout(hideUpdateMessage, 15000);
  }
  function hideUpdateMessage() {
    document.querySelectorAll('[data-testid="chat-butterbar"]')[0].style.display = "none";
  }
};

So first the display none should wait till the site is fully loaded and then (to be sure) again the same display none after 15 sec. with setTimeout function.
I cannot say if it works yet, because always when reload the service the Update nagscreen is gone (not for good), so I have to wait.
Will tell if it works here and at other spots, where I asked in vain for hints about that 😄
Strange that never anybody told me about the Service Dev Tools, I was sure I could not see inside the html of the webview element!
See ferdium issue #572 for the working code (with setInterval).

[vednoc]

It's probably not ideal to hide all alerts. In that case, I suggest injecting a simple style element which contains the following CSS code:

[data-testid="chat-butterbar"]:has([data-icon="alert-update"]) {
    display: none !important;
}

That makes this workaround pretty trivial. I tested it from my browser and everything worked pretty well.

[wefalltomorrow]

It's probably not ideal to hide all alerts. In that case, I suggest injecting a simple style element which contains the following CSS code:

[data-testid="chat-butterbar"]:has([data-icon="alert-update"]) {
    display: none !important;
}

That makes this workaround pretty trivial. I tested it from my browser and everything worked pretty well.

Is it possible to add this into the official releases? I'm not sure how to do add it to the CSS myself.

[francwalter]

I have to add now, that without the Timeout function, after start of ferdium, the Update message keeps displaying. So I added again the timeout. All code now in user.js for WhatsApp service:

module.exports = (config, Ferdium) => {
  [data-testid="chat-butterbar"]:has([data-icon="alert-update"]) {
    display: none !important;
  }
  // 2023-05-26: von: https://github.com/TheGoddessInari/hamsket/issues/75#issuecomment-1555946206
  const interval = setInterval(hideUpdateMessage, 1000);
  function hideUpdateMessage() {
    const updateMessage = document.querySelector('span[data-testid="chat-butterbar"]');
    if (updateMessage !== undefined) {
      updateMessage.style.display = "none";
      clearInterval(interval);
    };
  };  
};

I changed my code to the one from @jschiefner because it is much better 👍 thanks, Jonas ❤️
Read it there: Whatsapp update available #75