Neuen Add-ons-Verwaltung anpassen

edvoldi · 20. Juni 2019

Hallo zusammen,

ich habe da ein kleines Problem mit der neuen Add-ons-Verwaltung unter 68.0b11.

So sieht es im abgesichertem Modus aus.

camp-firefox.de/attachment/20962/
folgender Code habe ich eingefügt:

CSS

    /*   Name für Erweiterungen & erste Zeile   */
    .header-name {
    font-size:0px!important;
    margin-top: 17px !important; }
    
    .header-name:after {
    font-size:18px!important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldie' !important;
    }
    .card-heading-image,
    #search-label{display: none !important;}
    #updates-container {margin-bottom: 5px !important; margin-right: 5px !important;}
    #header-utils-btn {margin-right: 90px !important;}
    #header-search{margin-bottom: 10px !important; margin-right: -150px !important; max-width: 240px !important;}

Alles anzeigen

Hiermit wird meine Bezeichnung oben angezeigt.

camp-firefox.de/attachment/20963/
Dann habe ich einen Code zum einfärben von Enabled und Disabled eingefügt:

CSS

/*   Aktiv-Passiv Farbe   */
    .list-section-heading[data-l10n-id="addons-enabled-heading"]  {
    background: gainsboro !important;
    font-weight: bold !important;
    color: green !important;
    text-indent: 15px; }

    .list-section-heading[data-l10n-id="addons-disabled-heading"]  {
    background: gainsboro !important;
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px; }

Alles anzeigen

Das sieht dann so aus:

camp-firefox.de/attachment/20964/

Enabled ist grün und Disabled rot.
Dann wollte ich den zweiten Text "Erweiterungen von EDV-Oldi" auch einfärben.

Das habe ich dann mit diesem Code gemacht:

CSS

    .recommended-heading {
    background: gainsboro !important;
    font-weight: bold !important;
    color: blue !important;
    text-indent: 15px; }

camp-firefox.de/attachment/20965/
Hier störte mich der schmale graue Hintergrund, um den zu ändern habe ich dann diesen Code ( font-size:18px!important; ) hinzugefügt.
Danach sieht es dann so aus:

Hier frage ich mich woher kommt auf einmal der Originale Text her?
Kann man es so machen das hier nur der originale Text erscheint und nicht meine Bezeichnung?

Gruß

EDV-Oldi

.DeJaVu · 20. Juni 2019

Vorab, lad dir mal die b12, von mir aus auch als RC1, die hat den zero-day-Fehler nicht, wichtig.

Zitat

.header-name:after {
font-size:18px!important;
font-weight: bold !important;
content: 'Erweiterungen von EDV-Oldie' !important;
}

Vermutlich ist dies zu allgemein, werde spezifisch.

edvoldi · 20. Juni 2019

Zitat von .DeJaVu

orab, lad dir mal die b12, von mir aus auch als RC1, die hat den zero-day-Fehler nicht, wichtig.

die Version ist nicht nicht im releases/ Ordner, erst wenn sie da ist, gibt es auch ein automatisches Update.

Zitat von .DeJaVu

Vermutlich ist dies zu allgemein, werde spezifisch.

Dieser Code wird so glaube ich von vielen hier im Forum verwendet, natürlich mit einer anderen Bezeichnung.

Es bleibt aber immer noch die Frage wie so kann dieser ( font-size:18px!important; ) Code so etwas verändern.

Gruß

EDV-Oldi

2002Andreas · 20. Juni 2019

Meinst du das so?

Wenn ja:

CSS

    /*   Name für Erweiterungen & erste Zeile   */
    .header-name {
    font-size:0px!important;
    margin-top: 17px !important; }
    
    #heading-name:after {
    font-size:18px!important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldie' !important;
    }
    .card-heading-image,
    #search-label{display: none !important;}
    #updates-container {margin-bottom: 5px !important; margin-right: 5px !important;}
    #header-utils-btn {margin-right: 90px !important;}
    #header-search{margin-bottom: 10px !important; margin-right: -150px !important; max-width: 240px !important;}
    
    /*   Aktiv-Passiv Farbe   */
    .list-section-heading[data-l10n-id="addons-enabled-heading"]  {
    background: gainsboro !important;
    font-weight: bold !important;
    color: green !important;
    text-indent: 15px; }

    .list-section-heading[data-l10n-id="addons-disabled-heading"]  {
    background: gainsboro !important;
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px; }
    
        .recommended-heading {
    background: gainsboro !important;
    font-weight: bold !important;
    color: blue !important;
    text-indent: 15px; }

Alles anzeigen

edvoldi · 20. Juni 2019

Hallo Andreas,

mit Deinem Code wird der Zweite Eintrag (blau) überhaupt nicht angezeigt

Gruß
EDV-Oldi

edvoldi · 20. Juni 2019

So mit diesem Code funktioniert es bei mir wie ich es möchte.

CSS

    /*   Name für Erweiterungen & erste Zeile   */
    .header-name {
    font-size:0px!important;
    margin-top: 17px !important; }
    
    #heading-name:after {
    font-size:18px!important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldie' !important;
    }
    .card-heading-image,
    #search-label{display: none !important;}
    #updates-container {margin-bottom: 5px !important; margin-right: 5px !important;}
    #header-utils-btn {margin-right: 90px !important;}
    #header-search{margin-bottom: 10px !important; margin-right: -150px !important; max-width: 240px !important;}
  
    /*   Aktiv-Passiv Farbe   */
    .list-section-heading[data-l10n-id="addons-enabled-heading"]  {
    background: gainsboro !important;
    font-weight: bold !important;
    color: green !important;
    text-indent: 15px; }

    .list-section-heading[data-l10n-id="addons-disabled-heading"]  {
    background: gainsboro !important;
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px; }
    
    .recommended-heading {
    background: gainsboro !important;
    font-weight: bold !important;
    color: blue !important;
    font-size:18px!important;
    text-indent: 15px; }

Alles anzeigen

Gruß
EDV-Oldi

edvoldi · 20. Juni 2019

Der Unterschied in beiden Codes, vorher:

CSS

    .header-name:after {
    font-size:18px!important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldie' !important;
    }


    .recommended-heading {
    background: gainsboro !important;
    font-weight: bold !important;
    color: blue !important;
    font-size:18px!important;
    text-indent: 15px; }

Alles anzeigen

Nachher:

CSS

    #heading-name:after {
    font-size:18px!important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldie' !important;
    }


    .recommended-heading {
    background: gainsboro !important;
    font-weight: bold !important;
    color: blue !important;
    font-size:18px!important;
    text-indent: 15px; }

Alles anzeigen

Das Ergebniss

edvoldi · 20. Juni 2019

Wieder einmal Danke an Andreas.

Gruß
EDV-Oldi

.DeJaVu · 20. Juni 2019

Also ich sehe die fertige Ausgabe bereits: /pub/firefox/releases/68.0b12/ (x86 und x64, exe)

Ich lade aus diversen Gründen das ZIP aus dem candidates-Ordner.

Was ich mit "spezieller" meinte

Zitat

.header-name

Denkbar wäre, nicht weiter überprüft, dass die Recommendations dieses Tag auch nutzen, nur mit einem anderen Tag dazu iG zu den "Enabled". Du hast dich ja eingangs "beklagt", dass dort beide Texte stehen, und das bedeutet immer, dass dein Code nicht eindeutig genug wäre.

Um das mit einem praktischen Beispiel vm Forum hier zu zeigen:

Die Beitragsliste in einem Unterforum wird als

.messageGroupList .tabularList li

bezeichnet. Aber auch die angepinnten=wichtigen Themen. Die werden durch einen Zusatz weiter abgegrenzt

.messageGroupList .tabularList li.divider

Wo hast du übrigens "#heading-name" gefunden? Wird nicht gefunden, weder 68b12 noch 69a

Wahlweise für die Kategorien

CSS

section h2, h2.recommended-heading

{    background: gainsboro !important;    font-weight: bold !important;    color: blue !important;    font-size:18px!important;    text-indent: 15px; }

Für die sections direkt

Code

section[section="0"] <-- Enabled
section[section="1"] <-- Disable
recommended-extensions-section <-- Recommendations (bedingt*)

Klappt bei den Empfehlungen hier grad bedingt, die nehmen zB hier keine Hintergrundfarbe an. Evtl wegen

Code

class RecommendedExtensionsSection extends RecommendedSection {  get template() {    return "recommended-extensions-section";  }

ok

Zitat

has no effect on this element since it has a display of inline.
Try adding display:inline-block or display:block. Learn more

Muss ich auch erst dazulernen für diesen Block.

2002Andreas · 20. Juni 2019

Zitat von .DeJaVu

Wo hast du übrigens "#heading-name" gefunden?

Hier:

2002Andreas · 20. Juni 2019

Zitat von edvoldi

Wieder einmal Danke an Andreas.

Wie immer gern geschehen

edvoldi · 20. Juni 2019

Zitat von .DeJaVu

Also ich sehe die fertige Ausgabe bereits: /pub/firefox/releases/68.0b12/

Das Update auf 68.0b12 und 67.0.4 ist in der zwischen auch bei mir angekommen.

Zitat von .DeJaVu

Wo hast du übrigens "#heading-name" gefunden?

Das hat Andreas schon beantwortet.
Mein Code funktioniert, das reicht mir im Moment.

Gruß
EDV-Oldi

edvoldi · 20. Juni 2019

Ich benutze auch dieses Skript:
Addons-Update-Check-Button.uc.js

Code

(function() {
  if (CustomizableUI.getPlacementOfWidget('addons-update-button'))
    return;

  try {
    CustomizableUI.createWidget({
      id: 'addons-update-button',
      defaultArea: CustomizableUI.AREA_NAVBAR,
      label: 'Add-ons Update',
      tooltiptext: '',
      onCommand: onCommand,
      onCreated: function(button) {
        button.style.listStyleImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB9klEQVR42o2TP2gTURzHvwcRXqDDCzi8gww+cfACBRsoJAWXji0KzZFBxUELDoouOmnG6JQiWOogVAcpHUpvKDRLQbekoKRDJXHyLYHLIOQNhXtgBt+7u+SSpkq+w93xu9/vw++vhVj0MiUOyzicEo5LuFh/ACGV6PT6HflbKmOyzINnGdt5kPOKnBYxg5pCNu99apdEt9cLAYdPi4cr8+kVDGYJ10oB3mlQdzebqxZnlLZf5vsEwYzRkRTSyL1pZSznCuPtZ/zXlMcNV9e2FH2LBvCjDrAFoNsYueTeiashoPV4EkDWNrSzA/ltP2rwohumjZ9foI5qI7/8+yHgkT0CkGvLwK0q5KYLovzIWK6BXNf2754GVBPABz8GPEwAithQKQJ6JmJiBmqOQekGEyUTqAF8HALuJwDML4OY2gcK6us2EPQj+811Xf+J7kcrAXwOAZS37oyVcLsCFO5CHXvAQSWyLZaist6ugvRFAtg1gOw0QJrGFXTQmYyMcxRytwJyWp8YVAIoj/eAhoHh24nH2GmADHT95yad39MApm+gUbZ9OwVq1mNyWeKsppaEwB9ALu35drjKzwvs1YuFdHXa8V9bCNROgsrGce91CDCX6GbJkxJPr9sE9v+CfQXfE8H2fldtmYu0xn8a0IUZn0tgeMpGfwErbLqeHktDngAAAABJRU5ErkJggg==)';
      }
    });
  } catch(e) {
    return;
  };

  function onCommand(event) {
    let frameScript = function() {
      addEventListener('pageshow', function onPageshow(event) {
        if (event.target.location != 'about:addons')
          return;
        content.gViewController.doCommand('cmd_findAllUpdates');
        content.gViewController.doCommand('cmd_goToAvailableUpdates');
        removeEventListener('pageshow', onPageshow);
      });
    };
    let frameScriptURI = 'data:,(' + frameScript.toString() + ')()';
    let window = event.target.ownerGlobal;
              window.openTrustedLinkIn('about:addons', 'tab', {});


    window.gBrowser.selectedBrowser.messageManager.loadFrameScript(frameScriptURI, true);
  };

})();

Alles anzeigen

Es funktioniert auch in der Beta 68.0b12, leider verschwindet die Anzeige "Verfügbare Updates" nach einem wechsel z.B. auf den Button "Erweiterungen" nicht mehr.

Wo könnte das Problem hier liegen?

Gruß
EDV-Oldi

.DeJaVu · 20. Juni 2019

Ich arbeite ungern mit ID, lieber mit class (.). Die ID ist was, was ich mit Javascript verbinde, um die class darin zu bearbeiten. Ich empfehle daher .header-name wie im Bild zu sehen. Nahezu das komplette Forum basiert überwiegend auf Klassen. Und wie aufgezeigt geht es auch ohne, falls die ID oder die Klasse umbenannt wird. Das Teil ist immerhin noch nicht fertig.

milupo · 20. Juni 2019

Zitat von .DeJaVu

Ich arbeite ungern mit ID, lieber mit class (.).

Das kommt doch darauf an. Will ich ein Element nur an einer bestimmten Stelle verändern, ist die ID besser, sie ist eindeutig und kommt nur einmal vor. Klassen können an mehreren Stellen vorkommen, wenn du also die Klasse verwendest, werden die definierten Regeln auf all die Stellen angewendet, wo die Klasse verwendet wird.

2002Andreas · 20. Juni 2019

Zitat von .DeJaVu

Ich empfehle daher .header-name

Wenn ich das nehme, dann sieht das so aus:

Und genau das sollte ja nicht sein.

milupo · 20. Juni 2019

Zitat von edvoldi

Ich benutze auch dieses Skript:
Addons-Update-Check-Button.uc.js

Es funktioniert auch in der Beta 68.0b12, leider verschwindet die Anzeige "Verfügbare Updates" nach einem wechsel z.B. auf den Button "Erweiterungen" nicht mehr.

Wo könnte das Problem hier liegen?

Sollte der Eintrag wirklich sofort verschwinden? Er sollte eigentlich erst verschwinden, wenn die Add-ons, für die es ein Update gibt, auch aktualisiert sind.

2002Andreas · 20. Juni 2019

Zitat von milupo

Sollte der Eintrag wirklich sofort verschwinden?

Der Eintrag erscheint wenn man vorher auf den Update Button geklickt hat.

Dann wird unter der Eintrag zusätzlich angezeigt.

Wechselt man dann auf der linken Seite in eine andere Rubrik, dann verschwindet er wieder. (in Fx 67 ist es so)

edvoldi · 20. Juni 2019

Zitat von 2002Andreas

Der Eintrag erscheint wenn man vorher auf den Update Button geklickt hat.
Dann wird unter der Eintrag zusätzlich angezeigt.
Wechselt man dann auf der linken Seite in eine andere Rubrik, dann verschwindet er wieder. (in Fx 67 ist es so)

genau so ist es .

Das ist aber nur bei dem neuen Add-ons Manager so, schaltet man um auf den alten dann ist es so wie in der Version 67.x
Gruß
EDV-Oldi

milupo · 20. Juni 2019

Ich habe das Skript hier auch, mit dem Unterschied, dass bei mir auch eine Schaltfläche erscheint. Beim Skript von edvoldi erscheint gar keine Schaltfläche. Das liegt sicherlich an dem fehlenden Bezug auf die browser.xhtml.

Teilen