Jak poznać strukturę XUL elementów ukrytych pod moz-binding?

[look997 0]

(Przy okazji, jak się nazywa największe polskie i anglojęzyczne forum pomocy twórcom dodatków?)

 

Chcę poznać szczegółową strukturę elementów: tabbrowser-tabs, arrowscrollbox, .tabs-newtab-button

Chcę widzieć jakie one mają argumenty, w szczególności klasy.

W pliku chrome://browser/content/tabbrowser.xml nie wszystko jest albo nie dość dokładnie widoczne.

Nie znam się wystarczająco na moz-binging.

 

Potrzebne mi to jest (między innymi) do tego:

 

1. Taki styl:

#tabbrowser-tabs > arrowscrollbox > * {
padding: 0 !important; /* gruby HAK na odstepy z prawej i lewej */
}

Potrafi usunąć paddingi z lewej i prawej strony przewijalnego paska kart.

Chcę wiedzieć dokładnie jaki element ma te paddingi, żeby je nie stosować ogólnego selektora.

 

2.Taki styl:

/* przyciski przewijania paska kart */

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
margin: 0 !important;
padding: 0 !important;
width: 1px !important;
list-style-image: none !important;
}

.scrollbutton-up {
box-shadow:  4px 4px 7px 2px rgba(0, 0, 0, 0.38) !important;
}

.scrollbutton-down {	
box-shadow:  4px -4px 7px 2px rgba(0, 0, 0, 0.38) !important;
}

.scrollbutton-up[disabled="true"], .scrollbutton-down[disabled="true"] {
	 /* gdy niepotrzebny Cien */
 opacity: .0 !important;		
 box-shadow: none !important;
}

Sprawia, że przyciski przewijania paska kart są niewidoczne, ale za to ich cienie pojawiają się, jeśli są jakieś karty poza widokiem paska kart.

Problem mam z tym, że gdy otworzy się kartę tak, że pojawia się ona poza widokiem paska kart (np. otwierając wiele linków z jednej strony, aż zabraknie miejsca na ekranie dla kart) to przycisk przewijania paska kart się podświetla na niebiesko, informując, że karta faktycznie się otworzyła.

Jednak ten styl ukrywa przycisk a zostawia cień.

 

Chciałbym dodać styl dla przycisku .scrollbutton-down, który zmienia kolor cienia z mojego stylu na niebiesko, w tym samym momencie gdy przycisk barwi się na ten kolor.

 

3. Reszta stylu paska kart:

#TabsToolbar:not([collapsed="true"]) + #nav-bar {
margin-top: 0 !important; /* hak 1px - anty - wpuszczeniu paska kart na 1px pod pasek narzedzi */
}

#TabsToolbar {
height: 26px !important;
}

#tabbrowser-tabs {
min-height: 26px !important;
}

/* kolor paska kart */

#TabsToolbar {
background: -moz-linear-gradient(rgba(255, 255, 255, .0), rgba(0, 0, 0, .04)),
	-moz-linear-gradient(rgba(220, 224, 234, 1), rgba(220, 224, 234, 1)) !important;
/* #2b83de #E5E5E5 rgba(200, 207, 224, 1) */
}

/* karty */

.tab-background-start,
.tab-background-end,
.tab-close-button,
#alltabs-button {
display: none !important;
}

/*.tabbrowser-tab,
.tab-stack,*/
.tab-background,
.tab-background-middle,
.tabs-newtab-button {
background: none !important;
margin: 0 !important;
padding: 0px !important;
}

.tabbrowser-tab:before { /* ukrywa kreski rozdzielajace */
display: none !important;
}


.tabbrowser-tab {
margin-bottom: 1px !important; /* to celowy efekt, ma być taki 1px odstęp podkreślający aktywną kartę */
}

.tab-content {
padding-left: 6px !important;
padding-right: 6px !important; /* tak naprawde to 10*/
}


/* kolory kart */

.tabbrowser-tab, .tabs-newtab-button {
	 /* zwykÃÂÃÂa i nowa Karta */
background: rgba(255, 255, 255, 0.2) !important;
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.2), transparent),
	linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;

background-position: -moz-calc(100% - 1px) -1px, 100% -1px !important;
background-repeat: no-repeat !important;
background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100%, 100% 100% !important;
}

tab.tabbrowser-tab[selected=true] {
box-shadow: 0px 0px 4px 3px rgba(2, 2, 2, 0.16) !important;

background: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4)),
	linear-gradient(rgba(255, 255, 255, .0), rgba(0, 0, 0, .04)),
	linear-gradient(rgba(240, 237, 244, 1), rgba(220, 227, 244, 1)) !important;
}


#tabbrowser-tabs tab.tabbrowser-tab:not([selected=true]):first-child {
	 /* pierwsza zwykÃÂÃÂÃÂÃÂ Karta */
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.2), transparent),
	linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
	linear-gradient(rgba(0, 0, 0, 0.2), transparent),
	linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))!important;

background-position: -moz-calc(100% - 1px),
	100%,
	-moz-calc(0px),
	1px !important;
background-repeat: no-repeat !important;
background-size: 1px 100%, 1px 100%, 1px 100%, 1px 100% !important;
}
#tabbrowser-tabs tab.tabbrowser-tab:not([selected=true]):last-child {
	 /* ostatnia zwykÃÂÃÂÃÂÃÂÃÂÃÂÃÂÃÂa Karta */
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.2), transparent),
	linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;

background-position: 100%,
	calc(100% - 1px) !important;
background-repeat: no-repeat !important;
background-size: 1px 100%, 1px 100% !important;
}

Ogólnie to upraszcza on styl paska kart. Jednak przycisk nowej karty(jeśli jest mało otwartych kart) .tabs-newtab-button, jest za szeroki jak na ten styl, prawdopodobnie zostają paddingi z lewej i prawej strony. W normalnych kartach, te paddingi usuwa coś z .tab-background-*, i prawdopodobnie newtab ma to inaczej nazwane.

3.a Gdy ilość kart jest blisko granicy po której pojawia się inna wersja przycisku nowej karty(taka bez stylu karty) to styl przeskakuje z jednego na drugi w nieskończoność. Robi się to kiedy w tym czasie 2 karty przypięte są, chociaż może na to wpływać też rozdzielczość bo gdy mam zmniejszone okno Firefoksa, to nic takiego nie zaobserwowałem, co nie wyklucza że się może zdarzyć.

 

4 Przy okazji:

.tab-content {
padding-left: 6px !important;
padding-right: 6px !important; /* tak naprawde to 10*/
}

Ten styl miał zrobić 6px padding z prawej strony tekstu, jednak ustawia się 10px. Nie zmienia się piksel po pikselu, może jest to jakoś inaczej wyliczane, skryptem czy czymś?

 

Z 1,2 i 3 bym sobie poradził, tylko nie wiem jak dostać się to tej struktury.

 

 

Np. element tab.tabbrowser-tab ma w SOBIE jeszcze inne elementy, które są dodanie przez -moz-binding: url('chrome://browser/content/tabbrowser.xml#tabbrowser-tab'):

    <content context="tabContextMenu" closetabtext="Close Tab">

       <xul:stack class="tab-stack" flex="1">
           <xul:hbox class="tab-background" xbl:inherits="pinned,selected,titlechanged,fadein">
               <xul:hbox class="tab-background-start" xbl:inherits="pinned,selected,titlechanged">
               </xul:hbox>
               <xul:hbox class="tab-background-middle" xbl:inherits="pinned,selected,titlechanged">
               </xul:hbox>
               <xul:hbox class="tab-background-end" xbl:inherits="pinned,selected,titlechanged">
               </xul:hbox>
           </xul:hbox>
           <xul:hbox class="tab-content" xbl:inherits="pinned,selected,titlechanged" align="center">
               <xul:image class="tab-throbber" xbl:inherits="fadein,pinned,busy,progress,selected" role="presentation" layer="true">
               </xul:image>
               <xul:image class="tab-icon-image" xbl:inherits="src=image,fadein,pinned,selected" anonid="tab-icon-image" validate="never" role="presentation">
               </xul:image>
               <xul:label class="tab-text tab-label" flex="1" anonid="tab-label" xbl:inherits="value=visibleLabel,crop,accesskey,fadein,pinned,selected" role="presentation">
               </xul:label>
               <xul:toolbarbutton class="tab-close-button close-icon" anonid="close-button" xbl:inherits="fadein,pinned,selected">
               </xul:toolbarbutton>
           </xul:hbox>
       </xul:stack>

   </content>

Jak się dostać do TYCH elementów? Z jakiegoś powodu nie mogę znaleźć content dla tabbrowser-tabs, arrowscrollbox, .tabs-newtab-button. Proszę pomóc. Podać zawartość tych elementów lub narzędzie którym mogę sprawdzić zawartość.