<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Becomin&#039; Charles &#187; firebug</title>
	<atom:link href="http://sexywp.com/tags/firebug/feed" rel="self" type="application/rss+xml" />
	<link>http://sexywp.com</link>
	<description>Building another myself~~</description>
	<lastBuildDate>Fri, 27 Jan 2012 16:00:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>修改Firebug的工具栏按钮调用方式</title>
		<link>http://sexywp.com/modify-the-firebug-call-way.htm</link>
		<comments>http://sexywp.com/modify-the-firebug-call-way.htm#comments</comments>
		<pubDate>Tue, 02 Dec 2008 06:22:30 +0000</pubDate>
		<dc:creator>Charles</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[advanced topics]]></category>
		<category><![CDATA[DIY]]></category>
		<category><![CDATA[firebug]]></category>

		<guid isPermaLink="false">http://www.charlestang.cn/?p=269</guid>
		<description><![CDATA[昨天晚上，我写了篇文章，说我在玩Firefox美化，其实，我主要在做的工作，就是清理Firefox浏览器界面上不需要的东西，尽量的压缩界面，扩大网页的可视化面积。

昨天，为了隐藏掉Firefox的状态栏，我已经进行了相当多的努力，要隐藏掉状态来，还要保存状态栏的所有功能，着实不是那么简单的一件事情，老肥的文章只介绍了怎么把显示Active Link的功能搬移到地址栏里显示（使用Fission），还有把Gmail Manager整合到工具栏按钮。而我昨天提出的第三个问题，即firebug按钮，整合到工具栏后，调用方式变成“在新窗口中打开”，我今天终于给搞定了。

<span class="readmore"><a href="http://sexywp.com/modify-the-firebug-call-way.htm" title="修改Firebug的工具栏按钮调用方式">Keep Reading --- 1237 words totally</a></span><table class="wumii-related-items" cellspacing="0" cellpadding="2" border="0" width="100%" style="clear: both;">
    
    <tr>
        <td ><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fsome-problems-when-custom-firefox.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">玩玩Firefox美化</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fscreen-shot-gun-for-firefox.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">[FireFox插件]—FireShot网页截屏利器</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fhow-to-get-a-cat-id.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">如何获得一个分类的ID</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fcreate-your-own-filter.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">创建自己的filter</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fthe-behavior-of-checkbox-in-html.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">HTML语言中checkbox的行为</font>
                    </a>
                </td>
            </tr>
    
    <tr>
        <td  align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>昨天晚上，我<a href="http://sexywp.com/some-problems-when-custom-firefox.htm">写了篇文章，说我在玩Firefox美化</a>，其实，我主要在做的工作，就是清理Firefox浏览器界面上不需要的东西，尽量的压缩界面，扩大网页的可视化面积。</p>
<p>昨天，为了隐藏掉Firefox的状态栏，我已经进行了相当多的努力，要隐藏掉状态来，还要保存状态栏的所有功能，着实不是那么简单的一件事情，老肥的文章只介绍了怎么把显示Active Link的功能搬移到地址栏里显示（使用Fission），还有把Gmail Manager整合到工具栏按钮。而我昨天提出的第三个问题，即firebug按钮，整合到工具栏后，调用方式变成“在新窗口中打开”，我今天终于给搞定了。</p>
<p><span id="more-269"></span><strong>以下一段思路分析，可以跳过。</strong></p>
<p>Firebug内部带的工具栏按钮，是一个双重状态按钮，即开关（toggle），按一下开，再按一下关。其上绑定的动作，就是在新窗口中打开，而不是我们熟悉并且喜爱的在同一窗口的底栏打开。修改的思路就是：</p>
<p>1. 找到这个按钮；</p>
<p>2. 找到在底栏嵌入firebug这个命令；</p>
<p>3. 将在底栏嵌入firebug的命令绑定到按钮上；</p>
<p>确立这个思路，完全是一种直觉，建立在对程序运行原理的理解上的，没错，就是函数调用，一般来说，一个按钮按下去，会调用一个函数，这个函数的运行决定了程序的响应方式，既然firebug有两种出现方式，那么可以简单的猜测，是两个不同的函数，一个从底栏嵌入，一个在新窗口中弹出。</p>
<p>好了，思路定了，就开始执行，那么怎么找？那可是相当难了，因为我完全没有接触过Firefox插件开发，对Firefox底层构架不了解，对于插件的结构更是不了解，于是乎，唯一的办法，瞎找。简单看一下插件目录下的代码，就知道，Firefox插件基本上由js代码，css代码，xml代码组成，除此之外，都是些图片。都是纯文本，打开查看没有什么障碍的。</p>
<p>最大的障碍是什么，就是不知道名字，其实昨天也有提到这个，就是改userChrome.css可以自定义外观，但是改哪个id的属性，改哪个class的属性呢？你不知道工具栏上第4个按钮的id或者class到底是什么，你更不知道按钮旁边的那个小箭头叫什么，凭什么叫dropmarker而不叫droparrow。就好像在茫茫人海中找一个只知道特征，不知道姓名的人一样。你只能傻看，不能调动公安局的数据库帮忙。我终于还是没能找到，毕竟傻找不是办法。</p>
<p>结局，办法总是有的，没有直接的，有迂回的。我想起来，firebug在工具菜单下有个子菜单的，哪个菜单里有两种调用firebug的方式，编过一点Win应用的可能都知道的，菜单的工作方式和按钮是完全一样的。那么找不到按钮，找菜单也可以，找到菜单，可以找到菜单调用的函数名，然后再用函数名去反过来定位按钮，也行。菜单项很多，而且一般会写在一个文件里，目标比较大，应该好找。哈哈，结果，还是不好找……囧。</p>
<p>灵机一动，菜单项里有汉字，汉字是字符串，靠，这下终于跟某个名字挂钩了，可以搜了！！直接打开locale文件夹，找到简体中文的配置文件，搜索菜单项，找到：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Olive;">&lt;</span><span style="color: Gray;">!</span><span style="color: #00008b;">ENTITY</span><span style="color: Gray;">&nbsp; </span><span style="color: #00008b;">firebug</span><span style="color: Gray;">.</span><span style="color: #00008b;">ShowFirebug</span><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">打开 Firebug</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br /></span><span style="color: Olive;">&lt;</span><span style="color: Gray;">!</span><span style="color: #00008b;">ENTITY</span><span style="color: Gray;">&nbsp; </span><span style="color: #00008b;">firebug</span><span style="color: Gray;">.</span><span style="color: #00008b;">DetachFirebug</span><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">在新窗口中打开 Firebug</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></div></div>
<p>原来那个方法叫做DetachFirebug，ok，在整个目录下搜索DetachFirebug，一共没多少，一个个判断，终于找到：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Olive;">&lt;</span><span style="color: Green;">toolbarpalette</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">BrowserToolbarPalette</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: Green;">toolbarbutton</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">inspector-button</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">label</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Navy;">&amp;firebug.Inspect;</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">toolbarbutton-1 chromeclass-toolbar-additional</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #00008b;">observes</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">cmd_toggleInspecting</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">tooltiptext</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Navy;">&amp;firebug.InspectElement;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">/&gt;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: Green;">toolbarbutton</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">firebug-button</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">label</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Navy;">&amp;firebug.Firebug;</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">toolbarbutton-1 chromeclass-toolbar-additional</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: #00008b;">observes</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">cmd_toggleDetachFirebug</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">tooltiptext</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Navy;">&amp;firebug.DetachFirebug;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">/&gt;</span><span style="color: Gray;"><br />&nbsp;&nbsp; &nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">toolbarpalette</span><span style="color: Olive;">&gt;</span></div></div>
<p><strong>最后，修改方法（刚才跳过的童鞋从这里接）：</strong></p>
<p>找到:</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Gray;">%appdata%\Mozilla\Firefox\Profiles\xxxxxxx.default\extensions\firebug@software.joehewitt.com\content\firebug\browserOverlay.xul</span></div></div>
<p>文件，把上面那段代码找到，然后把cmd_toggleDetachFirebug改成cmd_toggleFirebug，把firebug.DetachFirebug改成firebug.<a href="http://sexywp.com/tags/firebug" class="st_tag internal_tag" rel="tag" title="标签 firebug 下的日志">Firebug</a>，保存，然后重启Firefox，按一下工具栏上的firebug按钮，怎么样？是不是变成和状态栏按钮里一样的效果了？</p>
<p>Enjoy it！</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="2" border="0" width="100%" style="clear: both;">
    
    <tr>
        <td ><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fsome-problems-when-custom-firefox.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">玩玩Firefox美化</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fscreen-shot-gun-for-firefox.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">[FireFox插件]—FireShot网页截屏利器</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fhow-to-get-a-cat-id.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">如何获得一个分类的ID</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fcreate-your-own-filter.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">创建自己的filter</font>
                    </a>
                </td>
            </tr>
            <tr>
                <td style="margin: 0 !important; padding: 0 !important; line-height: 20px !important;">
                    <img border="0" src="http://static.wumii.com/images/widget/widget_solidPoint.gif">
                    <a target="_blank" style="text-decoration: none !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fsexywp.com%2Fthe-behavior-of-checkbox-in-html.htm&from=http%3A%2F%2Fsexywp.com%2Fmodify-the-firebug-call-way.htm">
                        <font size="-1" color="#333333" style="line-height: 1.65em; font-size: 12px !important;">HTML语言中checkbox的行为</font>
                    </a>
                </td>
            </tr>
    
    <tr>
        <td  align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>
	标签：<a href="http://sexywp.com/tags/advanced-topics" title="advanced topics" rel="tag">advanced topics</a>, <a href="http://sexywp.com/tags/diy" title="DIY" rel="tag">DIY</a>, <a href="http://sexywp.com/tags/firebug" title="firebug" rel="tag">firebug</a>, <a href="http://sexywp.com/tags/firefox" title="Firefox" rel="tag">Firefox</a><br />
]]></content:encoded>
			<wfw:commentRss>http://sexywp.com/modify-the-firebug-call-way.htm/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

