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

How to extend/get reference to rule-view inplace-editor?

本文关键字：视图 规则 编辑器 引用 获取 何扩展 扩展      更新时间：2023-09-26

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

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

规则视图现在有一个颜色选择器编辑器，更多特定的编辑器也即将推出（立方贝塞尔定时函数、梯度…）

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

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

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

这很不幸，但截至目前，还没有任何指南来扩展规则观点（或检查员）。

如果我想扩展就地编辑器的功能（比如添加颜色选择器下拉菜单），我会覆盖_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....
}
相关文章：