javascript - 如何扩展/获取对规则视图就地编辑器的引用？

Question

我想扩展 Firefox 检查器的规则编辑器。我确实editableField在rule-view.js引用的 inplace -editor.js中找到了。我可以在哪个 XUL 窗口中获取对这些对象的引用并扩展它们？

考虑到 Firebug 的颜色选择器和其他类似插件的流行，我希望这是可能的，我想知道是否有这个指南？

Answer 1

规则视图现在有一个颜色选择器编辑器，更具体的编辑器也即将推出（立方贝塞尔计时函数、渐变......）

如果您希望进一步扩展规则视图的功能，我认为扩展就地编辑器不再是正确的方法。

您可能对以下文件感兴趣：

• browser/devtools/styleinspector/style-inspector-overlays.js管理特定于规则视图的所有类型的工具提示和荧光笔。例如，它是创建和制作颜色选择器工具提示的地方，以便在用户单击小颜色样本时出现。
• toolkit/devtools/output-parser.js负责解析出现在规则视图中的 css 值并将颜色样本添加到它们。

不幸的是，但到目前为止还没有指南来扩展规则视图（或一般的检查员）。

Answer 2

如果我想扩展就地编辑器的功能（例如添加颜色选择器下拉菜单），我将覆盖 _createInput 方法：

http://mxr.mozilla.org/mozilla-central/source/browser/devtools/shared/inplace-editor.js#226

这些方面的东西：

let {InplaceEditor} = require(inplace-editor);
InplaceEditor.prototype._createInputOld = InplaceEditor.prototype._createInputOld;
InplaceEditor.prototype._createInput = function() {
  this._createInputOld();
  // My custom code....
}