1

我已经为 FF 的Stylish插件制作了一个简单的 CSS，#navigator-toolbox当我悬停在主窗口时它会隐藏，而当我不在时会显示它。

这会产生一种简洁、即时的自动隐藏效果，因为我可以触摸屏幕的上边缘，只要指针悬停在它上面，工具箱就会显示出来。不过，我有一个小问题：我希望在输入 URL 时显示工具箱，因为当快速瞄准 URL 栏时，我的指针经常跳回主窗口而我不能看看我在输入什么。

由于 CSS 中缺少父选择器，这有可能实现吗？你对如何使它工作有什么建议吗？

这是 CSS，仅在具有经典主题且没有建议的 FF30 中有效（可能）：

/* overall box containing tab bar and nav bar */
    #navigator-toolbox {
    position:fixed !important;
    width:100% !important;
    min-height: 42px !important;
    height: 42px !important;
    }

/* box containing tab bar */
    #TabsToolbar {
       position:absolute !important;
       top:0px !important;
       left:0px !important;
       width:100% !important;
       height:20px !important;
    }

/* elements of tab bar */
    #tabbrowser-tabs {
    width:100% !important;
    position:relative !important;
    left:0px !important;
    height:21px !important;
    margin-left:-14px !important;
    }

    .tab-stack {
    min-height:1px !important;
    }

    .tab-text {
    padding-top:1px !important;
    padding-left:2px !important;
    }

    .tab-icon-image {
    width:13px !important;
    height:13px !important;
    }

    .tab-background {
    display:none !important;
    }

    #tabbrowser-tabs .tabbrowser-arrowscrollbox .scrollbutton-up,
    #tabbrowser-tabs .tabbrowser-arrowscrollbox .scrollbutton-down {
    display:none !important;
    }

/* box containing nav bar */
    #nav-bar {
    position:static !important;
    top:20px !important;
    width:100% !important;
    padding:0px !important;
    height:24px !important;
    border-width: 1px 0px !important;
    border-style:solid !important;
    border-color:#bbb !important;
     }

/* contents of nav bar */
    #urlbar-container, #urlbar {
    padding:0px !important;
    margin-left:-6px !important;
    }

    #urlbar {
    border-color:#bbb !important;
    height:20px !important;
    }

   #back-button, #forward-button, #ctr_back-forward-button, #alltabs-button, #nav-bar-overflow-button {
      display:none !important;
    }

    #urlbar-go-button, #urlbar-reload-button, #urlbar-stop-button {
    display:none !important;
    }

/* hide all elements in normal state */
/* display each element if pointer is outside window or hovering navigator toolbox */
    #navigator-toolbox {
       opacity: 0.0 !important;
       pointer-events:none !important;
    }

    #TabsToolbar {
       opacity: 0.0 !important;
    }

    tab * {
    pointer-events:none !important;
    }

    #nav-bar {
       opacity: 0.0 !important;
    }

    #urlbar {
       pointer-events:none !important;
    }

    #main-window:not(:hover) #navigator-toolbox, #navigator-toolbox:hover {
    opacity: 1.0 !important;
    pointer-events:all !important;
    }

    #main-window:not(:hover) #TabsToolbar, #navigator-toolbox:hover #TabsToolbar {
    opacity:1.0 !important;
    }

    #main-window:not(:hover) tab *, #navigator-toolbox:hover tab * {
    pointer-events:all !important;
    }

    #main-window:not(:hover) #nav-bar, #navigator-toolbox:hover #nav-bar {
    opacity:1.0 !important;
    }

    #main-window:not(:hover) #urlbar, #navigator-toolbox:hover #urlbar {
    pointer-events:all !important;
    }

很抱歉它这么丑，但我不太懂CSS；我在需要时查找特征，这是大量实验的结果。如果您有关于如何彻底改造它的提示，我也很高兴听到它。

当 URL 输入具有焦点时，如何使工具箱保持可见？

PS：床单也让吧台变得非常纤细，去除了装饰品等，但我认为它是做什么的很明显。

4

1 回答 1

1

当 url 栏获得焦点时，它会调用此属性focused并将其设置为true. 所以我要做的是设置一个突变观察者，每当属性发生变化并且该属性被聚焦时，就会显示该栏。

这是突变观察者，我刚刚从我的插件中复制和修改：https ://github.com/Noitidart/Throbber-Restored/blob/442c8642a5ba9281357ec34ed687c616bf942d1e/bootstrap.js#L48

const gMutationConfig = {
    attributes: true,
    attributeOldValue: true
};


this.DOMWindow = aDOMWindow;
this.DOMDocument = this.DOMWindow.document;
this.gBrowser = this.DOMWindow.gBrowser;
this.urlbar = this.DOMDocument.getElementById('urlbar');


this.gMutationFunc = function(ms) {
    for (let m of ms) {
        if (m.attributeName == 'focused') {
            //console.log('m.attributeName = ', m.attributeName, 'm.oldValue = ', m.oldValue);
            if (m.oldValue == 'true') { //if m.oldValue == null then it did not exist before, which means this attribute is being added now
                //focused attirbue as removed

            } else {
                //focused attirbue was added
            }
            break;
        }
    }
};

this.gMutationObserver = new this.DOMWindow.MutationObserver(this.gMutationFunc.bind(this));
于 2014-08-13T11:40:23.833 回答