Oberflächenanpassung

bugger

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

Ich habe über folgenden CSS Code

CSS

/* reload button in urlbar */
#stop-reload-button .toolbarbutton-icon {
  fill: rgb(102,102,102);
  height: 22px !important;
  width: 28px !important;
  padding: 4px !important;
  position: absolute !important;
}


#stop-reload-button {
  transform: translateX(-36px);
  border-radius: 0px !important;
  z-index: 10 !important;
  margin-right: -32px;
}


#wrapper-stop-reload-button .chromeclass-toolbar-additional {
  margin-right: 0px !important;
  transform: translateX(0px);
}


#stop-reload-button[animate="true"] {
  transform: translateX(-36px);
  opacity: 0.8;
}

Alles anzeigen

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!

2002Andreas

Zur ersten Frage.

Dein css Code verschiebt hier keinen Reload Button. Ich kann mir auch nicht vorstellen dass das mit css überhaupt funktioniert.

Darum teste es doch bitte mal mit dieser Erweiterung:

https://addons.mozilla.org/en-US/firefox/…in-address-bar/

bugger

Habe es geraden in einem neuen Profil nochmal getestet.
[attachment=0]reload.png[/attachment]
Den Reload Button habe ich im Anpassen Modus nur rechts neben die urlbar geschoben.
Aber das mit der Extension werde ich auch noch testen, aber eine Lösung über CSS wäre mir lieber.

bugger

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]

bugger

Nächstes Problem erledigt ...

CSS

/* reload button in urlbar */
#stop-button,
#reload-button {
  padding: 2px !important;
}


#stop-reload-button .toolbarbutton-icon,
#stop-button .toolbarbutton-icon,
#reload-button .toolbarbutton-icon {
  fill: rgb(102,102,102);
  height: 14px !important;
  width: 18px !important;
  padding: 0px !important;
}


#stop-reload-button {
  transform: translateX(-29px);
  border-radius: 0px !important;
  margin-right: -26px;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  width: 18px !important;
}

Alles anzeigen

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

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

EffPeh

Zitat von bugger
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...

Code

let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
let mySetInterval = setInterval( eliminate , 5000 );


function eliminate() {
  if ( element.hasAttribute( 'image' ) ) {
      element.removeAttribute( 'image' );
  } else {
      clearInterval( mySetInterval );
  }
};

Alles anzeigen

bugger

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.

EffPeh

Zitat von bugger
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:

Code

let mySetInterval = setInterval( eliminate , 5000 );


function eliminate() {
	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' );
		} else {
			clearInterval( mySetInterval );
		}
	}
};

Alles anzeigen

bugger

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.

EffPeh

Zitat von bugger

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

Richtig. Also testen wir das noch...

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' );
		}
	}
});

bugger

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!

EffPeh

Bitteschön...

2002Andreas

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]

bugger

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?

2002Andreas

Zitat von bugger

Oder wie bist du zu diesem Code gekommen?

Ich habe einfach eine Weile gesucht und erst immer den Fehler gehabt, Icon statt Image zu nehmen :oops:

Freut mich wenn es dir gefällt.

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

bugger

Interessant, ist mir bisher noch nie in den Enwicklerwerkzeugen aufgefallen.
Aber auch wenn, bezweifle ich das als Ansatz erkannt zu haben.
Wieder was gelernt

Speravir

Mir war ja immer das mit dem „xul:“ nicht geheuer und deshalb habe ich lieber die Klassenbezeichnung verwendet. Es funktioniert also, wenn man dieses Präfix weglässt.