Oberflächenanpassung

  • Hallo!
    Vieleicht hat jemand zu den folgen "Problemen" eine Idee.

    Ich habe über folgenden CSS Code


    den stop-reload-button optisch in die #urlbar verschoben, aber leider ist der Toolbarbutton so groß, das ein Klick auf den #url-history-dropmarker nur in der vorderen Hälfte seine Funktion ausfürt, in der anderen wird der Reload ausgeführt.
    [attachment=2]stop-reload.png[/attachment]
    Die einzige CSS Anweisung die Auswirkung auf #stop-reload-button hat ist max-height, aber die schrumpf dann leider die ganze nav-bar zusammen.
    Kennt jemand eine Möglichkeit die größe der Klickbaren Fläche zu verkleinern? Optimal wäre es wenn man die Größe des Buttons auf 24x24 px ändern könnte.

    Zudem versuche ich das Icon der Screengrab Webextension im Context Menu zu ändern.
    Das hinzufügen funktioniert soweit mit diesem CSS Code

    CSS
    #_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup {
      -moz-appearance: none !important;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh1JREFUeNqkU81qGlEU/mbmOqOViSQuxEVqYouCUChMFi1UCjWltNCNoE9QJMUn8BEC2ZaKjxDB0PYFAjarphTEENIurNYWtYpaNf6NY++5iW0X2dgcODOXe+73nXO+c680n89xHWPxeHyxfp7NZhGLxd4tRcB9i7uRSCTS3JHJZHaWwH+UotHoTjqdfj2dTq88cVWLtMcYQzKZfMlyudyLcrksAqFQCKlUCvl8HuFwGETa7XYxHo9FXNM0uFwu2Gw22O12zGYziUmS9JUDDWIsFAoYjUaIRLbRbP5Eq9WC1+uFx+MRBIPBANVqFW63GxwH0zRlme/ber2eAJINh0PU6zVUKhWRKXfwBj0WQGT7Cfb3D3hVFo6PP3Hy7h8CdTKZgJys3+/zLN9RLJ7yEoHDoyJ2dzO4/zSFow+nWFlZQ6PRwPm5KQhoCiplp5LI6vUm/0qQeYgxFT7/XdwxDBErosmr0qAoKo/bSCOZcUU1yq4oysVcmSbAur7Gex7hUdhAqVYjTjx+eI+L+gurq56/BKQBgS3LulT6hiBYX7+JUukbAoHbCAUuRGu32zg7+wy/Pwia7oJAob7JNjZuQVWJQOFjcmJz04ly+QdOTr6IuK7rAuxwODiBRQQK8/l8b/f2XhmmOedZZOFUL/1V1YFgUMfiLv17qWjZ6XRUyel0PpNl+cH/PCTe9nuS3kHVXb6LZczk3pOu+5x/CzAA79biq6IGyQsAAAAASUVORK5CYII=") !important;
      background-repeat: no-repeat !important;
      background-position: 2px 0px !important;
    }


    Nur leider bleibt das Original Icon bestehen.
    [attachment=1]context-icon.png[/attachment]
    Versuche mit diesem uc.js

    Code
    setTimeout(function() {
      document.getElementById('_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup').removeAttribute('image');
    }, 5000);


    von hier https://www.camp-firefox.de/forum/viewtopi…125272#p1083896 brachten kein Erfolg, da die ID anscheinend nicht von Anfang an erzeugt wird, jedenfalls vermute ich das aufgrund dieser Fehlermeldung in der Browser Konsole

    Code
    TypeError: document.getElementById(...) is null[Weitere Informationen]  RemoveImageTag.uc.js:2:3


    Auch zeigt ein hinzufügen vom z-index: 9999 !important keine Wirkung.

    Wo ich mich noch nicht mit beschäftigt habe aber auch gerne eine Lösung für hätte ist das ändern der Schriftart/Schriftgröße bei den Suchvorschlägen.
    [attachment=0]search.png[/attachment]

    Danke im vorraus und über Vorschläge würde ich mich sehr freuen!

  • Der Reloadbutton von der Extension ist von der größe her für mich passend, aber ich schaffe es nicht die gewünschte Reihenfolge hinbekommen.
    Die Reihenfolge star-button, dropmarker, reload ist nicht möglich, da reload und star-button im page-action-button zusammengefasst sind.

    Hiermit konnte ich die Schrift der Suchvorschläge anpassen

    CSS
    /* change font size/weight for searchbar results */
    .search-panel-tree richlistitem :-moz-any(.ac-emphasize-text-title, .ac-title-text) {
      font-size: 11px !important;
      font-weight: normal !important;
    }


    [attachment=0]searchbar.png[/attachment]

  • Nächstes Problem erledigt ...


    [attachment=0]stopreload.png[/attachment]


    Bleibt nur noch das Icon vom Context Menu, hätte da jemand eine Idee?

  • Versuche mit diesem uc.js

    Code
    setTimeout(function() {
      document.getElementById('_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup').removeAttribute('image');
    }, 5000);


    von hier https://www.camp-firefox.de/forum/viewtopi…125272#p1083896 brachten kein Erfolg, da die ID anscheinend nicht von Anfang an erzeugt wird, jedenfalls vermute ich das aufgrund dieser Fehlermeldung in der Browser Konsole

    Code
    TypeError: document.getElementById(...) is null[Weitere Informationen]  RemoveImageTag.uc.js:2:3

    Hm. Ich kann mir das eigentlich nicht wirklich vorstellen, aber probier's doch dann einfach mal mit setInterval... :)

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Da kommt leider auch der selbe Fehler

    Code
    TypeError: element is null[Weitere Informationen] screengrab.uc.js:5:1


    Ist nur seltsam das der Eintrag über CSS ansprechbar ist, aber über JS nicht.


  • Da kommt leider auch der selbe Fehler

    Code
    TypeError: element is null[Weitere Informationen] screengrab.uc.js:5:1


    Ist nur seltsam das der Eintrag über CSS ansprechbar ist, aber über JS nicht.


    Achso, das ganze Element ist nicht da. Ja, merkwürdig irgendwie... :-??
    Dann testen wir im Interval, ob das Element vorhanden ist, und falls ja, nehmen wir eben dann erst das Attribut heraus... :wink:

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Ich glaube das ist eine aussichtslose sache, das Element wird wohl nur erzeugt wenn das Context Menu geöffnet wird. Schließt man das Context Menu, wird das Element auch wieder "zerstört". Ein erneutes anzeigen des Context Menu erzeugt wieder das Element mit dem original Icon.
    Wenn es nicht einen weg gibt den JS Code beim erzeugen des Context Menu zu starten, bliebe nur den Code alle paar ms auszuführen.
    Das erscheint mit jedoch nicht wirklich vernünftig.


  • [...]
    Das erscheint mit jedoch nicht wirklich vernünftig.


    Richtig. Also testen wir das noch... :P

    Code
    window.addEventListener('contextmenu', function (e) {
    	let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
    	if ( typeof( element ) != 'undefined' && element != null ) {
    		if ( element.hasAttribute( 'image' ) ) {
    			element.removeAttribute( 'image' );
    		}
    	}
    });

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Knapp daneben, aber doch vorbei. Erst in Kombination mit setTimeout mit sagenhaften 5ms funktioniert es.

    Code
    window.addEventListener('contextmenu', function (e) {
      setTimeout(function() {
        let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
        if ( typeof( element ) != 'undefined' && element != null ) {
          if ( element.hasAttribute( 'image' ) ) {
            element.removeAttribute( 'image' );
          }
        }
      }, 5);
    });

    Vielen Dank EffPeh für deine Hilfe!

  • Dieser css Code funktioniert hier auch ohne das zusätzliche Script.

    Bitte mal testen.

    CSS
    #_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup {
      -moz-appearance: none !important;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh1JREFUeNqkU81qGlEU/mbmOqOViSQuxEVqYouCUChMFi1UCjWltNCNoE9QJMUn8BEC2ZaKjxDB0PYFAjarphTEENIurNYWtYpaNf6NY++5iW0X2dgcODOXe+73nXO+c680n89xHWPxeHyxfp7NZhGLxd4tRcB9i7uRSCTS3JHJZHaWwH+UotHoTjqdfj2dTq88cVWLtMcYQzKZfMlyudyLcrksAqFQCKlUCvl8HuFwGETa7XYxHo9FXNM0uFwu2Gw22O12zGYziUmS9JUDDWIsFAoYjUaIRLbRbP5Eq9WC1+uFx+MRBIPBANVqFW63GxwH0zRlme/ber2eAJINh0PU6zVUKhWRKXfwBj0WQGT7Cfb3D3hVFo6PP3Hy7h8CdTKZgJys3+/zLN9RLJ7yEoHDoyJ2dzO4/zSFow+nWFlZQ6PRwPm5KQhoCiplp5LI6vUm/0qQeYgxFT7/XdwxDBErosmr0qAoKo/bSCOZcUU1yq4oysVcmSbAur7Gex7hUdhAqVYjTjx+eI+L+gurq56/BKQBgS3LulT6hiBYX7+JUukbAoHbCAUuRGu32zg7+wy/Pwia7oJAob7JNjZuQVWJQOFjcmJz04ly+QdOTr6IuK7rAuxwODiBRQQK8/l8b/f2XhmmOedZZOFUL/1V1YFgUMfiLv17qWjZ6XRUyel0PpNl+cH/PCTe9nuS3kHVXb6LZczk3pOu+5x/CzAA79biq6IGyQsAAAAASUVORK5CYII=") !important;
      background-repeat: no-repeat !important;
      background-position: 2px 3px !important;
    }
    
    
    #_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup > hbox > image{
    display:none!important;}

    [attachment=0]Screenshot (85).png[/attachment]

  • Das ist ja noch eleganter :) Vielen Dank dafür!
    Kann man diesen "hbox > image" Aufbau irgendwo in den Entwicklerwerkzeugen finden?
    Oder wie bist du zu diesem Code gekommen?