How to style the #navigator-toolbox and children when typing a URL?

Question

I've made myself a simple CSS for FF's Stylish add-on that hides the #navigator-toolbox whenever I'm hovering the main window and shows it whenever I'm not.

This results in a neat, instant auto-hide effect because I can touch the screen's upper edge and the toolbox shows as long as the pointer hovers over it. I've got one small problem, though: I'd like the toolbox to be shown when I'm typing a URL, because when quickly aiming for the URL bar, my pointer often jumps back into the main window and I can't see what I'm typing any more.

With the lack of parent selectors in CSS, is this possible to achieve? Do you have any suggestions how to make it work?

This is the CSS, works (maybe) only in FF30 with classic theme and without suggestions:

/* 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;
    }

I'm sorry it's that ugly, but I don't really understand CSS; I look up characteristics when I need them and this is the result of a lot of experiments. If you have a hint how to completely revamp it, I'd be glad to hear it as well.

How do I keep the toolbox visible when the URL input has focus?

PS: The sheet also makes the bar very slim, removes decorations etc, but I think it's quite obvious what does what.

score 1 · Answer 1 · answered Aug 13 '14 at 11:40

When the url bar gets focused it gets this attribute called focused and its set to true. So what I would do is setup a mutation observer, and whenever attribute changes and that attribute is focused, then ill show the bar.

Here's the mutation observer, i just copied and modified from my addon here: 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));

Thank you! I had hoped for some ingenious way to do this in CSS, but modifying FF through JS seems to be less complicated than I thought. I assume that code would go in the userChrome.js? — Pikaro, Aug 14 '14 at 15:17
Oh Im not sure how to do this without an addon. This code has to go into an addon. For a css only option Im not sure how to do it. You can style things around it, but you cant get the parent styled so you can do this: `urlbar[focused] ~ * {background-color:red}` that will make its proceding sibilings red when urlbar is focused. — Noitidart, Aug 14 '14 at 18:27

How to style the #navigator-toolbox and children when typing a URL?

1 Answers1