如何擴展/獲取對規則視圖就地編輯器的引用？

Question

我想擴展Firefox檢查器的規則編輯器。我確實在inplace-editor.js找到editableField，這是rule-view.js引用的。在哪個XUL窗口中，我可以獲取對這些對象的引用並將其擴展？

考慮到螢火蟲和其他類似插件的顏色選擇器的普及，我希望這是可能的，我想知道是否有指導某處爲此？

Answer 1

如果我想延長內置的編輯器做什麼（如添加顏色選擇器下拉菜單），我將覆蓋_createInput方法：

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

：

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

東西沿着這些路線

Answer 2

規則視圖現在有一個顏色選擇器編輯器，並且更多特定的編輯器也會到來（立方貝塞爾計時函數，漸變...）

如果您希望進一步擴展規則視圖的功能，我認爲擴展就地編輯器不再是正確的做法。

您可能會感興趣的下列文件：

• 瀏覽器/ devtools/styleinspector/styleinspector-overlays.js負責管理特定於規則的視圖所有類型的工具提示和熒光筆。例如，它是創建顏色選擇器工具提示的位置，以便在用戶單擊小顏色樣本時顯示顏色選擇器工具提示。
• toolkit/devtools/output-parser.js負責解析出現在規則視圖中的css值並向它們添加色板。

這是不幸的，但今天沒有指導存在擴大規則觀點（或總檢查員在這方面）。