DB2

因为图片太宽，要完整显示，请点击这里暂时禁止样式单。

恢复样式单，请点击这里，或者刷新本页。

最近几天看有关Firefox Extension 的开发，有很多知识链接，使用MindManager 做了这个思维导图，链接可以点击。

更新了链接，增加了浏览指引小图标

Firebug 是针对Firefox 的一个插件，它与Firefox 很好的集成到了一起，帮助你分析与网页在客户端的一切行为，当然，获益最大的大概就是Javascript 的调试了。

下面是一个例子，红色部分代表遇到了一个脚本错误。

点开后，Firebug 指示出了错误文件与相关代码行。

 再继续查看，就直接定位到了相关上下文，这里我们可以看到，是在line 22 多了一个额外的注释标记 "*/"，导致此错误。

修复后，显示正常状态。

如果错误不太容易找到，还可以设置断点进行调试，直接在行号部分点击即可设置断点，然后刷新一次网页重新执行脚本，执行到断点处会自动停下，可以像通常调试工具一样选择执行进度，观察并设置变量。

Firebug 是完全免费的，要了解更多的功能，请参考考官方网站 。 

前日看网站日志，发现IE 与Firefox 在对待外联CSS 上的一些细微差别。

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="projection" />

对待这样的CSS定义，Firefox 会把screen.css 完整下载两次，而IE 仅仅会有一次访问。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:12 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"

但是对于另外一项，它们却有不同的表现。

<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="screen" title="PrintPreview"/>
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="print" />

Firefox 针对print.css 访问了一次，而IE 则有两次，第二次是http 304 ，也属于正常。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/print.css HTTP/1.1" 200 1486 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/print.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:12 -0700] "GET /css/print.css HTTP/1.1" 200 1486 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11" 

再来看另外一个例子，screen.css 与screen-clearstyle.css 均引用了base.css 和extend.css 。

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" title="GetStyleBack" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen-clearstyle.css" media="screen" title="ClearStyle" />

@import "base.css";
@import "extend.css";

对于多个CSS 文件引用的同一个CSS，Firefox 不会再去检查文件修改日期，而IE 照例进行了多次访问，虽然后续仅访问了header，如果引用比较复杂的话，还是有一些可观流量的。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/base.css HTTP/1.1" 200 1484 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/base.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/extend.css HTTP/1.1" 200 1964 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/extend.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/base.css HTTP/1.1" 200 1484 "http://www.aiview.com/css/screen.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/extend.css HTTP/1.1" 200 1964 "http://www.aiview.com/css/screen.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"

通过这次测试，还学习了一点额外的东西，对于浏览器来说，F5 与CTRL+F5 有一些区别，虽然都是刷新，但F5 仅仅会重新获取相比cache 有所更新的文件，CTRL+F5 则强制性重新获取所有文件。另外提一点，在Firefox 中，F5 与工具栏中的刷新按钮，或者是菜单中的刷新项(CTRL+R)，效果都一样，IE 也是如此。

 

顺便把CSS 切换功能 给取消了，还是保持简单点好。因此上面的部分代码，在页面源文件中已经找不到了，下面是个完整的参考：

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/common.css" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" title="GetStyleBack" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/screen-linestyle.css" media="screen" title="LineStyle" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/screen-clearstyle.css" media="screen" title="ClearStyle" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="screen" title="PrintPreview" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="projection" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/aural.css" media="aural" />
<script type="text/javascript" language="javascript" src="http://www.aiview.com/switch-css.js"></script>

 

故障现象

输入域名 mail.google.com 或者 gmail.com 访问Gmail，Firefox 显示空白页，无任何提示，同一时间使用IE 却可以正常访问。

解决方法

造成大多数人无法访问的根源在于下面的第一条，如果无法解决再尝试后面2条。

1. 在域名之前加上 https://，指定 http:// 或者仅输入域名均无法访问
2. 确认Firefox 选项设置中允许SSL连接
3. 如果安装有防火墙，检查设置

在IE 中无需特别指定https，以任意方式输入，均会跳入正常页面。

放弃2.0  

从前使用1.5 遇到过这个问题，升级到2.0 后问题自然消失，也就没有深究。最近发现2.0 响应速度很慢，经常把CPU 用到100％，切换一个Tab 要花费几秒钟，开始以为是Flash 插件惹的祸，安装了Flashblock 禁用Flash 之后，问题依旧，也排除了页面script、打开页面太多等问题。今天装回到1.5 版本，响应慢的问题也随之解决。不过gmail 的问题又回来了，google 了一下，发现问题很普遍 ，答案也多种多样，比如：域名解析、SSL、TLS、防火墙、代理设置、Pop Block，证书等等。但我经过测试，其实真正的原因只有一个，就是大家输入域名的习惯问题，省略了"https://" 或者其中的 "s"。把https://gmail.com 或者 https://mail.google.com 加入收藏夹即可。

对于大多数默认安装的Firefox 1.5 来说，上述其它方面导致问题的概率比较低。

google.com 域名一直存在大陆访问不稳定的问题，mail.google.com 也曾经受累一段时间，不过现在，mail.google.com 已经比较稳定了。在你发现IE 可以访问gmail，但Firefox 无法访问时，十有八九本文可以帮到你。

欢迎大家反馈。 

I use <pre> to wrap the programming code in my pages. What I want is:

• the code within <pre> would not have any unexpected line wrap.
• display horizontal or/and vertical scrollbar only as need to have.
• I don't want the fixed width. it should be flexible with the window width change, and would not exceed to the menu part. the horizontal scrollbar would have if needs.
• I want to have the flexible height that depends content, but maximum 450px. the vertical scrollbar would have if exceeds.

That's all I want, but it won't work out with both Firefox and IE without hacks. I had this style first.

pre {overflow: auto;border: 1px solid #ccc;width: 90%;max-height: 450px;padding: 8px;}

overflow: auto tells to have scrollbar as need. maxheight tells the limitation of the height. I soon found that maxheight is not supported in IE. IE would extend the height as far as the content need. And that's not all, IE push it much. With overflow: auto, you will get the unexpected vertical scrollbar that follows horizontal scrollbar. The reason is that IE will see the horizontal scrollbar as a part of content, then it will give the stupid vertical scrollbar like this. (you'll see an unexpected vertical scrollbar below if you use IE)

Here's a simple for test IE vertical scroll bar problem. When this line is long enough to exceed container that makes IE have a horizontal scrollbar, then the vertical scrollbar comes. If this line is not long enough for your screen yet, please decrease your screen size.The style this object using:<pre style="border: 1px solid #cccccc; padding: 8px; overflow: auto; width: 90%">

There's solution found here and here(none English, none Chinsese, only see the code) , they use IE hacks to resolve the vertical scrollbar problem. It do works, but I still prefer to have the limited height. I got this IE hack for having maxheight in IE. Below's the style.

pre {overflow: auto;border: 1px solid #ccc;width: 90%;max-height: 450px;padding: 8px;}* html pre { /* IE hacks */height: expression(this.scrollHeight > 450 ? "450px" : "auto");}

For the damn vertical scrollbar in IE I got an idea from the code in this post. The idea is to encrease the height after IE calculated the object height. Here's a show, the damn vertical scrollbar in the example above will be removed.About IE scrollHeight logic there's more detail, here's an artible for it.

Here's a simple for test IE vertical scroll bar problem. When this line is long enough to exceed container that makes IE have a horizontal scrollbar, then the vertical scrollbar comes. If this line is not long enough for your screen yet, please decrease your screen size.This style remove the unexpected verticle scrollbar.<pre style="border: 1px solid #cccccc; padding: 8px; overflow: auto; height: expression(this.scrollHeight+15); width: 90%">

It works but new problem came. This style width: 90% is not going to act as expect if I use above code. IE will confuse the base line between window width and container(div) width for the objects having scrollHeight > 450. I have to have below code with it together in IE hack to resolve. IE brings too much issue! 

 

height: expression(this.scrollHeight > 450 ? "450px" : this.scrollHeight+15);width: expression(this.scrollHeight > 450 ? "62%" : "90%");

 

62% is an experience value that works for me. For you it depends your page structure and your favor. Finally, I had my things done. Below is the finally code in my style sheet. The image code.gif is a cool idea to personalize your code area.  CSS Selector ":before" and ":after" could do the similar thing but it's only supported by CSS 3. Currently CSS 2 is widely supported. Another article(Chinese) about CSS Selector.

pre {margin: 16px;overflow: auto;padding: 40px 0 20px 60px;max-height: 450px;background: transparent url(/images/code.gif) left top no-repeat;}* html pre { /* IE hacks */height: expression(this.scrollHeight > 450 ? "450px" : this.scrollHeight-40);width: expression(this.scrollHeight > 450 ? "62%" : "90%");}

I'm not sure exactly what the difference of Plugins and Extentions on Firefox is.

There're Plugins such as Flash, WMP, Shockwave. 

There're plenty of Extentions which add various features into Firefox.

I'm seeking an Extention which acts like what screen copy does.

I installed Follwing Extentions.

NOTE: I must install them by running the hdd version of Firefox because I run my Firefox on my RAM disk. otherwise all installed Extentions will be lost after a reboot. 

infoRSS 

infoRSS 1.01.

Displays RSS, Atom, HTML and NNTP feed in the status bar. Compatible with podcasting RSS.

It's also a good Gmail notifier.

Flickr Sidebar 

Flickr Sidebar 0.1.1, by Richard Klein, released on December 23, 2005

This Flickr sidebar is used for viewing and searching photo lists. You can access it by the command key Ctrl+Shift+F, the toolbar button, or clicking on the menu option View|Sidebars|Flickr Sidebar. Once you have authorized the extension to work with your flickr account, you can search through or view a full list of your photos, your favorites, everyones photos, your individual contacts, or your groups. Double clicking a photo opens it's page in the current tab. You can also use all the standard link modifiers to open in tabs and windows.

Finally, I found the Extention what I want at outside of Firefox Addons.

Pearl Crescent Page Saver

Pearl Crescent Page Saver 1.0

a free extension for Mozilla Firefox that lets you save an image of a web page to a file in PNG format.  Options let you control whether images are saved at full size (which is the default) or scaled down to a smaller size.  The Page Saver extension uses the new canvas feature that was introduced in Firefox 1.5. 

Reference

• Mozilla Update :: Extensions - Add Features to Mozilla Software
  https://addons.mozilla.org/extensions/ 
  
• Pearl Crescent Page Saver
  http://pearlcrescent.com/products/pagesaver/
  

I had ever moved my IE temporary files folder into a Ram disk for reducing the disk IO during surfing.

When I play with Firefox, I don't find any option for moving its temporary files folder like IE does. But finally I found it, not just moving the firefox's profiles, even for firefox.exe itself.

There're 3 level solutions you may choose.

1. Enable built-in memory cache feature to speed firefox up.
   
2. Move profile folder to Ram disk including temporary files folder.
   
3. Run both firefox.exe and profile folder on Ram disk.

The 1th solution is most simple, the 3th solution is most complex but has the maximum of reducing disk IO.

The steps for the 1th solution refer to:

• Specify the memory cache usage
  http://www.mozilla.org/support/firefox/tips#oth_memcache

Before starting to do the next 2 solutions, you will have to create a Ram disk on your computer. I use this tool called RamDisk, download it at:

• http://www.greendown.cn/Software.asp?id=530
  

The steps for the 2th solution refer to:

• Specify where to store the cache
  http://www.mozilla.org/support/firefox/tips#oth_cache
  

• Just simply set the cache path to Ram disk.
  

The steps for the 3th solution: 

1. Copy the Firefox application folder and your profile folder to the Ram disk. In this example we will use R:\Firefox for the application folder and R:\FFProfile as the profile folder, assuming the drive letter for the Ram disk is R:.
2. Create a simple batch file called R:\Firefox.bat with the following line:
   

   start R:\Firefox\firefox.exe -profile R:\FFProfiles

3. Optionally, you may don't want to lose the bookmarks saved in Ram disk after reboot. Move bookmark file back to harddisk folder by entering about:config in the address field of firefox and set
   

   browser.bookmarks.file=C:\\Documents and Settings\\Alex\\Application Data\\Mozilla\\Firefox\\Profiles\\ve6luvh6.default\\bookmarks.html

4. Make system copy firefox application and profile folder from hard disk to Ram disk automatically at each boot time by adding following lines to file C:\AUTOEXEC.BAT.
   

   rd /S /Q R:\Firefox
   rd /S /Q R:\FFProfiles
   del R:\Firefox.bat
   
   xcopy /E /H /K "%APPDATA%\Mozilla\Firefox\Profiles\ve6luvh6.default\*" R:\FFProfiles\*
   xcopy /E /H /K "C:\Program Files\Mozilla Firefox\*" R:\Firefox\*
   
   echo start R:\Firefox\firefox.exe -profile R:\FFProfiles>R:\Firefox.bat
   R:\Firefox.bat
   

5. Optionally, disable firefox memory cache to reduce memory usage because the whole program and profiles are running in Ram by setting
   

   browser.cache.memory.enable=false

6. Notes: With this solution, all settings made in Ram disk will be lost after system reboots. If you want the settings to be used after rebooting, should make the setting change by running firefox based on harddisk, and then re-copy all folder from hard disk to Ram disk by running AUTOEXEC.BAT.
7. Refer to:
   Run Firefox from removable media
   http://www.mozilla.org/support/firefox/tips#oth_usb

Refer to

• Firefox Help - Online Help for the Mozilla Firefox Web Browser
  http://www.mozilla.org/support/firefox 
  

Tested on

• OS: Windows xp professional
• Firefox: version 1.5

继续阅读 "running firefox on Ram disk" 的剩余内容