Firefox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Firefox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

30 Ağustos 2018 Perşembe

Firefox Quantum: Hız ve Tasarım Bir Arada

Geçenlerde ev bilgisayarımda kullandığım internet tarayıcısını değiştirmek istedim. Normalde Yandex Browser kulanıyordum ev bilgisayarımda ancak çok fazla yenilik gelmediğini ve benim daha çok ilgimi çeken Opera'ya geçmeyi düşündüm.

Opera'yı Pardus 17.3 üzerinde kurdum hatta işyerindeki bilgisayarımda da Opera kullanıyorum yine Pardus 17.3 üzerinde. Ancak nedense işyerinde almış olduğum performansı ev bilgisayarımda alamadım ve bende diğer alternatifleri test etmeye başladım. İşe Firefox ESR 52 ile başladım ve sonuç vasatın altındaydı. Ardından Firefox'un 61.0.2 sürümünün çıktığını gördüm ancak sonucun değişmeyeceğini düşündüğüm için bende diğer alternatifleri denemeye karar verdim. Özellikle Vivaldi'ye hala alışamadığımı gördüm. Chrome'u zaten sevmiyorum. En son Midori'yi de denedikten yeniden Firefox'a döndüm ve son sürümü indirdim.



Kurulumu yaptıktan sonra farkettim ki Firefox kendisini tamamen yenilemiş, Quantum adını verdiği yeni bir altyapıya geçmiş, yeni özellikler getirmiş. Opera'da hali hazırda kullanmakta olduğum ekran görüntüsü alma özelliği gelmiş mesela. Buraya ufak bir not düşmek isterim. Opera yıllardır birçok internet tarayıcısından çok önce birtakım özellikleri kendisine entegre etmeyi başardı. Örneğin; yerleşik reklam engelleme, vpn, ekran görüntüsü alma, yerleşik sohbet uygulamaları (whatsapp, telegram gibi).

Bende biraz denedim ve araştırdım ki Firefox Quantum altyapısına geçtikten sonra 170 milyon kez indirilmiş. Bir yıl önceki istatistiklerle kıyaslandığında ise %44 daha fazla oranda indirilmeye ulaşmış. Yani Firefox çok büyük bir fark yaratmış. Özellikle arayüzünü yenilemesi bence kesinlikle olması gereken bir şeydi. Bu yüzden bence bu başarının temeli arayüzde saklı.

30 Mayıs 2018 Çarşamba

Firefox Tarayıcınızı Tek Çubuk Yapın

Firefox tarayıcısı kullananların karşılaştığı ve genelde benimde şahsi olarak çok hoşlanmadığım özelliği sekmelerin, adres çubuğunun, yer imleri çubuğunun alt alta yer alması ve çok fazla alan kaplamasıdır. Ahmet Özer arkadaşımızın wmaracı forumunda paylaştığı blog yazısına denk geldim. güzel bir çözüm bularak Firefox'u tıpkı Chrome gibi tek çubuk haline getirmiş. Aslında kişisel blogum da başka bloglar ve sitelerde gördüğüm yazıları kolay kolay paylaşmam. Ancak Ahmet arkadaşımız blog yazısını ingilizce yazdığı için Türkçe bir anlatım yapma gereği hissettim.


Öncelikle işin özü Firefox'unuzun kurulu bulunduğu klasöre yeni bir klasör açarak CSS kodlarıyla tasarımsal düzenlemeler yapmış oluyoruz. Bunu yapabilmek için;

Windows kullanıyorsanız: "%appdata%\Mozilla\Firefox\Profiles\XXXXXXXXX.default",
Linux kullanıyorsanız: “.mozilla/firefox/XXXXXXXXX.default” yolunu takip edin.

Buradaki XXXXX ifadesi sizin profil numaranızı belirtir. Örneğin benim için bu klasörün adı "n2gtf3at.default" olarak geçiyor. Bu klasörün içine "chrome" adını verdiğimiz bir klasör açıyoruz. Bu chrome klasörünün içine ise "userChrome.css" adında bir dosya oluşturup aşağıdaki kodları dosyanın içine yapıştırıyoruz. ***Firefox'unuzu kapatmayı unutmayın.

/* 
Original layout by /u/Herkt https://www.reddit.com/r/FirefoxCSS/comments/7eazix/my_attempt_at_a_oneline_interface/ 
New layout by https://ahmetozer.org
Use with compact density
dynamic theme https://addons.mozilla.org/en-US/firefox/addon/weatherlicious/
*/
:root {
  --tabs-border: transparent !important;                             /* active tab left & right borders - not working in 58?*/
  --toolbox-border-bottom-color: transparent !important;             /* 1px line under background tabs */
  --chrome-nav-bar-controls-border-color: transparent !important;    /* border around url bar */
}
browser {
    margin-right: -17px !important;
    overflow-y: scroll;
    overflow-x: hidden;
}
 /* Move Tab-bar beside Nav-bar */
#TabsToolbar {      
  margin-bottom: 0px !important;
  margin-top: 0px !important; 
  margin-left: 35vw !important;
  margin-right: -34px !important;
  max-height: 32px !important;
}

#nav-bar {      
  margin-bottom: -1px !important; 
  margin-top: -32px !important;
  margin-right: 65vw !important; 
  border-top: none !important;
}   

/* Remove padding above tabbar in compact mode */
#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: initial !important;
}


/* Back & Forward buttons */  
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon {
  transform: scale(0.9, 0.9) !important;
  margin-left: -2px !important;
  margin-right: -2px !important; 
}

/* Move hamburger menu to the left */
#PanelUI-button,
#customization-panel-container,
#customization-panelWrapper .panel-arrow { 
  -moz-box-ordinal-group: 0 !important;
  margin-right: -6px !important;
}

#appMenu-popup {
  margin-right: -258px !important;
}

#appMenu-popup .panel-arrow {
  margin-right: 248px !important;
}

/* More tools... button */
#nav-bar-overflow-button { 
  transform: scale(0.9, 0.9) !important;
  fill: var(--color-overflow) !important;
}  


/* Tabs */
.tabbrowser-tab {
  height: 32px !important; 
}

/* Remove empty space before first tab
Delete this rule if you need a space to drag the window*/
#TabsToolbar .titlebar-placeholder[type="pre-tabs"]{
    display: none !important;
}

/* Remove border between tabs
Delete this rule if you want separators between background tabs */
.tabbrowser-tab::after, .tabbrowser-tab::before {
  border-left: none !important;
} 

/* Border between background tabs */
.tabbrowser-tab::after, .tabbrowser-tab::before {
  color: grey !important; 
  opacity: .2 !important; 
 }

/* New tab button color */
#new-tab-button, .tabs-newtab-button {
  fill: var(--chrome-color) !important;
  } 

/* tab line - adjust color & size, default #0a84ff 2px */
.tab-line {
  background-color: #0a84ff !important;
  height: 0px !important;
  }


/* Hide various elements */
/* Menu */
#appMenu-fxa-container,                    /* Sign in to Sync */
#appMenu-fxa-container+toolbarseparator,
/* #appMenuRestoreLastSession, */
#appMenu-zoom-controls,
#appMenu-zoom-controls+toolbarseparator,
#appMenu-edit-controls,
#appMenu-edit-controls+toolbarseparator,
#appMenu-library-button,
#appMenu-customize-button,
#appMenu-customize-button+toolbarseparator,
#appMenu-open-file-button,
#appMenu-save-file-button,
#appMenu-find-button,
#appMenu-more-button,

/* URL Bar */
#pageActionButton,
#pocket-button-box,
ar-button,
.autocomplete-history-dropmarker,
#identity-icon-labels
{
    display: none !important;
}
 Yeni sekme sayfasına arkaplan resmi eklemek isterseniz de yine "chrome" klasörü içinde "userContent.css" dosyası oluşturup aşağıdaki kodları içine atın.

@-moz-document url(about:home) {
 body
  {
    background-color: #2D253A !important;
 background-image: url("https://source.unsplash.com/@ahmetozer/likes/1920x1080") !important;
 background-repeat:no-repeat !important;
 background-size: cover !important;
 background-position: center !important;
 overflow:hidden !important;
  }
 #onboarding-overlay-button, .prefs-button { display: none !important; }
 .section-title .click-target span {
   color: #fff !important;
   fill: #fff !important;
  }
 .top-site-inner .title span {
   color: #fff !important;
  }
  
 .prefs-pane-button button:hover {
   background-color: #0000001a !important;
  }
 .edit-topsites-button .edit span {
   color: #fff !important;
  }
}
@-moz-document url(about:newtab) {
 body
  {
 background-color: #2D253A !important;
 background-image: url("https://source.unsplash.com/@ahmetozer/likes/1920x1080") !important;
 background-repeat:no-repeat !important;
 background-size: cover !important;
 background-position: center !important;
 overflow:hidden !important;
  }
 #onboarding-overlay-button, .prefs-button { display: none !important; }
 .section-title .click-target span {
   color: #fff !important;
   fill: #fff !important;
  }
 .top-site-inner .title span {
   color: #fff !important;
  }
 .prefs-pane-button button:hover {
   background-color: #0000001a !important;
  }
 .edit-topsites-button .edit span{
   color: #fff !important;
  }
}

@-moz-document url(about:blank) {
 body
  {
 background-color: #2D253A !important;
 /*background-image: url("https://source.unsplash.com/@ahmetozer/likes/1920x1080") !important;*/
 background-repeat:no-repeat !important;
 background-size: cover !important;
 background-position: center !important;
 overflow:hidden !important;
  }
 #onboarding-overlay-button, .prefs-button { display: none !important; }
}
Hepsi bu kadar. Artık Firefox'u açabilirsiniz. Dilerseniz isteğinize göre CSS kodlarıyla oynayarak sizde kendinize göre tasarım düzenlemeleri yapabilirsiniz.

Ahmet Özer'in yazısına bakmak isterseniz: https://ahmetozer.org/Firefox-one-line.html