Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Change tab height

  • 8 trả lời
  • 1 gặp vấn đề này
  • 5193 lượt xem
  • Trả lời mới nhất được viết bởi cor-el

more options

Hi all,

I'd like to modify the tab height, to make it thinner. Is this something that can be done, perhaps via the userChrome.css file?

Thanks in advance.

Giải pháp được chọn

Try this code for the height. Make sure that --tab-min-height has the same value in both places.


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

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}
Đọc câu trả lời này trong ngữ cảnh 👍 1

Tất cả các câu trả lời (8)

more options
  1. Go to ≡ -> Customize…
  2. Press Density and select Compact.
more options

Try this code in userChrome.css

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

:root {
  /* fix for full screen mode */
  --tab-toolbar-navbar-overlap: 0px !important;
  /* set minimum tab height  */
  --tab-min-height: 25px !important;
}

#TabsToolbar {height:var(--tab-min-height)!important; margin-top:-1px!important; margin-bottom:1px!important}

You may need this code as well:

/* Override vertical shifts when moving a tab */
#TabsToolbar[movingtab] {padding-bottom:0px!important}
#TabsToolbar[movingtab] > .tabbrowser-tabs {padding-bottom:0px!important; margin-bottom:0px!important}
#TabsToolbar[movingtab] + #nav-bar {margin-top:0px!important}
more options

@TyDraniu: I would like to keep Density set to "Touch" to have a wider toolbar.

@cor-el: I've inserted both snippets, it has no effect.

more options

Hi dr01, are you familiar with the Browser Toolbox? It has an Inspector tool you can use to poke around in the toolbar area and test changes interactively by finding and modifying the values Firefox is applying (in the Rules pane to the right of the structural diagram). Once you find an approach that works, you can formalize a rule for your userChrome.css file.

https://developer.mozilla.org/docs/Tools/Browser_Toolbox

more options

Giải pháp được chọn

Try this code for the height. Make sure that --tab-min-height has the same value in both places.


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

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}
more options

Thanks cor-el, this code works.

@jscher2000: Where are the Developer Tools Settings? I can't seem to find them on my Firefox (v64.0).

more options

dr01 said

@jscher2000: Where are the Developer Tools Settings? I can't seem to find them on my Firefox (v64.0).

If you have opened the Developer Tools panel (e.g., Ctrl+Shift+i), it is on the ••• menu:

more options

Once the developer tools are open, you can open the Settings page via the F1 key.

You can enable the Browser Toolbox via the Developer tools Settings page. Once the developer tools are open, open the Toolbox Options via the F1 key and look under "Advanced Settings":

"Enable browser chrome and add-on debugging toolboxes"
"Enable remote debugging"

This will add the Browser Toolbox item to the Web Developer menu (no restart necessary).