1. 由helloworld改名为gridSystem的注意点:
①install.rdf的插件ID改为:gridSystem@mozilla.doslash.org。同时,调试目录下%APPDATA%\Mozilla\Firefox\Profiles下的gridSystem@mozilla.doslash.org文件相应的改名。
②相应的目录结构发生变化,overlay.xul中需要改写两处路径。chrome.manifest下要改写5处路径。至于overlay.xul中的overlay id不改也没什么关系。
2. 向页面中写入DOM和CSS。
①向头部加入CSS,加入了但不生效
var styleElement = document.createElement("style");
styleElement.setAttribute("type","text/css");
var message = "#E-GS{position:absolute;top:0;left:0;width:200px;height:200px;background-color:red;}";
var styleNode = document.createTextNode(message);
styleElement.appendChild(styleNode);
doc.head.appendChild(styleElement);
②在DOM前加入css,加入了但不生效
doc.body.appendChild(styleElement);
③插入到原页面的CSS文件中,OK
④只好直接写到标签里了。
3. 对插入的DOM div 动态设置高度。
4.寻找合适的覆盖点插入我的组件:
<menubar id="main-menubar">
<menu id="alexa-relatedlinks1" label="hello" persist="hidden" accesskey="r">
<menupopup id="alexa-relatedlinks-menu"
onpopupshowing=""
/>
</menu>
</menubar>
插入菜单栏,与文件平级,在帮助的后面。
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="GridSystem-button" class="chromeclass-toolbar-additional toolbarbutton-1" label="GridSystem" tooltiptext="GridSystem" oncommand=""/>
<toolbarbutton id="GridSystem-disable-toolbar" label="显示栅格" tooltiptext="显示栅格" type="menu" οnmοuseοver="">
<menupopup onpopupshowing="webdeveloper_updateDisableMenu('toolbar')">
<menuitem id="GridSystem-disable-cache-toolbar" accesskey="" label="javascript" type="checkbox" oncommand=""/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
这个是像web developer一样订到工具栏面板上的。没有具体了解。暂时这样。
5. 把插件显示在菜单栏帮助的后面
<menubar id="main-menubar"> //id不能改变
<menu id="myextension" label="我的插件" persist="hidden" accesskey="r">
<menupopup id="menu_ToolsPopup">
<menu id="GridSystem" accesskey=""
class="menuitem-iconic" image="chrome://webdeveloper/skin/toolbar/disable.png" label="显示栅格">
</menu>
</menupopup>
</menu>
</menubar>
终于把栅格系统做完了,所做总结如下:
1. 自定义尺寸时的弹出框代码:
window.openDialog("chrome://GridSystem/content/popup.xul", "", "centerscreen,chrome,modal");
不需要计算弹出框的大小和如何居中显示
2.overlay.xul的代码如下:
<menubar id="main-menubar">
<menu id="myextension" label="我的插件" persist="hidden">
<menupopup id="menu_ToolsPopup">
<menu id="GridSystem"
class="menuitem-iconic" image="chrome://webdeveloper/skin/toolbar/disable.png" label="显示栅格">
<menupopup id="menu_ToolsPopup">
<menuitem id="GridSystem-type1" label="50*20" oncommand="GridSystem.onMenuItemCommand(event,{columnWidth:50,gutterWidth:20});"/>
<menuitem id="GridSystem-type2" label="60*30" oncommand="GridSystem.onMenuItemCommand(event,{columnWidth:60,gutterWidth:30});"/>
<menuitem id="GridSystem-type3" label="自定义" oncommand="GridSystem.onMenuItemCommand(event);"/>
</menupopup>
</menu>
</menupopup>
</menu>
</menubar>
同时包含一级菜单和二级菜单
3. popup.xul的写法值得借鉴一下:
<dialog buttons="accept, cancel"
id="webdeveloper-resize-dialog"
ondialogaccept="GridSystem_saveResize()"
ondialogcancel=""
οnlοad="webdeveloper_initializeResize()"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://GridSystem/content/popup.js"/>
<vbox>
<grid>
<columns>
<column/>
<column/>
</columns>
<rows>
<row align="center">
<label control="GridSystem.resize.width" value="列宽度"/>
<hbox>
<textbox id="GridSystem.resize.width" size="4"/>
<spacer flex="1"/>
</hbox>
</row>
<row align="center">
<label control="GridSystem.resize.height" value="渠宽度"/>
<hbox>
<textbox id="GridSystem.resize.height" size="4"/>
<spacer flex="1"/>
</hbox>
</row>
</rows>
</grid>
</vbox>
</dialog>
默认accept、cancel为确定、取消按钮。取消事件不需要额外添加。
引入新的popup.js,路径为全路径
注意表格布局
4. popup.js
function GridSystem_saveResize(){
var columnWidth = document.getElementById("GridSystem.resize.width").value;
var gutterWidth = document.getElementById("GridSystem.resize.height").value;
window.opener.GridSystem.onMenuItemCommand(null,{columnWidth:columnWidth,gutterWidth:gutterWidth});
}
可囍的是popup.js中可以通过window.opener.GridSystem来调用其方法。
5. 遗憾的是,无法引入外部css文件,skin/overlay.css还未被使用。