javascript - 如何知道隐藏在 moz-binding 下的 XUL 元素的结构？

Question

(顺便说一句，什么叫最大的波兰语和英语在线帮助开发者插件？)

想知道详细的结构元素:tabbrowser-tabs、arrowscrollbox、.tabs-newtab-button。我想看看他们有什么争论，尤其是类(Class)。在文件 chrome://browser/content/tabbrowser.xml 中，并非所有内容都不是很清楚。我对 moz-binging 了解不够。

我需要它(除其他外):

1 这样的风格:

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

他可以删除可滚动标签栏左侧和右侧的填充。我想确切地知道哪个元素有 paddingi，所以它不使用通用选择器。

2 这样的风格:

/* 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;
}

使滚动箭头不可见，但如果有任何卡片在选项卡栏之外，它们的阴影就会出现。我遇到的问题是，当打开卡片时，它会出现在选项卡栏的 View 之外(例如，用一只手打开多个链接，直到卡片屏幕上的空间用完)是选项卡的滚动按钮条以蓝色亮起，表示该卡已实际打开。但是，这种样式隐藏了按钮并留下了阴影。

我想为按钮添加样式。 Scrollbutton-down，它改变了我的风格的阴影颜色为蓝色，同时颜色上色。

3 标签栏样式的其余部分:

#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;
}

总体而言，它简化了样式选项卡栏。但是，新卡(如果没有足够的打开选项卡)。 Tabs-newtab-button 与这种样式一样太宽，您可能正在填充左侧和右侧。在普通卡片中，这些 paddingi 删除了一些东西。 Tab-background-*，并且可能 newtab 已经以其他方式命名。 3.a当卡片数量接近边界之后出现不同版本的新卡片按钮(没有卡片样式)它会无限期地从一种样式跳到另一种样式。这是在固定 2 张卡时完成的，尽管它也会影响分辨率，因为当我缩小 Firefox 窗口时，我没有注意到，这不排除它可能发生。

4 顺便说一句:

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

这个样式不得不在文本右侧做 6px padding，然而，设置为 10px。没有逐个像素的变化，也许是其他计算、脚本或其他东西？

对于 1,2 和 3，我会建议，只是不知道如何获得这种结构。

例如，元素 tab.tabbrowser-tab 有 THEMSELVES 是添加 -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>

如何获取这些元素？出于某种原因，我找不到 tabbrowser-tabs、arrowscrollbox、.tabs-newtab-button 的内容。请帮忙。提供这些元素的内容或我可以检查内容的工具。

Answer 1

要在运行时探索 绑定(bind)，最好的方法仍然是 DOM Inspector .

使用 File/Inspect Chrome Document 菜单项选择例如一个 browser.xul 实例。从那里，选择您感兴趣的元素，例如玩右边的面板(通过切换到相应的 View 来检查 XBL 绑定(bind)，或包括原始位置等的 CSS 规则)。DOM 检查器还显示匿名节点，即由 XBL 绑定(bind)生成的节点。匿名节点以红色显示。

然后您可以在 DXR 上交叉引用资料或 MXR , 提供的东西是核心功能，而不是由其他附加组件添加。

根据这些信息，您可以构建例如CSS 选择器。大多数匿名节点(至少是那些源自核心绑定(bind)的节点)都有合理的 class 名称。例如。你可以做类似的事情(我只是通过查看下面的屏幕截图“构建”的)。

#urlbar .textbox-contextmenu {
  display: none;
}

至于文档:它并没有比 MDN 更好，诚然，它在许多领域都相当缺乏。不要期望甚至有特定绑定(bind)的文档；源代码是文档。