為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

How to show url in address bar and not other stuff

more options

Over the years user interface changes have been eating away at one of my primary memory and navigation tools: the address bar. Now it's gone way too far. On secure connections with valid signed certificate even the `http:` is partially hidden, making the address bar completely useless. I want to use the full extent of the address bar space to be occupied BY THE URL of the page I'm on.

The name of the cert holder, the bookmark star, the pocket icon and the 3 dots can all go find some other place to live -- They're all useful, I don't object to their existence. I just object to them obscuring the address bar.

See attached image.

Over the years user interface changes have been eating away at one of my primary memory and navigation tools: the address bar. Now it's gone way too far. On secure connections with valid signed certificate even the `http:` is partially hidden, making the address bar completely useless. I want to use the full extent of the address bar space to be occupied BY THE URL of the page I'm on. The name of the cert holder, the bookmark star, the pocket icon and the 3 dots can all go find some other place to live -- They're all useful, I don't object to their existence. I just object to them obscuring the address bar. See attached image.
附加的畫面擷圖

所有回覆 (5)

more options

Firefox lets you customize and manage toolbar and overflow menu. Go to options and select customize. There you can drag items and customize as per your requirement.

more options

sharique_11 said

Firefox lets you customize and manage toolbar and overflow menu. Go to options and select customize. There you can drag items and customize as per your requirement.

That allows me to customize the space around the address bar, but it doesn't let me manipulate the extra things inside the address bar which I don't want there.

more options

For the "page actions" area on the right end of the address bar:

For the "identity" area:

  • you can use a custom style rule to hide the Extended Validation (EVSSL) owner name, either always or until you hover the padlock (I think I've posted the rule(s) in other threads, but couldn't find it in a quick search)
more options

Looking at your screenshot, some other style rules hacks you might consider are:

  • hiding the zoom reset button from the address bar (you can reset using Ctrl+0) if you like
  • shrinking the white space between toolbar buttons to make more space

Maybe I can work on it this evening.

more options

Here's a thought. "Before and after" screenshot attached.

/* MaxAddress */

/* Reduce width of identity area (show more details on hover) */
#identity-box {
  padding-left: 3px !important;
  padding-right: 3px !important;
  margin-right: 3px !important;
}
#identity-box.verifiedIdentity #identity-icon, 
#identity-box.verifiedDomain #identity-icon {
  width: 0 !important;
  transition: width 250ms ease-in-out 250ms;
}
#identity-box.verifiedIdentity:hover #identity-icon, 
#identity-box.verifiedDomain:hover #identity-icon {
  width: 16px !important;
  transition: width 250ms ease-in-out 1s;
}
#identity-box.verifiedIdentity #identity-icon-labels {
  display: none !important;
}

/* Shrink page actions */
#pageActionSeparator {
  display: none !important;
}
#urlbar-zoom-button {
  margin: 0 !important;
}
.urlbar-page-action .urlbar-icon, 
.urlbar-page-action.urlbar-icon, 
.urlbar-history-dropmarker {
  width: 20px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* Hide page actions until hovered */
#page-action-buttons:not(:hover) {
  border-left: 7px solid #ddd;
  border-radius: 14px;
  width: 0 !important;
  overflow-x: hidden;
}
#page-action-buttons:hover {
  width: auto !important;
  border-left-width: 0 !important;
}

/* Narrow the spacing between toolbar buttons */
#nav-bar .toolbarbutton-icon {
  width: 20px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}
#PanelUI-button {
  margin-left: 0 !important;
  border-left: none !important;
}
#PanelUI-menu-button, .toolbarbutton-badge-stack {
  padding-left: 0 !important;
  padding-right: 1px !important;
}

That would be for a userChrome.css file. https://www.userchrome.org/how-create-userchrome-css.html