お豆腐

2017/11/16

Firefox57用に直した。タブの入れ替えは出来ません

2012/12/09

Firefox17からD&D時に変な動きをするようになったので zzzz-removeTabMoveAnimation.uc.js が必要です

多段タブ(Firefox57から)

:root {
  --multirowtab-height:          25px; /* タブの高さ */
  --multirowtab-min-width:      100px; /* タブの最小横幅 */
  --multirowtab-max-width:      225px; /* タブの最大横幅 */
  --multirowtabbar-height:          3; /* タブバーの高さ(段数) */
}
.tabbrowser-arrowscrollbox {
  -moz-binding: url("chrome://global/content/bindings/scrollbox.xml#arrowscrollbox") !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  display: block !important;
  overflow: visible !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  
  /*段数制限いらない人はこれを消す*/
  max-height: calc(var(--multirowtab-height) * var(--multirowtabbar-height)) !important;

}
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned],
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox,
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  min-height: var(--multirowtab-height) !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag !important;
}
.tabbrowser-tab:not([pinned]) {
  flex-grow: 1 !important;
  min-width: var(--multirowtab-min-width) !important;
  max-width: var(--multirowtab-max-width) !important;
}
.tabbrowser-tab {
  min-height: var(--multirowtab-height) !important;
  vertical-align: top !important;
  display: -webkit-box !important;
}
.tab-stack {
  width: 100% !important;
  min-height: unset !important;
}
[uidensity="touch"]:root .tab-close-button {
  padding: 0 calc(9px - 2px) !important;
}
.tab-label-container[pinned] {
  visibility: collapse !important;
}
#new-tab-button,
.tabs-newtab-button {
  min-width: 0px !important;
  width: 28px !important;
  margin-bottom: -1px !important;
  height: var(--multirowtab-height) !important;
}
#new-tab-button .toolbarbutton-icon,
.tabs-newtab-button .toolbarbutton-icon {
  width: 16px !important;
  height: 16px !important;
  margin: 0px !important;
  padding: 0px !important;
  background: none !important;
}
#new-tab-button:hover,
.tabs-newtab-button:hover,
#TabsToolbar > toolbarbutton:hover,
#TabsToolbar > .panel-wide-item > toolbarbutton:hover {
  background: var(--toolbarbutton-hover-background) !important;
}
#new-tab-button:active,
.tabs-newtab-button:active,
#TabsToolbar > toolbarbutton:active,
#TabsToolbar > .panel-wide-item > toolbarbutton:active {
  background: var(--toolbarbutton-active-background) !important;
}
#TabsToolbar > toolbarbutton:not(.bookmark-item):not(#new-tab-button) > .toolbarbutton-icon,
#TabsToolbar > toolbarbutton > .toolbarbutton-badge-stack,
#TabsToolbar > .panel-wide-item .toolbarbutton-icon {
  padding: 0px var(--toolbarbutton-inner-padding) !important;
  background: none !important;
}
#TabsToolbar .toolbarbutton-text {
  padding-top: 0 !important;
  min-height: unset !important;
  background: none !important;
}
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .autorepeatbutton-up,
#tabbrowser-tabs .autorepeatbutton-down,
.arrowscrollbox-overflow-start-indicator,
.arrowscrollbox-overflow-end-indicator,
.tabbrowser-tab:not([fadein]){
  display: none !important;
}

多段タブ(Firefox56まで)

CSS を有効にした後一度再起動してください

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
}
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 93px !important; /*タブバーの高さ*/
}
.scrollbutton-up,
.scrollbutton-down {
  display: none !important;
}
.tabbrowser-tab:not([pinned]) {
  min-width: 250px !important; /*タブの横幅*/
}
.tabs-newtab-button {
  vertical-align: top !important;
  height: 31px !important;
}

更新履歴

2017-12-08

UI密度とアイコン類

2017-11-28

可変幅とホイールでスクロールできるように

2017-11-26

タイトルバーなくてもスクロールできるように

2017-11-19

タブが一段の時隙間空いてた

2017-11-17

新しいタブを開くボタンが変だった

2017-11-16

Firefox57

2015-04-07

2014-04-07

2012-12-09

2012-09-11

2012-09-04

2011-12-18

2011-11-29

公開