Firefox 扩展插件 SDK 结合了多个“操作按钮”答案

【问题标题】：Firefox Extension Addon SDK combine multiple 'Action Buttons'Firefox 扩展插件 SDK 结合了多个“操作按钮”
【发布时间】：2014-06-14 00:59:31
【问题描述】：

我想将两个“操作按钮”合并为一个，就像 Firefox 当前使用其书签插件所做的那样，请注意它在“自定义...”选项中被视为一个按钮。

这是导航栏上整个按钮的截图。

这是“自定义”界面中“书签”按钮的屏幕截图。

我已经仔细查看了 SDK 文档，但没有明确的方法可以做到这一点。这似乎需要对 sdk/ui 库本身进行操作。我感谢任何能引导我解决这个问题的信息或见解。谢谢。

点击here获取动作按钮api参考。

【问题讨论】：

我想尝试设置type="menu-button"，然后使用图像设置dropmarker 的样式。 +1 可帮助您达到 10，以便您可以添加图片
也许您想要frame 而不是ActionButton，请参阅developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame
用户 Noitidart 是对的。查看this page 上的代码以了解上下文。 Lori 建议的框架将占据一个全新的行。
@arpie 如果以上帮助您找到了解决方案，请随时发布您的代码作为答案。这绝对是自 FF29 到来以来，一些人想到的问题。
@arpie 虽然我的评论对您在下拉菜单中制作单图标按钮没有帮助，但我发现DOM inpector extension (docs) 非常有用涉及复制 FF UI 中的行为。

标签： javascript firefox firefox-addon firefox-addon-sdk navbar

【解决方案1】：

一开始我很犹豫要不要回答这个问题，但显然没有其他人有更好的答案，现在这是我的“不回答”的答案：

ActionButton API 目前不支持此功能。

但一切都没有丢失。您可以使用新的CustomizableUI API 以及一些 XUL 和 CSS 直接实现这一点，但这通常是未知领域。这里有龙；您已被警告。

如果您查看默认按钮的来源，您会发现通常有不同的方法可以实现这样的按钮：

书签按钮本质上是一个“普通”<toolbarbutton type="menu-button">，带有一些自定义样式，用于.toolbarbutton-menubutton-dropmarker（包含下拉标记的框）和/或.dropmarker-icon（.toolbarbutton-menubutton-dropmarker 中的<image> 包含实际下拉下图标）。当按钮在工具栏上时，下拉标记图像将设置为该“列表”图标而不是默认的向下箭头图标，而在调色板或“汉堡”菜单中时，整个内容将被隐藏。当然，还有一些额外的代码可以修复按钮和/或下拉标记的默认操作。
另一方面，Zoom 控件似乎实际上是一个特殊容器中的三个按钮，其中一些自定义样式似乎主要是可重用的类（通过updateCombinedWidgetStyle 设置）。请参阅CustomizeableWidgets，例如在MXR。

我建议您阅读如何使用CustomizableUI，当然还要阅读内置小部件的代码和 CSS 规则。使用 DOM Inspector 插件戳 Chrome Window DOM 也可能有所帮助，例如更快地找出哪些 CSS 规则在起作用以及它们来自哪里；）另外，实际的文件历史记录/变更集可能会有所帮助。

另外，最好让 SDK 团队在 ActionButton SDK 中支持此类组合按钮（或自己创建补丁；）

【讨论】：