Fix oder Ersatz für Addon "URL Tooltip WE"

Speravir

Das Addon URL Tooltip WE funktioniert seit Fx 65 nicht mehr hundertprozentig: Die standardmäßigen Tooltips werden nicht mehr unterdrückt, sondern legen sich über den Tooltip des Addons.

Kann man das wieder reparieren (durch ergänzenden Code) oder das Addon gleich durch ein UserchromeJS-Skript ersetzen? Bei Ardiman findet man ein altes, bei mir nicht mehr funktionierendes Skript URLTooltip_mod.

Das Addon scheint keinen aktiven Autor mehr zu besitzen, so dass ich darin keine Hoffnung setze. Innerhalb des Addons findet man in der Datei content.js übrigens das hier, was wohl der nicht mehr funktionierende Code ist:

Code

disableDefaultTooltips(nodeList) {
      // Some black magic to disable default title tooltip
      // without disturbing original "title" attribute.
      // There is no way to access to browser.chrome.toolbar_tips
      // or agent css sheet from WebExtension. =\
      if('parentTitle' in nodeList){
        if(!nodeList.length) nodeList = [nodeList.anchor];
        nodeList[0].appendChild(magicComment);
      }
/* gekürzt */
    },
    enableDefaultTooltips(nodeList) {
      if('parentTitle' in nodeList){
        if(magicComment.parentNode)
          magicComment.parentNode.removeChild(magicComment);


        if(!nodeList.length) nodeList = [nodeList.anchor];
      }
/* ebenfalls gekürzt */
    },

Alles anzeigen

Meine kläglichen Versuche mit CSS funktionierten entweder zu gut (Tooltips völlig unterdrückt, dann aber überall im Browser) oder gar nicht (ich wollte den Z-Index beeinflussen, was sowieso am rechten Seitenrand nur teilweise gehen würde).

Endor

Ich kenne dieses Script hier, damit werden aber alle Tooltips angesprochen.
Vielleicht kannst Du es Dir ja so anpassen wie Du es brauchst:

CSS

// ==UserScript==
// @name           tooltipStyling.uc.js
// @description    tooltipStyling
// @include        *
// ==/UserScript==
(function () {
let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);


let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
tooltip,
#tooltip,
.tooltip,
#aHTMLTooltip {


  -moz-appearance: none !important;
  background-color: #f7f2bd !important;
  color: #000000 !important;
  padding: 2px 12px !important;


} 
`), null, null);


sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Mfg.
Endor

Speravir

Zitat von Endor

Ich kenne dieses Script hier, damit werden aber alle Tooltips angesprochen.

Das Skript funktioniert, was schon ein Unterschied zum anderen bei Ardiman zu findenden ist, aber ist nicht das, was mich interessiert. Es geht darum, dass mit dem Addon die Webadresse direkt am Mauscursor eingeblendet wird, und das in einer zweiten Zeile unterhalb des Titelattributes, das auch vom normalen Tooltip angezeigt wird (welcher bis Fx 64 unterdrückt wurde, wenn die zwei sich ins Gehege kamen). Wenn es kein Titelattribut gibt, dann wird nur die Adresse eingeblendet. Genau genommen bräuchte es das Skript aber gar nicht, weil das auch allein mit CSS geht – ich hatte ja angedeutet, dass ich die Tooltips temporär ausgeblendet hatte, nämlich mit display:none.

Zitat

Vielleicht kannst Du es Dir ja so anpassen wie Du es brauchst:

Nein, das kann ich leider nicht. Ich vermute ja, das ~~man~~ jemand mit Scripting-Kenntnissen den Code nehmen und adaptieren kann, der standardmäßig genutzt wird, um die Webadressen im Statusleistentooltip anzuzeigen, aber für mich ist das zu hoch.

aborix

Teste dieses Skript:

Code

(function() {


  if (!window.gBrowser)
    return;


  var frameScript = function() {


    addEventListener('pageshow', function(event) {
      var documentElement = event.target.documentElement;


      documentElement.addEventListener('mouseover', function(event) {
        var element = event.target;
        var elementsWithTitle = [];
        while (element != documentElement && !element.href) {
          if (element.hasAttribute('title')) {
            elementsWithTitle.push(element);
          };
          element = element.parentNode;
        };
        if (element.href && !element.checkedTooltip) {
          element.checkedTooltip = true;
          if (element.getAttribute('href') != '\u0023' && element.protocol != 'javascript:') {
            if (element.title) {
              element.title += '\n' + element.href;
            } else {
              let length = elementsWithTitle.length;
              if (length > 0) {
                element.title = elementsWithTitle[length - 1].title + '\n' + element.href;
              } else {
                element.title = element.href;
              }
            };
            for (let elem of elementsWithTitle) {
              elem.removeAttribute('title');
            };
          };
        };
      });


    });


  };


  var frameScriptURI = 'data:, (' + frameScript.toString() + ')()';
  window.messageManager.loadFrameScript(frameScriptURI, true);


})();

Alles anzeigen

Speravir

Zitat von aborix

Teste dieses Skript:

Aborix, wenn ich eine Frau wäre, würde ich jetzt sagen „Du bist ein Schatz!“
Das ist genau das, was ich mir gewünscht habe. Echt danke dafür! :klasse:

Ich hab dem Skript lokal den Namen Tooltip_with_URL.uc.js gegeben.

aborix

Bitte, gern geschehen.

Das Skript eignet sich etwas verändert auch für Greasemonkey u. dgl., es ist sogar etwas einfacher:

Code

var documentElement = document.documentElement;
documentElement.addEventListener('mouseover', function(event) {


  var element = event.target;
  var elementsWithTitle = [];
  while (element != documentElement && !element.href) {
    if (element.hasAttribute('title')) {
      elementsWithTitle.push(element);
    };
    element = element.parentNode;
  };


  if (element.href && !element.checkedTooltip) {
    element.checkedTooltip = true;
    if (element.getAttribute('href') != '\u0023' && element.protocol != 'javascript:') {
      if (element.title) {
        element.title += '\n' + element.href;
      } else {
        let length = elementsWithTitle.length;
        if (length > 0) {
          element.title = elementsWithTitle[length - 1].title + '\n' + element.href;
        } else {
          element.title = element.href;
        }
      };
      for (let elem of elementsWithTitle) {
        elem.removeAttribute('title');
      };
    };
  };


});

Alles anzeigen

Speravir

Zitat von aborix
Das Skript eignet sich etwas verändert auch für Greasemonkey u. dgl., es ist sogar etwas einfacher:
Code
var documentElement = document.documentElement;

Aha. Ich dachte immer, dass man Greasemonkey & Co. nur auf Webseiten anwenden kann (über @include oder @match im nicht bei dir, aber in Endoors Version vorhandenen Kommentarblock). Oder ist das genau dafür geschrieben und deshalb einfacher als das UserChrome-Skript und würde also die Tooltips nur auf Webseiten ändern?

Edit: etwas zu schnell abgeschickt – im Violentmonkey ein neues Skript angelegt, deinen Code eingefügt und gesehen, dass es tatsächlich funktioniert. OK, sonst hättest du es auch nicht gepostet …

aborix

Zitat von Speravir

Oder ist das genau dafür geschrieben und deshalb einfacher als das UserChrome-Skript und würde also die Tooltips nur auf Webseiten ändern?

Ja, einschließlich about:-Seiten und lokale HTML-Dokumente, wobei ich nicht weiß, wie weit das mit GM usw. möglich ist. In der Browseroberfläche werden Tooltips nicht verändert. Die Links im Hilfe-Menü kämen dafür in Frage, sonst weiß ich jetzt nichts. Bei Lesezeichen und Chronik-Einträgen ist die Adresse ohnehin im Tooltip enthalten.

Zitat von Speravir

im Violentmonkey ein neues Skript angelegt, deinen Code eingefügt und gesehen, dass es tatsächlich funktioniert. OK, sonst hättest du es auch nicht gepostet …

Ich habe es tatsächlich nicht in GM usw. getestet, sondern nur in der Webkonsole und angenommen, das genügt. :wink:

Speravir

Zitat von aborix

Ich habe es tatsächlich nicht in GM usw. getestet, sondern nur in der Webkonsole und angenommen, das genügt. :wink:

Du Schlingel! :wink:

Aber ein anderes Problem ist mir aufgefallen. Du konntest es nicht wissen und testen, weil ich nichts davon geschrieben habe: Ich nutzte bisher auch Popup ALT Attribute. Das funktioniert aber nicht mehr mit beiden Skript-Varianten von dir. Falls Du es dir mal ansehen willst, auf dieser Testseite sollte im dritten Bild (dem sehr bunten) der Alt-Text als Tooltip erscheinen. Mit den Skriptvarianten erscheint da ausschließlich die Linkadresse. Im vierten wie im zweiten Bild wird korrekt der Titel angezeigt und deshalb der Alt-Text auch mit Addon ignoriert.

Ich hatte mich übrigens schon länger gefragt, ob man das theoretisch auch per Skript erledigen könnte, dann aber sicher nur per Affen-Skript, also user.js.

Edit: O, es ist nicht ganz das, woran ich dachte, aber jemand hat tatsächlich bereits ein ähnliches Userskript geschrieben: Link Tooltips.

Endor

Kurze Frage, das Script aus Beitrag 4, funktioniert hier soweit gut,
hat aber einem kleinen Fehler, ich habe hier für das Forum einige Anpassungen mit CSS Codes
gemacht, zbs, Symbole bei den Schaltflächen usw., wenn dieses Script aktiv ist
verschwindet bei Berührung mit der Maus, die ganze Anpassung die ich gemacht habe.
Bilder:
[attachment=0]Bilder 11.png[/attachment]

sobald ich mit der Maus darüber fahre sieht es dann so aus:
[attachment=1]Bilder 10.png[/attachment]
CSS Anpassung ist weg.

Wenn ich dann die Seite wieder neu lade passt es wieder.
Hat jemand eine Ahnung woran das liegen kann?
Mfg.
Endor

aborix

Steht in deinem CSS-Code für den Antworten-Button so etwas wie

Code

[title="Antwort erstellen"]

Wenn ja, versuche es mit

Code

[title^="Antwort erstellen"]

Endor

Hallo aborix.
Prima, genau daran hat es gelegen, nun passt alles.
Vielen Dank!!
Mfg.
Endor

aborix

Bitte.
Wenn du das Skript nicht verwendest, kann der CSS-Code trotzdem so bleiben.

Endor

Hallo aborix.
Doch doch, ich verwende es ja. Finde es sehr praktisch.
Auch dafür ein vielen Dank.
:klasse:
Packe es in die Sammlung und wenn ich Zeit dazu finde, gebe ich es an Mithrandir weiter.
Natürlich nur wenn es Dir recht ist.

Mfg.
Endor

aborix

@ Speravir:

Mit diesem Skript wird auch der Alt-Text angezeigt:

Code

// userChromeJS


(function() {


  if (!window.gBrowser)
    return;


  var frameScript = function() {


    addEventListener('pageshow', function(event) {
      var document = event.target;


/********************************************************************/


      /* GM */


      var documentElement = document.documentElement;


      documentElement.addEventListener('mouseover', function(event) {
        var element = event.target;
        var elementsWithTitle = [];
        var elementWithAlt = null;
        while (element != documentElement && !element.href) {
          if (element.hasAttribute('title')) {
            elementsWithTitle.push(element);
          };
          if (element.alt) {
            elementWithAlt = element;
          };
          element = element.parentNode;
        };


        if (element.href && !element.checkedTooltip) {
          element.checkedTooltip = true;
          if (element.getAttribute('href') != '\u0023' && element.protocol != 'javascript:') {


            let title = element.title;
            if (!title) {
              let length = elementsWithTitle.length;
              if (length > 0) {
                title = elementsWithTitle[length - 1].title;
              };
            };
            if (title) {
              title += '\n';
            };


            let alt = '';
            if (element.alt) {
              alt = element.alt + '\n';
            } else if (elementWithAlt) {
              alt = elementWithAlt.alt + '\n';
            };


            element.title = title + alt + element.href;


            for (let elem of elementsWithTitle) {
              elem.removeAttribute('title');
            };
          };
        };


      });


/********************************************************************/


    });


  };


  var frameScriptURI = 'data:, (' + frameScript.toString() + ')()';
  window.messageManager.loadFrameScript(frameScriptURI, true);


})();

Alles anzeigen

Der Teil zwischen den langen Kommentarzeilen kann unverändert als GM-Skript verwendet werden.

Speravir

Zitat von aborix

@ Speravir:
Mit diesem Skript wird auch der Alt-Text angezeigt:

Grandios! Noch mal Danke! :klasse::klasse::klasse:

Und nebenbei zeigt mir das Skript, dass auf der oben verlinkten Testseite auch im zweiten Beispiel ein Alt-Attribut erzeugt wird, was ich noch gar nicht wusste. (Ich war kurz irritiert und wollte sehen, ob sich ein kleiner Fehler in das Skript eingeschlichen haben könnte.)

Zitat von Endor

Packe es in die Sammlung und wenn ich Zeit dazu finde, gebe ich es an Mithrandir weiter.
Natürlich nur wenn es Dir recht ist.

Ich hoffe, Du kommst dazu, auch die anderen Skripte, die aktualisiert wurden, weiterzureichen. Man verliert inzwischen echt den Überblick, wo was zu finden ist. Im Notfall sollten wir einen eigenen Thread zum Sammlern öffnen – oder wieder eine Seite in Google Docs.

Könntest du bitte auch die Variante mit Alt-Attribut in die Sammlung packen und für beide Varianten jeweils in einem Kommentar auf die Greasemonkey&Co-Möglichkeit hinweisen? (Wenn es dir lieber ist, mache ich per PN einen Formulierungsvorschlag.)

aborix

Mir ist inzwischen eingefallen, das letzte Skript zeigt den Alt-Text eines Elements nur an, wenn es auch mit einem Link verbunden ist. Du möchtest aber den Alt-Text immer sichtbar haben, auch wenn kein Link dabei ist, oder?

Speravir

Zitat von aborix

Mir ist inzwischen eingefallen, das letzte Skript zeigt den Alt-Text eines Elements nur an, wenn es auch mit einem Link verbunden ist. Du möchtest aber den Alt-Text immer sichtbar haben, auch wenn kein Link dabei ist, oder?

Ääähm, jetzt, wo Du es sagst, fällt mir das selbst erst auf. Ja, das wäre sinnvoll.

Etwas anderes, wo ich aber fürchte, dass es auf ein völliges Umschreiben des Skriptes hinauslaufen müsste:

Ein Markierung, wenn ausschließlich ein Alt-Attribut angezeigt wird, wäre gut. (Nur Titel ist Standard. Titel + Alt sieht man an den zwei Zeilen.) Vermutlich am einfachsten wäre, in dem Fall ein „'a: '“ (also mit Leerzeichen) davorzusetzen.

Ich weiß, ich könnte bereits im vorhandenen Skript sowohl „'t: '“ als auch „'a: '“ an den richtigen Stellen einfügen. Das würde ich tun, wenn nichts anderes möglich ist.

Viel mehr gefallen würde mir aber, wenn man irgendwie dem jeweiligen Tooltip ein „data-*“-Attribut, zum Beispiel data-hint="no-title", verpassen könnte, worauf man dann mit CSS zugreifen könnte (Farbe, Schrift …).

Update: Semantisch wäre wohl doch ein „x-*“-Attribut besser, das hatte ich nur nicht so schnell gefunden …
HTML5, Extensibility:

Zitat

Attribute names beginning with the two characters "x-" are reserved for user agent use and are guaranteed to never be formally added to the HTML language. For flexibility, attributes names containing underscores (the U+005F LOW LINE character) are also reserved for experimental purposes and are guaranteed to never be formally added to the HTML language.
Pages that use such attributes are by definition non-conforming.

Der letzte Satz macht aber nicht gerade Mut. Dann würden mit den Skript plötzlich alle Seiten Im Quirks-Modus laufen …

aborix

Das folgende Skript kennzeichnet einen Alt-Text, wenn kein Title-Text vorhanden ist. Es benützt, wie auch die vorherigen Skripte, das Title-Attribut für den Tooltip. Das Aussehen solcher Tooltips ist wahrscheinlich vom Betriebssystem festgelegt und ich weiß nicht, wie weit es mit CSS gestaltbar ist.

Code

// userChromeJS - title, alt, url


(function() {


  if (!window.gBrowser)
    return;


  var frameScript = function() {


    addEventListener('pageshow', function(event) {


      var document = event.target;
      if (document.doingTooltipScript)
        return;
      document.doingTooltipScript = true;


/******************************************************************************/


      /* GM - title, alt, url */


      var documentElement = document.documentElement;


      var tooltipElement;
      var makeTooltip = false;
      var titleElement = null;
      var title = '';


      documentElement.addEventListener('mouseover', function(event) {


        var element = event.target;
        tooltipElement = element;


        var alt = '';
        var href = '';


        while ((!alt || !href || !titleElement) && element != documentElement) {
          if (!alt && element.alt) {
            alt = element.alt;
            makeTooltip = true;
          };
          if (!href && element.href && element.getAttribute('href') != '\u0023'
              && element.protocol != 'javascript:') {
            href = element.href;
            makeTooltip = true;
          };
          if (!titleElement && element.hasAttribute('title')) {
            titleElement = element;
          };
          element = element.parentNode;
        };


        if (makeTooltip) {


          if (titleElement) {
            title = titleElement.title;
            titleElement.removeAttribute('title');
          };


          let titleSep = title ? '\n' : '';
          let altSep = alt ? '\n' : '';
          let altPrefix = (alt && !title) ? 'a: ' : '';


          tooltipElement.title = title + titleSep + altPrefix + alt + altSep + href;


        };


      });


      documentElement.addEventListener('mouseout', function(event) {


        if (makeTooltip) {
          tooltipElement.removeAttribute('title');
          if (titleElement) {
            titleElement.setAttribute('title', title);
            title = '';
          };
          makeTooltip = false;
        };
        titleElement = null;


      });


/******************************************************************************/


    });


  };


  var frameScriptURI = 'data:, (' + frameScript.toString() + ')()';
  window.messageManager.loadFrameScript(frameScriptURI, true);


})();

Alles anzeigen

Mit anders erzeugten Tooltips experimentiere ich gerade, wir werden sehen. Vielleicht so wie hier:
MDN - ::after -Tooltips

Speravir

Zitat von aborix

Das folgende Skript kennzeichnet einen Alt-Text, wenn kein Title-Text vorhanden ist.

Ich weiß nicht mehr, wie ich mich in den Elogen noch steigern soll, deshalb: COOOOL!

Zitat

Das Aussehen solcher Tooltips ist wahrscheinlich vom Betriebssystem festgelegt und ich weiß nicht, wie weit es mit CSS gestaltbar ist.

Ja, es ist vorgegeben, aber einfach per CSS zu beeinflussen – extra für unseren Angel of Darkness, gleich auch noch für das Statuspanel:

CSS

/* Statuspanel- und Tooltipdarstellung */
#statuspanel {
	-moz-appearance: none !important;
	background: unset !important;
	border: 0 !important;
}
#statuspanel-label,
tooltip {
	-moz-appearance: none !important;
	background-color: magenta !important;
	color: black !important;
	border: 1px solid darkmagenta !important;
	border-radius: 3px !important;
}

Alles anzeigen

(Ich habe noch Schriftart und -größe geändert.)
Für das Statuspanel könnte man theoretisch noch unterscheiden, ob ein Link angezeigt wird – man könnte es in Anbetracht des Userskriptes dann auch ausblenden – oder eine andere Statusmeldung. Das wären dann #statuspanel[type="overLink"] und #statuspanel[type="status"].

Zitat

Mit anders erzeugten Tooltips experimentiere ich gerade, wir werden sehen. Vielleicht so wie hier:
MDN - ::after -Tooltips

Ooh, auch interessant. Das sehe ich mir auch mal genauer an …