fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-09-05
  • 发帖数180
  • 经验177枚
  • 威望0点
  • 贡献值190点
  • 好评度10点
  • 社区居民
  • 忠实会员
阅读:4715回复:6

标签栏地址栏同一列,习惯之后,就再也用受不了其他浏览器了

楼主#
更多 发布于:2024-06-24 09:07
搭配鼠标手势




userChrome.css:
/*隐藏前进后退图标*/
#back-button { display: none !important }
#forward-button { display: none !important }
    
/*隐藏网站信息图标*/
#identity-box { display: none !important }
    
/*隐藏盾形图标*/
#tracking-protection-icon-container { display: none !important }
    
/*隐藏地址栏添加书签图标*/
#star-button-box{
  margin-inline: calc((16px + var(--urlbar-icon-padding) * 2) / -2) !important;
  opacity: 0;
  pointer-events: none;
}
    
/*隐藏标签栏左右空白*/
.titlebar-spacer { display: none !important; }
    
/*隐藏右键图标*/
#context-navigation,
#context-sep-navigation
{display: none !important;}
    
/*书签图标*/
#bookmarks-menu-button {
  /*list-style-image: url("chrome://browser/skin/bookmark-hollow.svg")!important;*/
  list-style-image: url("chrome://global/skin/icons/arrow-down.svg")!important;
  /*list-style-image: url("chrome://global/skin/icons/resizer.svg")!important;*/
}
    
/*扩展图标*/
#unified-extensions-button{
 list-style-image: url("chrome://global/skin/icons/chevron.svg")!important;
 } 
    
/*窗口按钮间隔,linux 可能需要注释此项*/
.titlebar-button{ margin-inline: -5px !important; }
    
/*标题栏高度*/
:root {
  --tab-min-height: 34px !important;
  --tab-block-margin: 4px 6px !important;
}
/*#tabbrowser-arrowscrollbox {
  --tab-min-height: 40px !important;
  max-height: var(--tab-min-height);
}
.tabbrowser-tab {
  min-height: 24px !important;
}*/
    
/*===地址栏样式1===
#nav-bar { background  : none !important; }
#urlbar-background { outline:none !important; }
#urlbar:not(:hover):not([breakout][breakout-extend]) > #urlbar-background {
  box-shadow  : none !important;
  background  : none !important;
}*/
    
    
/*===地址栏样式2===*/
#nav-bar { background  : none !important; }
#urlbar * { box-shadow: none !important; }
#urlbar:not([open])   > #urlbar-background { background: none !important; }
#urlbar-background {
    outline: 2px solid AccentColor !important;
    outline-offset: -2px !important;
    outline-color: #606060 !important;
}
    
/*地址栏下拉列表*/
#urlbar[breakout][breakout-extend] {
  top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  --toolbar-field-focus-background-color: #DBDEDE !important;
}
    
/*地址栏标签栏同列*/
#urlbar-container { width: auto !important; }
 :root {  
    --uc-urlbar-width: clamp(200px, 240px, 300px);
}
@media (min-width: 500px) { 
    #TabsToolbar { margin-left: var(--uc-urlbar-width) !important; }
    #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 11px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
}





配合可移动主菜单图标的 uc.js,使用效果更佳:
// ==UserScript==
// @name
// @description     可移动 PanelUI 按钮
// @author          Ryan, firefox
// @include         main
// @shutdown        window.movablePanelUIButton.destroy()
// @compatibility   Firefox 78
// @homepage        https://github.com/benzBrake/FirefoxCustomize
// @note            2022.09.07 修正新窗口不能定制
// @note            2022.09.05 修正窗口报错
// @note            2022.08.27 fx 102+
// @note            2022.07.02 非 xiaoxiaoflood 的 userChromeJS 环境测试可用
// @note            2022.04.20 修改为可热插拔(不知道非 xiaoxiaoflood 的 userChromeJS 环境是否可用)
// @onlyonce
// ==/UserScript==
(function () {
    const CustomizableUI = globalThis.CustomizableUI || Cu.import("resource:///modules/CustomizableUI.jsm").CustomizableUI;
    
    if (window.movablePanelUIButton) {
        window.movablePanelUIButton.destroy();
    }
    
    window.movablePanelUIButton = {
        get sss() {
            delete this.sss;
            return this.sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
        },
        STYLE_ICON: {
            url: Services.io.newURI('data:text/css;charset=UTF-8,' + encodeURIComponent(`
            #movable-PanelUI-button {
                list-style-image: url(chrome://browser/skin/menu.svg);
            }
            `)),
            type: 0
        },
        STYLE_DISPLAY: {
            url: Services.io.newURI('data:text/css;charset=UTF-8,' + encodeURIComponent(`
            #PanelUI-button {
                display: none;
            }
            `)),
            type: 0
        },
        listener: {
            windows: windows,
            onCustomizeStart(win) {
                this.windows(function (doc, win, location) {
                    win.dispatchEvent(new CustomEvent("OriginalPanelUIButtonShow"));
                })
            },
            onCustomizeEnd(win) {
                this.windows(function (doc, win, location) {
                    win.dispatchEvent(new CustomEvent("OriginalPanelUIButtonHide"));
                })
            }
        },
        init: function () {
            this.sss.loadAndRegisterSheet(this.STYLE_ICON.url, this.STYLE_ICON.type);
            this.sss.loadAndRegisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
            CustomizableUI.addListener(this.listener);
            CustomizableUI.createWidget({
                id: "movable-PanelUI-button",
                type: "button",
                defaultArea: CustomizableUI.AREA_NAVBAR,
                localized: false,
                removable: true,
                onCreated: node => {
                    node.addEventListener('mousedown', this);
                    node.addEventListener('keypress', this);
                    let pNode = node.ownerDocument.getElementById('PanelUI-menu-button');
                    ['label', 'tooltiptext'].forEach(attr => node.setAttribute(attr, pNode.getAttribute(attr)));
                }
            });
            window.addEventListener('OriginalPanelUIButtonShow', this);
            window.addEventListener('OriginalPanelUIButtonHide', this);
        },
        handleEvent: function (event) {
            if (event.type === "mousedown" && event.button !== 0) return;
            switch (event.type) {
                case 'mousedown':
                case 'keypress':
                    let { target: node } = event;
                    let { ownerDocument: document } = node;
                    const { PanelUI } = document.defaultView;
                    PanelUI.menuButton = node;
                    PanelUI.show();
                    break;
                case 'OriginalPanelUIButtonShow':
                    this.sss.unregisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
                    break;
                case 'OriginalPanelUIButtonHide':
                    this.sss.loadAndRegisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
                    break;
            }
    
        },
        destroy: function () {
            this.sss.unregisterSheet(this.STYLE_ICON.url, this.STYLE_ICON.type);
            this.sss.unregisterSheet(this.STYLE_DISPLAY.url, this.STYLE_DISPLAY.type);
            CustomizableUI.destroyWidget("movable-PanelUI-button");
            windows(function (doc, win, location) {
                doc.defaultView.PanelUI.menuButton = doc.getElementById('PanelUI-button');
            })
            window.removeEventListener('OriginalPanelUIButtonShow', this);
            window.removeEventListener('OriginalPanelUIButtonHide', this);
            delete this;
        }
    }
    
    function windows(fun) {
        let windows = Services.wm.getEnumerator('navigator:browser');
        while (windows.hasMoreElements()) {
            let win = windows.getNext();
            if (!win._uc)
                continue;
            let { document, location } = win;
            if (fun(document, win, location))
                break;
        }
    }
    
    window.movablePanelUIButton.init();
})();
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2025-04-23
  • 发帖数2783
  • 经验595枚
  • 威望1点
  • 贡献值132点
  • 好评度106点
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于:2024-06-28 23:44
地址栏单列一行空荡荡的确实浪费,不过你的css没处理地址栏下拉菜单,下拉菜单跟随地址栏,宽度那么小什么都看不到。
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-09-05
  • 发帖数180
  • 经验177枚
  • 威望0点
  • 贡献值190点
  • 好评度10点
  • 社区居民
  • 忠实会员
2楼#
发布于:2024-07-02 09:20
alanfly:地址栏单列一行空荡荡的确实浪费,不过你的css没处理地址栏下拉菜单,下拉菜单跟随地址栏,宽度那么小什么都看不到。回到原帖
对我来讲,很少用到地址栏下拉菜单,倒是无所谓的,能看到主域名地址就可以了。
大佬有没有好的建议?
yangzhen
小狐狸
小狐狸
  • UID51672
  • 注册日期2015-11-07
  • 最后登录2025-04-25
  • 发帖数82
  • 经验86枚
  • 威望0点
  • 贡献值22点
  • 好评度2点
  • 社区居民
  • 忠实会员
3楼#
发布于:2024-07-02 17:54
fire/fox:对我来讲,很少用到地址栏下拉菜单,倒是无所谓的,能看到主域名地址就可以了。
大佬有没有好的建议?
回到原帖
https://github.com/lr-tech/OnelineProton/
https://github.com/crambaud/waterfall/
这两位的样式可以合并下
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-09-05
  • 发帖数180
  • 经验177枚
  • 威望0点
  • 贡献值190点
  • 好评度10点
  • 社区居民
  • 忠实会员
4楼#
发布于:2024-07-02 20:23
yangzhen:https://github.com/lr-tech/OnelineProton/
https://github.com/crambaud/waterfall/

这两位的样式可以合并下
回到原帖
我的css就是根据你发的第二个精简过来的,只挑了地址标签同列的那几行代码。
第一个我应该也试用过。
这两个css,除了地址标签同列和某些外观颜色定义之外,没有其他特别的功能。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2025-04-23
  • 发帖数2783
  • 经验595枚
  • 威望1点
  • 贡献值132点
  • 好评度106点
  • 社区居民
  • 最爱沙发
  • 忠实会员
5楼#
发布于:2024-07-02 20:32
fire/fox:对我来讲,很少用到地址栏下拉菜单,倒是无所谓的,能看到主域名地址就可以了。
大佬有没有好的建议?
回到原帖
老哥老兄都行,大佬当不起。每个人需求不同,我是很喜欢firefox地址栏弹出菜单的。
我把地址栏弹出菜单弄宽了,不再受地址栏宽度限制。代码是自用的不知道兼容咋样。
/*下拉菜单弹出时地址栏不要移动*/
#urlbar[breakout][breakout-extend] {
     left: 0 !important; 
}
/*地址栏下拉菜单扩大*/
#urlbar[open] > .urlbarView {
/*菜单宽度占窗口百分比*/
    width: 90vw !important;
    background-color: #ffffff !important;
    margin-inline: 0px !important;
    /*下拉地址栏边框*/
    border-left: 1px solid ThreeDShadow !important;
    border-right: 1px solid ThreeDShadow !important;
    border-bottom: 1px solid ThreeDShadow !important;
}
/*去除地址栏下拉和地址栏之间的分界线以免和导航栏边框重合变粗*/
#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {
    border-top: none !important; 
}
 
@media screen and (min-width: 600px) {
/*窗口宽度大于600px时还原.urlbarView-results[wrap]时对地址栏下拉菜单分行的更改*/
.urlbarView-no-wrap {
/*最长标题宽度比例*/
    max-width: 70% !important;
/*标题宽度与url排列方式*/
    flex-basis: auto !important;
}
/*禁止下拉条目分行*/
.urlbarView-row-inner {
    flex-wrap: nowrap !important;
}
.urlbarView-url {
    /*去除url周围空白*/
    margin:0px !important;
}
 
/*恢复分隔符*/
.urlbarView-title-separator {
    display: block !important;
}
/*窗口宽度大于600px时还原.urlbarView-results[wrap]时对地址栏下拉菜单分行的更改 -end-*/
  
}
fire/fox
火狐狸
火狐狸
  • UID32624
  • 注册日期2010-04-21
  • 最后登录2024-09-05
  • 发帖数180
  • 经验177枚
  • 威望0点
  • 贡献值190点
  • 好评度10点
  • 社区居民
  • 忠实会员
6楼#
发布于:2024-07-02 20:48
alanfly:老哥老兄都行,大佬当不起。每个人需求不同,我是很喜欢firefox地址栏弹出菜单的。
我把地址栏弹出菜单弄宽了,不再受地址栏宽度限制。代码是自用的不知道兼容咋样。
/*下拉菜单弹出时地址栏不要移动*/
#urlbar {
     ...
回到原帖
值得参考
游客

返回顶部