Privater Modus #private-browsing-indicator-with-label

Mira_Belle

Es geht um die Einblendung "Privater Modus" inkl. Symbol!

Wie kann ich diese aus der Tableiste loslösen und z.B. auf die Menüleiste verschieben?

Den Selektor habe ich gefunden, jedoch verändert sich, wenn ich z.B. margin-bottom nutze, die Position der kompletten Tableiste. (#TabsToolbar)

Deshalb die Frage nach dem "loslösen".

Geht das überhaupt per CSS?

Oder muss man das auch, ähnlich wie bei dem Hamburgermenü, per JavaScript lösen?

Mira_Belle

OK, einfach mal machen!

Per JavaScript hat es geklappt!

Code

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;  
    let menuButton = document.getElementById('private-browsing-indicator-with-label');
    if (!CustomizableUI.getPlacementOfWidget('ucjs_private-browsing-label')) {
      try {
        CustomizableUI.createWidget({
          id: 'ucjs_private-browsing-label',
          type: 'custom',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          onBuild: function(aDocument) {
            let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem');
            toolbaritem.id = 'ucjs_private-browsing-label';        
            return toolbaritem;            
          }
        });
        if (!CustomizableUI.getPlacementOfWidget('ucjs_private-browsing-label')) {    
          menuButton.style.display = 'none';
          return;
        };        
      } catch(e) {        
        menuButton.style.display = 'none';
        return;      
      };    
    };
   
    setTimeout(function() {
     document.getElementById('ucjs_private-browsing-label').appendChild(menuButton);      
     menuButton.setAttribute('consumeanchor', 'ucjs_private-browsing-label');    
    }, 0);
  }());

Alles anzeigen

Ich muss jetzt nur noch schauen, wie ich es hinbekomme, dass KEIN Zeilenumbruch passiert.

2002Andreas

Zitat von Mira_Belle

Per JavaScript hat es geklappt!

Sorry, aber so ganz verstehe ich jetzt nicht, was genau du damit erreichen willst bzw. erreicht hast

Mira_Belle

2002Andreas

Die "Einblendung" Privater Modus wurde bei mir in der Tableiste unter den Tabs angezeigt,

wodurch die Tabs wiederum angehoben wurden.

Achtung, ich habe die Tableiste nach unten verschoben und auch sonst noch etwas angepasst.

Mit dem Skript kann ich nun die "Einblendung" Privater Modus hinverschieben, wo ich es will.

Verschiebe ich diese jedoch in die Menüleiste, dann macht sich da ein Zeilenumbruch bemerkbar.

Diesen gilt es jetzt noch zu verhindern.

Soll ich Bilder machen?

Ohne Skript!

Mit Skript, aber mit Zeilenumbruch!

2002Andreas

Zitat von Mira_Belle

Soll ich Bilder machen?

Hallo Mira, nein, jetzt habe ich es verstanden, danke für die Aufklärung

Sören Hentzschel

Ungetestet, da ich ohne deine Anpassungen keinen Zeilenumbruch habe, aber wie sieht's damit aus?

CSS

#private-browsing-indicator-with-label {
  white-space: nowrap !important;
}

Mira_Belle

Danke Sören Hentzschel

Das habe ich auch schon rausgefunden und ...

auch gleich noch das Symbol etwas gerade gerückt.

Das Skript:

JavaScript

// Private-Browsing-Label.uc.js
// Private-Browsing-Label verschiebbar.uc.js
// Source file https://www.camp-firefox.de/forum/thema/137260/?postID=1239849#post1239849
(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;  
    let menuButton = document.getElementById('private-browsing-indicator-with-label');
    if (!CustomizableUI.getPlacementOfWidget('ucjs_private-browsing-label')) {
      try {
        CustomizableUI.createWidget({
          id: 'ucjs_private-browsing-label',
          type: 'custom',
          defaultArea: CustomizableUI.AREA_NAVBAR,
          onBuild: function(aDocument) {
            let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem');
            toolbaritem.id = 'ucjs_private-browsing-label';        
            return toolbaritem;            
          }
        });
        if (!CustomizableUI.getPlacementOfWidget('ucjs_private-browsing-label')) {    
          menuButton.style.display = 'none';
          return;
        };        
      } catch(e) {        
        menuButton.style.display = 'none';
        return;      
      };    
    };
   
  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(`
      #private-browsing-indicator-with-label {
        white-space: nowrap !important;
        align-items: start !important;
      }
      .private-browsing-indicator-icon {
        margin-top: 1px !important;
      }
     `), null, null);
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
    setTimeout(function() {
     document.getElementById('ucjs_private-browsing-label').appendChild(menuButton);      
     menuButton.setAttribute('consumeanchor', 'ucjs_private-browsing-label');    
    }, 0);
  }());

Alles anzeigen

2002Andreas

Zitat von Mira_Belle

auch gleich noch das Symbol etwas gerade gerückt.

So ganz passt das hier zumindest nicht.

Ich musste das noch hinzufügen:

CSS

#ucjs_private-browsing-label hbox#private-browsing-indicator-with-label {
  margin-top: 8px !important;
}

PS:

Für andere User.

Das Skript betrifft nur dann den Eintrag, wenn die Tableiste nach unten verschoben wurde.

Sören Hentzschel

Zitat von 2002Andreas

Das Skript betrifft nur dann den Eintrag, wenn die Tableiste nach unten verschoben wurde.

Ich verwende kein einziges Script und wenn ich dieses Script ausführe, wird das Element ebenfalls verschoben.

2002Andreas

Zitat von Sören Hentzschel

wird das Element ebenfalls verschoben.

Das ist richtig.

Aber der Button "Privater Modus" stört nur, wenn die Tableiste unten ist.

Sieht dann so aus:

Ansonsten sieht das so aus:

Mira_Belle

2002Andreas

Jaja, immer das CSS

Du hättest aber auch einfach anstatt:

align-items: start !important;,

align-items: center !important; oder align-items: end !important; nehmen können.

2002Andreas

Zitat von Mira_Belle

Du hättest aber auch einfach

Viele Wege führen nach Rom

Mira_Belle

Das Skript macht ja eine ganze Fläche verschiebbar,

in deren Mitte das Label und davor das Symbol ist.

Der Standardwert ist align-items: center;.

Zum Skript selber, die Benutzung ist nur dann sinnvoll, wenn man die Tableiste nach unten verschoben hat.