In der selbsterstellten Statusleiste wird ein markierter Link nicht korrekt angezeigt

Boersenfeger

Moin, ich nutze mit einem Script eine Statusleiste, in der mir alle Buttons bereitgestellt werden. Dazu nutze ich einen CSS-Code, damit mir vorn in der Statusleiste ein Linkhover angezeigt wird. Diese Anzeige klappt seit wenigen Tagen nicht mehr wie erwartet. Der Link erscheint in der Höhe versetzt und ist nicht mehr fett. Er soll auf der Statusleiste vor den Buttons erscheinen.

Meine Spielereien mit dem CSS-Code ändern daran nix.

Wo muss ich was ändern?

JavaScript

/* Statusleiste für Firefox */

// https://www.camp-firefox.de/forum/viewtopic.php?p=1052187&sid=d4e33b574226439c26dfb45629b71369#p1052187
// entwickelt von aborix 

(function() {

  if (location != AppConstants.BROWSER_CHROME_URL)
    return;
  
  var css =`
    #new-toolbar {
        height: 28px; 
        direction: rtl;
        -moz-window-dragging: no-drag;
        /* border-top: 1px solid black !important; 
        background-color: rgba(0,0,0,0) !important;
        color: black !important; */
    }
    
    #statuspanel {
        bottom: 16px !important;
        left: 5px !important;
        height: 24px !important;
        max-width: 75% !important;
        transition: none !important;
    }
    
    #statuspanel-label{
        background:transparent!important;
        border: none !important;
        font: 13px Arial Rounded MT Bold !important;
        font-weight: normal !important;
        color: #202020 !important;
    }
  `;
  
  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
  
  var tb = document.createXULElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');

  var vbox  = document.createXULElement('vbox');
  document.getElementById('navigator-toolbox').parentNode.parentNode.insertBefore(
  vbox, document.getElementById('browser-bottombox'));
  vbox.style.backgroundColor = '#ffe4c4';
  vbox.appendChild(tb);

  CustomizableUI.registerArea('new-toolbar', {legacy: true});
  CustomizableUI.registerToolbarNode(tb);  
   
})();

setTimeout(function() {
    if (window.__SSi == 'window0')
      return;
    let tabbar = document.getElementById('TabsToolbar');     
    let tab = gBrowser.selectedTab;
    tabbar.style.display = '-moz-box';
    duplicateTabIn(tab, 'tab');
    gBrowser.moveTabTo(gBrowser.selectedTab, tab._tPos);
    gBrowser.removeTab(tab);
    tabbar.style.display = ''; 
  }, 1500);

Alles anzeigen

CSS

/* Link in Statusleiste anzeigen*/

#statuspanel{
    border:none!important;
    margin-top: 50px!important;
    box-ordinal-group: 100 !important;
    font-weight: bold !important; 
    font-size: 17px !important;
}

#statuspanel-label{ 
    border:none!important;
    background:transparent!important;
    color: blue !important;
}

/* Flexibler Leerraum */

toolbarspring {
    box-flex: 1;
    min-width: 9px;
    max-width: none !important;
}

/* Link mit Hintergrund anzeigen */

#statuspanel-label {
    border: none !important;
    background: #7598ff !important;
    color: white !important;
}

Alles anzeigen

Für eure Lösungsvorschläge bedanke ich mich schon mal!

2002Andreas

Zitat von Boersenfeger

Für eure Lösungsvorschläge

Ändere dazu mal in Zeile 5

margin-top: 50px!important;

zu

margin-bottom: -20px!important;

Den Wert evtl. noch anpassen.

Was mir aber auffällt.

Du nutzt im CSS andere Farben als im Script angegeben sind

Und Zeile 11 - 15

CSS

#statuspanel-label{ 
    border:none!important;
    background:transparent!important;
    color: blue !important;
}

passt dann auch wieder nicht zu Zeile 27 - 31

CSS

#statuspanel-label {
    border: none !important;
    background: #7598ff !important;
    color: white !important;
}

Du kannst auch gleich das Script anpassen, und dann ohne den CSS Code:

JavaScript

/* Statusleiste für Firefox */

// https://www.camp-firefox.de/forum/viewtopic.php?p=1052187&sid=d4e33b574226439c26dfb45629b71369#p1052187
// entwickelt von aborix 

(function() {

  if (location != AppConstants.BROWSER_CHROME_URL)
    return;
  
  var css =`
    #new-toolbar {
        height: 28px; 
        direction: rtl;
        -moz-window-dragging: no-drag;
        /* border-top: 1px solid black !important; 
        background-color: rgba(0,0,0,0) !important;
        color: black !important; */
    }
    
    #statuspanel {
        bottom: -3px !important;
        left: 5px !important;
        height: 24px !important;
        max-width: 75% !important;
        transition: none !important;
    }
    
    #statuspanel-label{
        background:#7598ff!important;
        border: none !important;
        font: 17px Arial Rounded MT Bold !important;
        font-weight: normal !important;
        color: white !important;
    }
  `;
  
  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
  
  var tb = document.createXULElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');

  var vbox  = document.createXULElement('vbox');
  document.getElementById('navigator-toolbox').parentNode.parentNode.insertBefore(
  vbox, document.getElementById('browser-bottombox'));
  vbox.style.backgroundColor = '#ffe4c4';
  vbox.appendChild(tb);

  CustomizableUI.registerArea('new-toolbar', {legacy: true});
  CustomizableUI.registerToolbarNode(tb);  
   
})();

setTimeout(function() {
    if (window.__SSi == 'window0')
      return;
    let tabbar = document.getElementById('TabsToolbar');     
    let tab = gBrowser.selectedTab;
    tabbar.style.display = '-moz-box';
    duplicateTabIn(tab, 'tab');
    gBrowser.moveTabTo(gBrowser.selectedTab, tab._tPos);
    gBrowser.removeTab(tab);
    tabbar.style.display = ''; 
  }, 1500);

Alles anzeigen

Sören Hentzschel

Kurze Erklärung, wieso es hier zu einer Änderung kam (und wieso weitere Änderungen nicht auszuschließen sind): Mozilla ist dabei, die proprietäre XUL-Flexbox so zu verändern [1, 2], dass diese intern die CSS-Flexbox nutzt, welche ein offizieller Webstandard ist und sich anders verhält. Das ist ein weiterer Schritt auf dem langen Weg, XUL aus dem Produkt zu entfernen. Die Verhaltensunterschiede bedingen, dass die Positionierung angepasst werden musste [3]. Das hat allerdings eine Performance-Regression [4] verursacht. Während diese behoben wurde/wird, wurde auch der Code nochmal weiter vereinfacht [5]. Individuelle Anpassungen, die sich auf veränderte Elemente beziehen, müssen daher ggfs. nachjustiert werden.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1033225

[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1789168

[3] https://bugzilla.mozilla.org/show_bug.cgi?id=1789125

[4] https://bugzilla.mozilla.org/show_bug.cgi?id=1789877

[5] https://bugzilla.mozilla.org/show_bug.cgi?id=1789892