iake

วันจันทร์ที่ 3 มกราคม พ.ศ. 2554

Firefox 4 Personalize

Firefox 4 ตัวที่เขียนบล็อกขณะนี้เป็นตัว Beta 8 หน้าตาเดิม ๆ บนวินโดวส์ 7 หน้าตาเป็นดังภาพด้านล่าง (ใช้ส่วนขยาย Omnibar เพื่อรวม search bar เข้ากับ awesome bar)

ในส่วนของ awesome bar แล้วก็แบบอักษรมันดูเล็กซะเหลือเกิน ทรมานสายตาดีจริง ๆ ทั้งในส่วนติดต่อผู้ใช้ของวินโดวส์เองก็เล็ก ๆ แบนี้ ปรับแก้ธีมของวินโดวส์ แก้แบบอักษรใหม่ ให้มันดูดีขึ้น (ใช้แบบอักษร Waree) หลังจากแก้ไข หน้าตา Firefox เกิดปัญหาดังนี้

เกิด (1) พื้นที่ทับซ้อนกันระหว่าง firefox button กับแท็บ (2) ชื่อของเครื่องมือค้นหา (Google) ร่วงไปอยู่ด้านล่าง (3) ปุ่ม Back กลายเป็นวงรี ไม่กลมเหมือนเก่า เนื่องจากขยายความสูงของ awesome bar เพิ่มขึ้น เลยดึงปุ่ม Back ให้สูงเพิ่มขึ้น แต่ความกว้างไม่เพิ่มตาม เลยกลายเป็นวงรี (ปัญหาภายหลังแก้ธีมของวินโดวส์เหล่านี้พวก IE, Chrome, Opera, Safari ส่วนติดต่อผู้ใช้ไม่มีเพี้ยนแบบนี้)

จัดการแก้ไข Omnibar ให้ชื่อเครื่องมือค้นหามันเข้ามาอยู่ตรงกลางช่อง

diff --git a/chrome/skin/default.css b/chrome/skin/default.css
index 8501b0b..8a61e36 100644
--- a/chrome/skin/default.css
+++ b/chrome/skin/default.css
@@ -12,9 +12,7 @@
 }
 #omnibar-defaultEngineName {
     color: gray;
-    margin-bottom: 0;
-    margin-left: 1px;
+    margin-top:-5px;
 }
 
 #omnibar-in-urlbar {
 

ต่อไปแก้ปุ่ม Firefox กับ Tab เพิ่มเป็นไฟล์ userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#appmenu-button{
  padding: 0 4px !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
  padding-top: 13px !important;
}

ดูดีสวยงามขึ้นแล้ว

เหลือปุ่ม Back นี่แหละ ยากโครต ปล่อยค้างคามาเป็นเดือน ๆ เพราะไม่รู้ว่าจะจัดการกับมันยังไง ใครที่เคยเห็นภาพถ่ายหน้าจอ firefox 4 ใน twitpic หรือใน flickr ของผม จะสังเกตปุ่ม Back นี่มันเป็นวงรีมานานแล้ว ช่วงปีใหม่มีเวลายาว ๆ นั่งรื้อโค้ดดู และแล้วปัญหานี้มันก็ได้แก้สักที

diff --git a/browser/themes/winstripe/browser/browser.css b/browser/themes/winstripe/browser/browser.css
index f781081..62602ea 100644
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -709,7 +709,7 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 toolbar:not([iconsize="small"])[mode="icons"] #back-button {
   border-radius: 10000px;
   padding: 0;
-  width: 30px;
-  height: 30px;
+  width: 35px;
+  height: 35px;
   position: relative;
   z-index: 1;

เพิ่มความกว้างความสูงให้ปุ่ม Back สัก 5 pixel ทดลองแล้วใช้ได้ โค้ดข้างบน diff จาก source code ของ Firefox 4.0b8 แต่ถ้า Firefox ที่คอมไพล์แล้วมันโค้ดส่วนนี้อยู่ในไฟล์ omni.jar ก็ unjar แล้วแก้ตามได้ แก้เสร็จก็ jar แต่ว่าถ้ามีการ update รุ่นถัดมา มันก็จะกลับเป็นแบบเดิม เพราะโค้ดที่แก้นี้ไม่ได้แก้จากต้นน้ำ ก็ต้องใช้วิธีแก้ผ่านไฟล์ userChrome.css โดยเพิ่มโค้ดนี้ต่อท้ายดูด่านล่าง

toolbar:not([iconsize="small"])[mode="icons"] #back-button {
  width: 35px !important;
  height: 35px !important;
}

เรียบร้อย ปุ่มกลมเหมือนเก่าแล้ว

ใส่ Persona นิดหน่อย

พวกตัวเลขนี่คงแล้วแต่ว่าแก้ธีมของระบบไปมากน้อยยังไง แล้วมันกระทบกับ Firefox ต้องลองเพิ่มลดเอาเอง ดูเป็นแนวทางคร่าว ๆ แล้วกัน ของใครของมันคงไม่เหมือนกัน.

-----------------------------

Note 06/02/2010

ตั้งแต่ Minefield v:4.0b12pre buildID: 20110205030343

โค้ดเปลี่ยนแปลง ปุ่ม Back Button กลับมาเป็นวงรีเหมือนเดิม ที่ hack ผ่าน userChrome.css ไว้เดิมใช้ไม่ได้

hack ใหม่ แก้โค้ด

diff --git a/userChrome.css b/userChrome.css
index ed53a4e..65c4ff4 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -8,7 +8,7 @@ padding: 0 4px !important;
  padding-top: 13px !important;
}

-toolbar:not([iconsize="small"])[mode="icons"] #back-button {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
  width: 35px !important;
  height: 35px !important;
}

04/03/2010 Firefox 4 Release Candidate 1

เปลี่ยนโค้ดใหม่ อ้างถึง Bug 570279, mercurial userChrome.css ที่แก้:

#appmenu-button{
padding: 0 3px !important;
font-size: 13px;
}

#main-window[sizemode=normal] #TabsToolbar[tabsontop=true]:not([inFullscreen]) {
padding-top: 8px !important;
font-size: 14px;
max-height: 40px;
}

#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
width: 35px !important;
height: 35px !important;
}