[Soft][Usability] Firefox 2

[yurikhan]

Как всем уже известно, тут вчера случился релиз браузера Firefox 2.0.

Как обычно, половина расширений отключилась — нет совместимой с 2.0 версии. И в том числе Tabbrowser Extensions, который я очень любил и тащил через все апгрейды, несмотря на то, что он сильно замедляет браузер и вообще не рекомендован. Ну ладно, попробуем в новой жизни обойтись Tab Mix Plus’ом…

Второе, что бросается в глаза — это скин. С градиентами на tab bar’е и невиндовой обивкой вокруг address bar’а. Это неправильно. Это надо чинить.

Открываем chrome/userChrome.css в профайле и добавляем:

/* remove tabs skin */
.tabbrowser-tabs,
.tabbrowser-tab > .tab-image-left,
.tabbrowser-tab[chromedir="rtl"] > .tab-image-left,
.tabbrowser-tab:not([selected="true"]) > .tab-image-left,
.tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-left,
.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left,
.tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-left,
.tabbrowser-tab > .tab-image-middle,
.tabbrowser-tab:not([selected="true"]) > .tab-image-middle,
.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle,
.tabbrowser-tab > .tab-image-right,
.tabbrowser-tab[chromedir="rtl"] > .tab-image-right,
.tabbrowser-tab:not([selected="true"]) > .tab-image-right,
.tabbrowser-tab[chromedir="rtl"]:not([selected="true"]) > .tab-image-right,
.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right,
.tabbrowser-tab[chromedir="rtl"]:hover:not([selected="true"]) > .tab-image-right,
.tabs-bottom
{
  background-image: none !important;
}
.tabbrowser-tab
{
  -moz-appearance: tab !important;
  padding: 1px 0px 2px 0px !important;
  margin-top: 4px !important;
}
.tabbrowser-tab[selected="true"]
{
  padding: 1px 0px 4px 0px !important;
  margin-top: 2px !important;
}
tab[beforeselected="true"],
tab[afterselected="true"][chromedir="rtl"] {
  -moz-appearance: tab-left-edge !important;
  border-right: none !important;
  -moz-border-radius-topright: 0 !important;
}
tab[afterselected="true"],
tab[beforeselected="true"][chromedir="rtl"] {
  -moz-appearance: tab-right-edge !important;
  border-left: none !important;
  -moz-border-radius-topleft: 0 !important;
}

У меня часто открыто много tab’ов. Они не вмещаются. Кнопки прокрутки я не люблю: пока дождёшься, когда оно до противоположного конца отскроллится, вечность пройдёт. Лучше включим полосу прокрутки.

/* add tab scrollbar */
.tabs-frame
{
  overflow-x: scroll !important;
}

Теперь займёмся address bar’ом. Сначала стандартную виндовую рамку:

/* Windows-style address bar */
#urlbar
{
  border: 2px solid !important;
  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow !important;
  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow !important;
  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow !important;
  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow !important;
}

Да, но теперь кнопка недавно набранных url’ов выглядит по-дурацки.

.autocomplete-dropmarker-bkgnd-top,
.autocomplete-dropmarker-bkgnd-mid-top,
.autocomplete-dropmarker-bkgnd-mid-bottom,
.autocomplete-dropmarker-bkgnd-bottom
{
  list-style-image: none !important;
  background-image: none !important;
  display: none !important;
}
.autocomplete-history-dropmarker
{
  -moz-appearance: menulist-button !important;
  width: 10px !important;
  height: 11px !important;
  padding: 0px !important;
  border: 2px solid !important;
  -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight !important;
  -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow !important;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow !important;
}

И ещё оторвать эту ужасную зелёную кнопку Go, которую придумали в Microsoft для тех, у кого на клавиатуре нет Enter’а.

/* remove Go button */
#go-button-stack
{
  display: none !important;
}

Ну и для полноты картины — код, который перекрашивает менюшки в классический вид:

/* Classic Menus */
.menu-accel,
.menu-iconic-accel,
.menu-text,
.menu-iconic-text
{
  margin-top: 0px !important;
}

.menu-iconic-left
{
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  min-width: 12px;
  -moz-margin-start: 2px;
  -moz-margin-end: 2px;
}

menubar > menu
{
  border: 1px solid transparent !important;
  padding-top: 0px !important;
  padding-bottom: 1px !important;
  margin-bottom: 1px !important;
  -moz-padding-start: 2px;
  -moz-padding-end: 3px;
}

menubar > menu[_moz-menuactive="true"]
{
  background-color: transparent !important;
  color: MenuText !important;
  border-top: 1px solid ThreeDHighlight !important;
  border-right: 1px solid ThreeDShadow !important;
  border-bottom: 1px solid ThreeDShadow !important;
  border-left: 1px solid ThreeDHighlight !important;
}

menubar > menu[_moz-menuactive="true"][open="true"]
{
  background-color: transparent !important;
  color: MenuText !important;
  border-top: 1px solid ThreeDShadow !important;
  border-right: 1px solid ThreeDHighlight !important;
  border-bottom: 1px solid ThreeDHighlight !important;
  border-left: 1px solid ThreeDShadow !important;
  padding-top: 1px !important;
  -moz-padding-end: 2px !important;
  padding-bottom: 0px !important;
  -moz-padding-start: 3px !important;
}

menupopup,
popup {
  border: 2px solid !important;
  -moz-border-top-colors: ThreeDLightShadow ThreeDHighlight !important;
  -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow !important;
  -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow !important;
  -moz-border-left-colors: ThreeDLightShadow ThreeDHighlight !important;
  padding: 1px !important;
  min-width: 1px !important;
  background-color: Menu;
}

popup[type="autocomplete"],
.autocomplete-history-popup
{
  border-width: 1px !important;
  -moz-border-top-colors: ThreeDDarkShadow !important;
  -moz-border-right-colors: ThreeDDarkShadow !important;
  -moz-border-bottom-colors: ThreeDDarkShadow !important;
  -moz-border-left-colors: ThreeDDarkShadow !important;
  padding: 0px !important;
  background-color: -moz-Field !important;
}

menulist > menupopup,
.menulist-menupopup
{
  border-width: 1px !important;
  -moz-border-top-colors: -moz-FieldText !important;
  -moz-border-right-colors: -moz-FieldText !important;
  -moz-border-bottom-colors: -moz-FieldText !important;
  -moz-border-left-colors: -moz-FieldText !important;
  padding: 0px;
  min-width: 0px;
  background-color: -moz-Field;
}