web-dev-qa-db-ja.com

Firefox 57以降でタブ付きの複数の行を作成するにはどうすればよいですか（Tab Mix Plusアドオンは機能しなくなりました）？

Firefox 57以降でTab Mix Pluxアドオンが機能しなくなった後、Firefox 57以降で複数行のタブを使用するにはどうすればよいですか（Firefox 57ではすべてのレガシー拡張機能が削除されます）。おそらく私はただ待つべきですか？

これはおそらく、最後にテストしたときに、OperaまたはChrome（およびChromeにプライバシーの問題がある）で見つけることができなかった唯一の機能です。だから、私は単一のオプションではなく、いくつかのオプションがあるようです。

  1. このスレッド で示唆されているように、FF 52 ESR（可能性のある問題を含む）にダウングレードするか、ナイトリービルドを使用できます...

  2. 別の可能なオプションは、[FF Current Profile Folder]/chrome/userChrome.cssファイルを使用することです（フォルダーを作成する必要があります）。ここで、コードを配置できます。 500以上のタブを使用して、FF 57でテストしたものを次に示します。

（EDIT 1：R4zenの答えと同様に、いくつかのcssルールを追加していくつかのスペース/ボタンを非表示にします。 ...しかし、結果はほとんどの人にとって同じかもしれません！質問を投稿したときにこのコードをテストしましたが、何が起こっているのかをより簡単に理解するために、より少ないコードを投稿することにしました。それから利益を得ます。）

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
    display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
    #tabbrowser-tabs .tabbrowser-tab {
        flex-grow: 1;
        flex-wrap:wrap;
        min-width: 150px;
        vertical-align: bottom !important;
    }
    #tabbrowser-tabs .tabbrowser-tab,
    #tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
        height: var(--tab-min-height);
    }
        #tabbrowser-tabs .tabbrowser-tab .tab-stack {
            width: 100%;
        }
    #tabbrowser-tabs .tabbrowser-tab[pinned] {
        min-width: 0px;
        max-width: 40px;
    }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
            visibility: hidden !important;
        }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
            display: none !important;
        }
    /* Active tab's style - visuallyselected="true" === ACTIVE TAB */
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
        font-weight: bold;
    }
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
        background-color: Lime !important; /* green, Lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
    }
  • max-height: calc(5*var(--tab-min-height)) !important;の5は5行で、動的に計算された高さです。

上記のコードはタブを示していますが、それらの動作は非常に悪いです：

  • 最悪のこと-Ctrl+Tabを使用してタブ間をスクロールすると（最後の順序で）、切り替えられたタブが別の行（5行以上）にある場合、タブのある行はスクロールしませんアクティブなタブに。スライダーを使用して行を手動でスクロールし、選択した行を視覚的に見つける必要があります...（明確にするために、合計15行のうち5行を表示しました）

  • fFコアが誤って計算し、タブをランダムな位置に移動するため、タブをドラッグできません

    1. レガシーコードのフォークを使用するために、誰かがWaterFox（または別のフォーク）に言及しました。

現在、他の（より良い）ソリューションはありますか？

将来的には選択肢が増えると確信しているので、今日の正しい答えは1週間または1か月後には最良ではないかもしれません...

2019年4月編集（Firefox 66.x）：Firefox 66に更新した後、画面全体をカバーする行が多すぎました（1000以上のタブです）。上記の元のコードを編集し、いくつかのルールを追加する必要がありました。

#tabbrowser-tabs .arrowscrollbox-scrollbox {
    max-height: calc(5*var(--tab-min-height)) !important;
    overflow: auto;
    margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}

異なる行番号がある場合（タブ付きの5行がある場合）、それらを調整する必要があります。幸運を！

firefoxfirefox-addon
45
Minister

作業タブをドラッグした複数行のタブバー（FF 61でテスト済み）：

  1. ダウンロードして展開 https://luke-baker.github.io/Firefox_chrome.Zip
  2. userChrome.xmlをchromeフォルダーにコピーします。
  3. userChrome.cssからuserChrome.cssにコンテンツを追加します。
  4. MultiRowTabLiteforFx.uc.js をchromeフォルダーにダウンロードします。

chromeフォルダーは、ユーザープロファイルの下にあるchromeという名前のフォルダーです。 ~/.mozilla/firefox/g7fa61h3.default/chrome。デフォルトでは存在しないため、必要に応じて作成してください。

UPDATE

userChrome.xmlファイルは、Izheilの Quantum-Nox-Firefox-Dark-Full-Theme リポジトリから取得できるようになりました。また、タブ行の数に制限がある無制限のMultiRowTabスクリプトには2つのバージョンがあります。

22
xuhcc

私はいくつかの修正を行いましたが、バグはないはずです（タブを固定したり、ウィンドウを移動/ドラッグしたり、タブ間をスクロールしたりしても）：

#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}

.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
    display: none !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
    flex-grow: 1;
    flex-wrap:wrap;
    min-width: 150px;
    vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
    height: var(--tab-min-height);
}

#tabbrowser-tabs .tabbrowser-tab .tab-stack {
    width: 100%;
}

#titlebar-buttonbox {
    display: block !important;
    vertical-align: top !important;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

タブの最初の行が見えない場合は、about：configを開き、browser.tabs.drawInTitlebarの値をデフォルト値のtrueからfalseに変更します。

browser.tabs.drawInTitlebar     false

5行以上を使用するよりもタイトルバーの空き領域をクリックしてFirefoxウィンドウをドラッグする場合は、コードを削除するだけです。

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

5行以上の場合はスクロールバーを押して行間をスクロールできますが、一方で、ffウィンドウをタイトルバーでドラッグする機能を無効にします（5行以上使用しない場合は削除できます）。

13
R4zen

このCSS UIの変更の仕組みに興味がある人のために、ghacks.netで行われていることを説明した役立つ記事があります： https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css /

この記事は、git hubプロジェクト「Firefox 57+のカスタムCSS調整」 https://github.com/Aris-t2/CustomCSSforFx を参照していますさまざまなUIの調整が含まれており、それらを組み合わせて一致させることができます。そこにあるREADMEファイルは、オプションの中からどのように選択するかについての良い洞察を与えてくれます。

chromeディレクトリを作成する必要があるかどうかに関して：

私が使用したFedoraシステムでは、そのディレクトリを作成する必要がありました。 Macシステムでは、サンプルファイルuserChrome-example.cssおよびuserContent-example.cssがすでに存在し、含まれていました。

UserChrome-example.cssファイルには次のものがありました。

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

Browser.tabs.drawInTitlebarをfalseに設定する必要がありましたが、一度実行すると、R4zenのコードは@namespace行の有無にかかわらず正常に機能しました。

2
poetnerd

私はこれを行う方法を追加すると思いました。 （他のリンク先Webサイトで提供されていますが、すべての情報を1か所に保存する方が良いでしょう。）

  • Firefoxを起動します
  • アドレスバーに「about：support」と入力します
  • 表には、「Profile folder」という行があります。 「フォルダーを開く」ボタンをクリックします。
  • 「chrome」の下に「userChrome-example.css」というファイルがあり、「userChrome.css」に名前を変更して編集できます。

私の場合、％appdata％が間違ったドライブを指し示していたため、これにより時間を大幅に節約できました。さらに、行末がメモ帳に表示されないため、notepad ++をインストールする必要がありました。

0
Sanjay Manohar

Izheilの github repo は上記のコメントスタックで参照されていますが、上記で共有されたURLは機能しませんでした（したがって、再共有）。そこに記載されている手順は、FF66ベータ版（3行の非暗黒のスクロール可能なタブバー）にアップグレードした後、Firefoxのルックアンドフィールを許容レベルに戻すのに役立ちました。私はFF Quantumベータチャンネルにこだわっています。

FF 66 b4以降のOSXでは、次の手順が機能しました。

The highlighted 4 files needed at a minimum 。

  1. 上記の選択した4つのファイルは、少なくともプロファイルのchromeフォルダーに必要です。
  2. さらに、独自のカスタマイズ（アンロード、ピン留めされたタブの色など）を追加したい場合は、それぞれのファイル（jsファイル）を変更し、手順3と4を実行してそれらを有効にしました。
  3. ⁨Macintosh HD⁩ -> ⁨Users⁩ -> [ACCOUNT] -> ⁨Library⁩ -> ⁨Caches⁩ -> ⁨Firefox⁩ -> ⁨Profiles⁩ -> [PROFILE_NAME] -> ⁨startupCache⁩のすべてのファイルをクリアしました。 [PROFILE_NAME]フォルダーはデフォルトで非表示になっています。
  4. その後、Firefoxインスタンスを再起動しました。
  5. chromeフォルダーに、使用するcss、js、およびxmlファイルのみがあることを確認してください。他のすべてを安全な場所にバックアップ/移動します。
0
shuhradk