Stories
Slash Boxes
Comments
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
 Full
 Abbreviated
 Hidden
More | Login | Reply
Loading... please wait.
  • grippies be gone (Score:3, Informative)

    by wickline (135) on 2003.02.16 15:32 (#17121) Journal
    > how to remove that

    Those little things are toolbargrippy things. If you haven't yet found the DOM Inspector in Mozilla, you'll probably appreciate it as you're working on this stuff. Tools menu :: Web Development submenu :: DOM Inspector. Once you've got the DOM Inspector window open, look in the View menu and ensure that every option is checked (so the following will make more sense).

    You'll need a URL which gives you a DOM which includes a grippy. If you've got some local XUL, you can use that. Otherwise, you can find URLs for mozilla chrome.

    Mozilla.org [mozilla.org] links to Developer Docs [mozilla.org] (in the left margin) which has XUL [mozilla.org] linked under Core Architecture. The bottom of that page links to a XUL Tutorial [xulplanet.com] which lists as section 1.3 The Chrome URL [xulplanet.com].

    On that page, you can find gems like the main Navigator window

    chrome://navigator/content/navigator.xul

    You can drop that URL into your DOM Inspector and start looking at all the whatzits and gizmos. In my skin, the DOM Inspector has an icon in the upper left of the window which looks like a circle with a pointer icon hovering over it. Mousing over that icon gives the tooltip "Find a node to inspect by clicking on it". Once you have your XUL loaded, you click that icon, then you click the whatzit (in the lower pane) that you want to inspect.

    In this case, you'd click a grippy. In addition to doing the usual grippy function (expanding or collapsing a toolbar), the DOM Node view of the DOM Inspector (the upper left pane) will open up the DOM tree to that point.

    The xul:toolbargrippy will be a child node of a toolbar (in my case, where I clicked on the navigational links toolbar of the navigator window). The xul:toolbargrippy doesn't have an id (second column in that DOM tree view in the upper left pane), but it is the child of a toolbar object which does have an id. That should give you a good starting point for a CSS selector to find apply {display: none;} to the grippy.

    You can even use this sort of stuff to customize your own mozilla chrome. You might already be familiar with the user.js file you can create in your profile directory. It works like prefs.js, but the application gives priority to your settings in user.js and it won't ever overwrite them no matter what you do in the app's prefs GUI. This is also where you set so-called invisible prefs (prefs for which a GUI is not available).

    There's a similar file you can have which will let you style the browser chrome. Your styles will apply to the chrome over the top of whatever skin your browser might happen to be wearing. I use this to clear some unused items from my toolbars, gain a bit more screen real estate, and make minor appearance changes. You could use it for whatever you want. There's another file you can use to apply your own CSS to all web pages.

    I won't go into details about the content CSS file, but you can read about it elsewhere [oreillynet.com]. If you're interested in some sample chrome CSS, here's what I have in my

    Mozilla/Profiles/myusername/random.slt/chrome/userChrome.css

    Happy XUL and CSS editing :)

    -matt

    PS: argh. Slashcode wouldn't let me post this comment because it compressed too well (too much repeated CSS syntax and whitespace). I've munged the whitespace a bit to make it postable, although perhaps a smidge less reader friendly.
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    /* set default namespace to XUL */
     
    /* Kill icons on normal bookmarks */
    toolbarbutton.bookmark-item:not(.bookmark-group):not([type="menu"])
    > .toolbarbutton-icon {
        display               : none !important;
    }
     
    toolbarbutton.bookmark-item {
        margin-left           : 0 !important;
        margin-right          : 0 !important;
        border-width          : 0 1px 0 0 !important;
        border-style          : none solid none none !important;
        border-color          : #94A5BD !important;
    }
     
    /* Kill normal bookmark icons in the bookmarks menu */
    menuitem.bookmark-item > .menu-iconic-left {
        display               : none !important;
    }
     
    /* Kill only default tabbrowser icons (no site icon) */
    .tabbrowser-tabs *|tab:not([image]) .tab-icon {
        display               : none !important;
    }
     
    /* dump some excess space around url bar: */
    #nav-bar-buttons {
        margin                : 0 !important;
        padding               : 0 !important;
        border                : 0 !important;
    }
    .toolbarbutton-icon {
        margin                : 0 !important;
        padding               : 0 !important;
        border                : 0 !important;
    }
    .toolbarbutton-box {
        margin                : 0 !important;
        padding               : 0 !important;
        border                : 0 !important;
    }
    #nav-bar-inner {
        margin                : 0 !important;
        padding               : 0 !important;
        border                : 0 !important;
    }
    #urlbar {
        margin                : 0 !important;
        padding               : 0 !important;
        border                : 1 !important;
    }
     
    /* Eliminate the throbber and its annoying movement: */
    #throbber-box {
        display               : none !important;
    }
     
    /* Eliminate the printer button: */
    #print-button {
        display               : none !important;
    }
     
    /* Eliminate the search button: */
    #search-button {
        display               : none !important;
    }
     
    /* Eliminate the go button: */
    #go-button {
        display               : none !important;
    }
     
    /* Shrink tab titles */
    .tabbrowser-tabs .tab-text {
        font-size             : 80% !important;
    }
     
    /*
      The  dropdown address and autocomplete windows are grey.
      To make them match better with the URL field and look more like 4.x:
    */
     
    /*  URL dropdown box  */
    #ubhist-popup {
        background            : white                 !important;
        border                : 1px solid black       !important;
        padding               : 0px                   !important;
    }
     
    /*  autocomplete text field  */
    .textfield-popup {
        background            : white                 !important;
        border                : 1px solid black       !important;
    }
     
    #ubhist-popup > .popup-internal-box, .textfield-popup > .popup-internal-box {
        border-left           : 1px solid white       !important;
        border-top            : 1px solid white       !important;
        border-right          : 1px solid white       !important;
        border-bottom         : 1px solid white       !important;
    }