display: moz-box erneuern Hier im Sidebar-Hover-Code

Boersenfeger

Moin, in Zeile 9 findet sich dieser, jetzt obsolete Codeteil, der nach Sören Hentzschel nicht mehr unterstützt wird

Beitrag

RE: Entwicklung Firefox

Da man es immer noch in aktuellen Anpassungen hier im Forum sieht: Ab der heutigen Nightly-Version unterstützt Firefox keine XUL-Flexbox mehr. Das sollte wenig überraschend sein, nachdem Mozilla in den letzten Monaten ja sämtliche Vorkommen innerhalb von Firefox auf die CSS-Flexbox umgestellt hat, was hier oft genug Thema war. Jedenfalls heißt das, dass Dinge wie display: -moz-box, -moz-box-orient oder -moz-box-flex (neben weiteren) in euren individuellen Anpassungen nichts mehr bewirken, die…

Sören Hentzschel

30. März 2023 um 15:38

CSS

/* Sidebar via Hover hervorrufen und andere Sidebar-Einstellungen */


@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
url("chrome://browser/content/browser.xhtml") {


#menu_bookmarksSidebar {
display: -moz-box !important;
}


#bookmarks-view-children {
margin-top: -100px !important;
margin-left: -15px !important;
}


#sidebar-header {
display: none !important;
}


.sidebar-placesTreechildren::-moz-tree-separator {
margin: 0px 500px !important;
}


label[persist="value"][flex="1"][crop="end"][control="sidebar"][value="Lesezeichen"] {
display: none !important;
}


#sidebar-box {
display: block !important;
position: fixed !important;
top: 111px;
bottom: 27px !important;
width: 0px !important;
overflow-x: hidden !important;
appearance: none !important;
border: 0px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
transition: width .2s ease-out 3.2s, opacity .2s ease-out 3.2s !important;
}


#sidebar-box:hover {
z-index: 3 !important;
width: 300px !important;
opacity: 1 !important;
transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
}

#appcontent {
margin-left: 2px !important;
}

#sidebar-splitter {
display: none !important;
}

#sidebar {
display: block !important;
width: 100% !important;
height: 100% !important;
}
}

/* Beschriftungsende anpassen */

treechildren::-moz-tree-cell,
treechildren::-moz-tree-cell-text {
margin-inline-end: -8px !important;
}

/* Lesezeichensidebar Icon-Abstand zur linken Seite */


.sidebar-placesTreechildren[view="bookmarks-view"] {
margin-left: -10px !important;
}


/* Lesezeichensidebar Icon-Abstand */


#bookmarks-view-children:-moz-tree-image {
margin-right: 5px !important;
}


/* Suchsymbol in der Sidebar ausblenden */


.textbox-search-sign{
display:none !important;
}
textbox input.textbox-input::-moz-placeholder,
#search-container input.textbox-input::-moz-placeholder,
#urlbar input.textbox-input::-moz-placeholder {
color: transparent !important;
}


/* Suchleiste Schrift-Größe einstellen */


.sidebar-placesTreechildren,sidebarheader,#sidebar-search-label,#search-box {
font-size: 16px !important;
font-family: Comic Sans MS, sans-serif !important;
}


/* Sidebar Hintergrundfarbe */


#sidebar {
background: #c1e7bb !important;
opacity: 1 !important;
}


/* Lesezeichen-Sidebar Suchfeld und auch Haupt-Suchfeld ohne Eintrag */

::placeholder {
color: transparent !important;
}

/* Lesezeichen Sidebar öffnende Dreiecke entfernen */


#bookmarksPanel treechildren::-moz-tree-twisty(closed),
#bookmarksPanel treechildren::-moz-tree-twisty(open){
height:0!important;
width:0!important;
display:none!important;
}


/* Lesezeichen verwalten */


treechildren::-moz-tree-image(container) {
list-style-image: url('data:image/gif;base64,R0lGODlhEAAQAOZMAP/////MAF06AJhlAJNgAP//AP/lAP/UAJViAP/JANShAJRhAP/OAJRgAOy5AMaSAP/nAMyZAP/IAP/NAOazAP/RAMmVALaAAH5TAJNfAM2aAP/dT//XOv/KAOPOkMeRAP/nhOSxAOu4AP3KAOrTkv/nrv//1c6bAKdyAP/TAP/bPdWsMr6LA7iCALqGALiEAJNeAMCMAP/gcv/eYdGdAP/TEP/mgv/2y//gg/3JAP/ila97AP/aKsWPAJFbAJZgALeBAMiVAPC9AP/rOum2AHlQAP/4zP//z//jPpNdAP/LANixNP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEwALAAAAAAQABAAAAefgEyCg4SFhoeFDQ0LjIiCCyU5IwEBBAiXCAOEBDohFBREIg6jQgibODQKqgonDz0fPkkwDQMEMhYRERpBMUsAv8C1Mw8uLUAXKwA2EgkJDJoEGy8swAAgCZQMz0wEKigkN8wJHZQBFZrcPDsAHErllBMT6AQ1HkYVKQf6++hMGUgAhhgYSBAChH4/TBwpwLAhw35MMAiYSLFiEUcYmQQCADs=')
!important;
}


/* Zeilenhöhe reduzieren */

.sidebar-placesTree treechildren::-moz-tree-row,
.placesTree treechildren::-moz-tree-row {
min-height: 20px !important;
}

/* Ordner aus der Sidebar ausblenden */

.sidebar-placesTreechildren[view="bookmarks-view"] {

margin-top: -10px!important; }


/* Fokusring um Ordner entfernen */

treechildren {
    --default-focusring: 0px !important;
}
}

Alles anzeigen

Der Code funktioniert derzeit noch, ich will das natürlich aber lieber aktuell haben!

Wie muss die Zeile dann aussehen?

Vielen Dank!

2002Andreas

Statt in Zeile 9

CSS

display: -moz-box !important;

Jetzt:

CSS

display: flex !important;

Boersenfeger

Auch noch gefunden:

Ebenfalls in Zeile 9

-moz-box-orient:

CSS

@charset "utf-8";
/*@version       2022/11/20 19:00 107+ wip*/
/*@version       2022/02/16 Bug 1747422 - Remove preprocessor variable use from downloads CSS*/
/*@version       2020/03/13 fix for 74, broken listitem orient due to Bug 1606130
/*@version       2019/12/11 fix for 73 Bug 1601094 - Rename remaining .xul files to .xhtml in browser */
/*@version        2019/10/20 12:30*/

#contentAreaDownloadsView[ucjsDownloadsStatusModoki] { 
  -moz-box-orient: horizontal; 
  background-color: var(--in-content-box-background) !important; 
  padding: 0 !important; 
} 


#contentAreaDownloadsView[ucjsDownloadsStatusModoki] #downloadsListBox { 
  display:inline-block !important; 
  overflow-y: auto !important; 
  scrollbar-width: thin;
  border: none !important;
} 

#contentAreaDownloadsView[ucjsDownloadsStatusModoki] richlistitem:not([hidden]) { 
  border-width: 0 1px 0 0 !important;
  border-style: solid !important;
  border-color: black !important;
  display:-moz-inline-box !important;
  max-height: 2.5em !important;
  min-height: 2.5em !important;
}
#contentAreaDownloadsView[ucjsDownloadsStatusModoki] .downloadContainer {
  max-width: 150px !important;
}
#contentAreaDownloadsView[ucjsDownloadsStatusModoki] .downloadTypeIcon {
    margin-inline-end: 4px !important;
    margin-inline-start: 4px !important;
    max-width: 16px !important;
    max-height: 16px !important;

}
#contentAreaDownloadsView[ucjsDownloadsStatusModoki] .downloadButton
{
    padding-inline-end: 4px !important;
    padding-inline-start: 4px !important;
}


#contentAreaDownloadsView[ucjsDownloadsStatusModoki] .downloadTarget {
    font-size: 12px !important;
}
 
#contentAreaDownloadsView[ucjsDownloadsStatusModoki] .downloadDetails {
    font-size: 70% !important;
}

#contentAreaDownloadsView[ucjsDownloadsStatusModoki] #downloadFilter { 
    display: none !important; 
}

#ucjs_clearListButton {
    display: none !important;
}

Alles anzeigen

Danke 2002Andreas!

Hier noch ein 3. Code

Nur teilweise da zu groß fürs Forum:

CSS

/* Kontextbox Groesse */

    #context-navigation:not([hidden]) {
    padding: 0 !important;
    }
    
    #context-navigation > .menuitem-iconic {
    flex: 0 1 auto !important;
    }
    
    #context-navigation > .menuitem-iconic:first-child {
    -moz-box-pack: end !important;
    }
    
    #context-navigation > .menuitem-iconic:last-child {
    -moz-box-pack: start !important;
    }
    
    #context-navigation > .menuitem-iconic {
    -moz-box-flex: 0 !important;
    -moz-box-pack: center !important;
    -moz-box-align: center !important;
    }

    #context-navigation {
    min-width: 300px!important;
    }
    
    #context-navigation [disabled="true"]:hover {
    background-color: greenyellow !important;
    }

    #context-navigation {
     --menuitem-disabled-hover-background-color: none !important;
    }

    #context-navigation {  
    --menuitem-hover-background-color: greenyellow !important;
    color: #3300ff !important;
    }

Alles anzeigen

Da stehen auch noch 6x moz-box- drin..

2002Andreas

Zitat von Boersenfeger

Hier noch ein 3. Code

Teste bitte:

CSS

/* Kontextbox Groesse */

    #context-navigation:not([hidden]) {
    padding: 0 !important;
    }
    
    #context-navigation > .menuitem-iconic {
    flex: 0 1 auto !important;
    }
    
    #context-navigation > .menuitem-iconic:first-child {
    -moz-box-pack: end !important;
    }
    
    #context-navigation > .menuitem-iconic:last-child {
    -moz-box-pack: start !important;
    }

    #context-navigation > .menuitem-iconic {  
    flex-direction: column !important; 
    }
    
    #context-navigation {
    min-width: 300px!important;
    }
    
    #context-navigation [disabled="true"]:hover {
    background-color: greenyellow !important;
    }

    #context-navigation {
     --menuitem-disabled-hover-background-color: none !important;
    }

    #context-navigation {  
    --menuitem-hover-background-color: greenyellow !important;
    color: #3300ff !important;
    }

Alles anzeigen

Boersenfeger

Habs übernommen, aber da steht ja immer noch was von moz-box...

Hast du auch noch was für -moz-box-orient?

Fahre jetzt erst mal Nachtdienst...

Danke einstweilen!

2002Andreas

Zitat von Boersenfeger

Auch noch gefunden:

Was genau macht dieses Skript?

Zitat von Boersenfeger

ja immer noch was von moz-box

~~Soweit ich weiß, ist das nicht davon betroffen.~~

Edit:

Siehe Beitrag Nr. 9

Horstmann

Siehe auch hier, und hier.

Boersenfeger

Zitat von Horstmann

.....

Was möchtest du mitteilen?

Der Grund für die Änderungen hatte Sören bereits beschrieben, deswegen meine Anfrage hier

@ 2002Andreas

Kurz gesagt, erhalte ich damit beim Download einer Datei einen farblich verlaufenden Streifen oberhalb der von mir genutzten Statusbar...

hier mal drüberlesen

Thema

DownloadStatusModoki.uc.js umbasteln

Ich habe mir im Nightly das entsprechende Script, sowie die CSS-Datei vom Entwickler heruntergeladen und installiert.

1. https://github.com/alice0775/user…tusModoki.uc.js

2. https://github.com/alice0775/user…odoki.uc.js.css

Nun nutze ich ja eine "Status"-Bar..

Bei jedem Download poppt nun unter dieser Statusleiste die Downloadleiste auf. Wäre es möglich, das der Download in der bestehenden Status-Bar angezeigt wird?

Hier der Code von @aborix : für die Statusleiste:

(Quelltext, 38 Zeilen)

Für…

Boersenfeger

16. Januar 2020 um 15:55

Sören Hentzschel

Zitat von 2002Andreas

Soweit ich weiß, ist das nicht davon betroffen.

Doch, ich nannte im anderen Thread nur ein paar Beispiele. Es müssen aber alle Eigenschaften, welche die XUL-Flexbox betreffen, ersetzt werden. Das schließt alle Eigenschaften ein, die mit -moz-box- beginnen. So wird aus -moz-box-pack: end beispielsweise justify-content: flex-end.

Zitat von Boersenfeger

Was möchtest du mitteilen?

Dort steht, was man alles wodurch ersetzen muss.

2002Andreas

Zitat von Sören Hentzschel

Doch

Dann danke für den Hinweis.

2002Andreas

Zitat von Boersenfeger

noch was von moz-box

Teste bitte wieder:

CSS

/* Kontextbox Groesse */

    #context-navigation:not([hidden]) {
    padding: 0 !important;
    }
    
    #context-navigation > .menuitem-iconic {
    flex: 0 1 auto !important;
    }
    
    #context-navigation > .menuitem-iconic:first-child {
    justify-content: flex-end !important;
    }
    
    #context-navigation > .menuitem-iconic:last-child {
    justify-content: flex-start !important;
    }

    #context-navigation > .menuitem-iconic {  
    flex-direction: column !important; 
    }
    
    #context-navigation {
    min-width: 300px!important;
    }
    
    #context-navigation [disabled="true"]:hover {
    background-color: greenyellow !important;
    }

    #context-navigation {
     --menuitem-disabled-hover-background-color: none !important;
    }

    #context-navigation {  
    --menuitem-hover-background-color: greenyellow !important;
    color: #3300ff !important;
    }

Alles anzeigen

Horstmann

Zitat von Boersenfeger

Zitat von Horstmann

.....

Was möchtest du mitteilen?

Wie oben von Sören erwähnt, sind das einige der konkreten Änderungen, die momentan zur Umstellung für zB Nightly 113 vorgenommen werden müssen.

Zitat

hier mal drüberlesen

Thema

DownloadStatusModoki.uc.js umbasteln

Ich habe mir im Nightly das entsprechende Script, sowie die CSS-Datei vom Entwickler heruntergeladen und installiert.

1. https://github.com/alice0775/user…tusModoki.uc.js

2. https://github.com/alice0775/user…odoki.uc.js.css

Nun nutze ich ja eine "Status"-Bar..

Bei jedem Download poppt nun unter dieser Statusleiste die Downloadleiste auf. Wäre es möglich, das der Download in der bestehenden Status-Bar angezeigt wird?

Hier der Code von @aborix : für die Statusleiste:

(Quelltext, 38 Zeilen)

Für…

Boersenfeger

16. Januar 2020 um 15:55

Dazu stellt sich mir die Frage, was mit den XUL Elementen passieren wird, die in vielen Skripts wie diesem generiert werden; die Handvoll Skripts die ich in Nightly 113 benutze funktionieren problemlos damit - aber wie lange noch?

Mit ein paar Anpassungen lassen sich die XUL Elemente ersetzen - jedenfalls scheint es so nach kurzen anfänglichen Tests - aber die Sache könnte evtl. interessant werden wenn XUL Support komplett wegbricht, oder Skripts alten Code erzwingen.

Sören Hentzschel

Da sind keine Änderungen zu erwarten. Um beispielsweise eine Toolbar hinzuzufügen, braucht man nun einmal ein toolbar-Element, welches die ganze benötigte Funktionalität hat. Und das ist kein Element, welches für Websites Sinn ergibt. Für solche Anwendungsfälle wird auch weiterhin der XUL-Namensraum genutzt. Und XUL hat spätestens nach den letzten Änderungen auch vom Verhalten nicht mehr solch riesengroße Unterschiede zu HTML. Siehe auch:

Zitat von Emilio Cobos Álvarez

We still use the XUL namespace in various ways (generally to implement things that aren’t web exposed, like native menu popups). […] Other than that, nowadays most XUL is just HTML but defaulting to box-sizing: border-box and display: flex.

Horstmann

Dankeschön, Sören.

Dharkness

Guten Morgen zusammen,

ich hätte da auch einen Eintrag für die oberen Button in den Seiteninformationen, wie müsste das * umgebaut werden?

*

CSS

#viewGroup > radio > .radio-label-box {
    -moz-box-orient: horizontal !important;
}

Sprich Icons und Text sollen nebeneinander stehen.

Horstmann

Zitat von Dharkness

ich hätte da auch einen Eintrag für die oberen Button in den Seiteninformationen, wie müsste das * umgebaut werden?

Ohne das getestet zu haben, entsprechend der Angaben in den Links von oben sollte es sowas sein:

CSS

#viewGroup > radio > .radio-label-box {
    flex-direction: row !important;
}

Boersenfeger

Dank der vielfältigen Hinweise konnte ich meine Codes bereinigen. Vielen Dank!

Gerne hätte ich noch meine Tabs, je nach Anzahl, in der Tableiste mittig angeordnet.

Der Code dafür wäre

CSS

/* Tabs in Tableiste mittig */
    
    moz-scrollbox[smoothscroll="true"] {
    justify-content: center !important;
    }

Das funktioniert so nicht,

ggf. sollte auch noch moz-scrollbox ersetzt werden...

Hat da auch noch jemand eine Idee?

2002Andreas

Zitat von Dharkness

Sprich Icons und Text sollen nebeneinander stehen.

Teste bitte mal:

CSS

#viewGroup > radio > .radio-label-box {  
   flex-direction: row-reverse !important;
}

2002Andreas

Zitat von Boersenfeger

in der Tableiste mittig angeordnet.

Teste bitte:

CSS

/* Tabs in Tableiste mittig */

scrollbox[smoothscroll="true"] {
  justify-content: center !important ;
}

Dharkness

Zitat von 2002Andreas

Teste bitte mal:

Zeigt leider nicht den gewünschten Erfolg.