Firefox built in PDF reader - remove the notification bar
  • Starting from Firefox 19 (i think) the built in PDF viewer will be enabled for everyone. What annoys me about this is the stupid yellow notification bar that says "This PDF file may not be displayed correctly"

    Even examined it a little bit with DOM Reader but no luck getting rid of the bar. Can anyone figure out the code?
    If youre using current stable 18.0.1 then you can enable the viewer from about:config and setting "pdfjs.disabled" to false.
  • EDIT from the post below:

    notification[label="This PDF document might not be displayed correctly."]
    { display: none !important; }


    Now, you may want to try to make it less annoying.
    I'm using this style. Customize as you wish. I can't publish it 'cause the site rejects it, probably needs namespaces at the top but since it works for me as is i'm not going to bother:

    notification[label="This PDF document might not be displayed correctly."]
    { display: none !important; }

    notification
    { background: none !important;
    font-size: 13px !important;
    color: #ccc !important;
    text-shadow: 1px 2px 4px #000 !important; }

    notification[type="critical"]
    { background: -moz-radial-gradient(center top, red, transparent) !important; }

    .notification-inner.outset
    { border: 1px solid rgba(0,0,0, .3) !important;
    background: rgba(0,0,0, .2) !important;
    border-radius: 3px 3px 0 0 !important;
    box-shadow: inset 1px 2px 8px rgba(0,0,0, .5) !important; }

    #toolbarViewerRight #fileInput
    { box-shadow: none !important; }

    notification button
    { -moz-appearance: none !important;
    outline: 0 none !important;
    border: 1px solid #000 !important;
    border-radius: 5px !important;
    background: -moz-radial-gradient(center top, #aaa, transparent) !important;
    box-shadow: inset rgba(98,128,136,0.2) -1px 4px 12px 2px !important;
    color: #aaa !important;
    text-shadow: 1px 2px 2px black !important;
    font-family: Segoe UI, Tahoma, sans serif !important; }

    notification button:hover
    { -moz-appearance: none !important;
    outline: 0 none !important;
    border: 1px solid #000 !important;
    border-radius: 5px !important;
    background: -moz-radial-gradient(center top, #ccc, transparent) !important;
    box-shadow: inset rgba(98,128,136,0.2) -1px 4px 12px 2px !important;
    color: #ccc !important; }

    /* =============== images */

    /* bar close button */
    .messageCloseButton:hover { opacity: 1 !important; }
    .messageCloseButton
    { -moz-image-region: auto !important;
    opacity: .65 !important;
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAADAklEQVR42pVUOUskQRT+uro9x2u88MKZEY9AA3VFBAMzDUYTkUFBg1ETA8XEVQQTwcTMQDAw81dsttFGRkaCqIgHHuONt9O973vYMqzswhYU1VTVe+87XpfV0dHx3bbtKICkTNt1XfxtWJb151ZS9uynp6efTnZ2dqyysvLb29sbjDH/DPQ873PlGdf09HTs7u6GnZycnLuioqLk6+trUpDZWiaZ/EzqB/mDiHnGPbnnZmZmmrOzszsnNzfXrqiosF9eXnhgE1l+fj6en5/BvD6Kj0BFIFQ0YUZGhsVEx8fHxgQCAVRVVUHoIS8vD+vr67i/v0dDQwNKSkogRXSWlpaipqYGwgBra2t4f39HdXW1nklhywgiTVRcXIzm5mZMT09jdXUViUQCjY2NmoxJamtrIdWxtLSEgYEBdHd3o6CgQGO5khrKy8shoiuFWCymwQsLC1hZWUFLSwtEP1xfX2NmZgajo6MYHx/H5eUlGEsZyIRio6ysTLlTE0IeGhpCMBjE5OQkNjY2EAqFMDIygomJCd0TcTWGmolRmpD2K2+K6jiOomKy/v5+vbC4uAgaMD8/r0ioH6n696gxp5PaM77NXOkKadGhi4sLSON+6a/UtnAeHx/x8PCgGhARqxDhzs4Oent7MTU1hfr6evT09CjN9vZ2nJ+fIy0tTe+ypxhvd3Z2xsXW0NXVlScbhhQPDg5U9MHBQQwPD6OwsBCRSET1qaurU2pEKWg9SWZtbm4m7La2trj0UEjs5qY5PDzE2NgYotGoir6/v68IwuGwCjw3N6fftPwjxtra2krYTU1NcVE+dHt760mAmZ2dRVdXF/r6+jQJNSL909PTz8ZcXl7WZhR6npxZ29vbCVugxsWd0M3NjSe9YXixtbUVR0dH+pvQJU4mo+1sXPYde0sM0UR7e3sJRy65JycnrvxrrohtsS/kb/7yEviDyNgy1FKKuVlZWRA2Ll0LiGNGKhj/aUi1NfXbP5NA/xkxH9QDjrj1Q9wKyiYfNoP/GBJDFo5o++s3yYCV/Oco1SEAAAAASUVORK5CYII=) !important; }

    /* bar exclamation on the left */
    notification .messageImage
    { list-style-image: none !important;
    box-shadow: 2px 2px 6px rgba(0,0,0, .7) !important;
    height: 18px !important;
    padding-right: 18px !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAACZUlEQVR42oVUOa4aQRCtmWl2+IAAiU3gAIiRPiDu4IDMd+ACPhqSM0dESMQgkbFL7Psyg+uV3HjsxCU1XVRXv3q19BjNZvO7ZVlficjmZTmOQ1oMw6D/iM0+1uVy+amCweC3XC73+Xg8yDTNt8fr9ZLlFgC7wXHu9XppNBp9UeFweJ9IJOz7/W4zkDAKBALU7/ep1+uR3++XSxyVqtUqNRoN0RGUfR0+NxeLxV5FIhErm81a1+uVNBCD02AwkAtKKYkMHQGYPR2PRwFiu8E2czKZmCoUClE+n6fT6aSj0MfHB8ViMfJ4PEIdcrvdKBqNCtB+v3/7IuhwODTASIBwyEUn27YFBAv1ACNdHwQAEILDF0C4D18BymQyQlsfxuNxKhaLEhU2CPRCoSC+qJsOCpYIgGJTOp2WFNyMKpWKpAYAsMEZbKlUSlhqX26UsEL7JU8UFA5gBFupVJJdC1iUy2XxBTjW8/mUNLHMf2dER0omkxIJui4q2EDXLN0zpc7ns3Rss9n8VQ8wRO673U7sqBtsq9VKmMhYcxD44r7Cz3w+f1/QEwu6Pp9P7KgVzxoh6Ha7/fM+GAgvAh1Xh8OBZrMZYdeUAQS93W6LHTYA8+DJZS1IE4MqQPiBgx5ILdA7nQ6t12vR0YhWqyUs9cPGjkBgLUDj8fj9fjQjXOx2u3IGHV2r1+uygxX8sIOpADGiM51OHX4CDgO924B6YcERQGCCWmLe9FcBjxaDzEAOuhbijpn8+k3dLT0OtVrtnQb+47Fqxr+bYiITYCiuwQ+uT5yNqKLp/v64U9WpuIXtDrNVy+Wy+wsgUXREudEt3wAAAABJRU5ErkJggg==) center no-repeat !important; }

    /* content bg */
    #viewerContainer
    { background: url(data:image/gif;base64,R0lGODlhMgAyALMAAAAAAAgICDY2Njk5OTo6Ojs7O0FBQUJCQkNDQwAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAEAI/gAFDChAsKDBgwgLECCQsGHCAQIKAEAwsSICAwgyatzIsaPHjBgtViQokqLJkhg/cgx5sqVIkicPlJx50oABmjhlnoSJsyaAn0CDCgVw06VRADx9Dl3KtCnRmQUGOJ36M0AAqlMHWkypsqvXjiyRSjxqkutXj2GPJu2JEixZtmvfKh1alK3LuCJvYnVaV+3Yp3sD8x051uxZjQcOHHYrtu3ixyDv/jVqGPLGtC8n96z8FbNfu44/eoarWa7j0aYp4k0N+Gdf0DtLs9U7mLVq2S5pC35qenXr3Uxfx84LHPhrkrqLK38adXnVq861Jne++ybP6dSn1l2LPbvQ47K7e2cX3vio+OLkb88eTxr0+drtWb//Drt8/fnpcfp+2z3/2/3rAeVffBXpdN+ALhmonm2nMShZfS1VhhqBtnGm0YSfVXgYhpnBZmFXHC64mWWX9YbbRB9CNuFqKZJ4UYZbubjhg2XJqOJwL5KYmIshFSCQQ0AWtFCQQUIUEAA7) !important; }



    Test here.

    Maybe somebody smart will tell me how to post it (if i add namespaces, it works for the bar but not for the content bg, etc.... but us.o won't let me post it w/out namespaces ... i think).
    1194 x 183 - 56K
  • Thanks. Exactly what i was looking for. Too bad it disables all notifications. Added enchancement bug: https://bugzilla.mozilla.org/show_bug.cgi?id=834223
  • EDIT: here!

    notification[label="This PDF document might not be displayed correctly."]
    { display: none !important; }

    I updated the code above, just in case image
  • It's better to use its value attribute than label as selector.

    notification[value="pdfjs-fallback"] { display: none; }

    Using label won't work on all locales.

  • makondo said:

    if i add namespaces, it works for the bar but not for the content bg, etc.... but us.o won't let me post it w/out namespaces ... i think).

    Declare two namespaces at the top of your stylesheet, one with a prefix and one without:
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @namespace htmlNS url(http://www.w3.org/1999/xhtml);
    Here the prefix is "htmlNS", but any CSS identifier will do. With the XUL namespace as default, Userstyles will sort this as an app style. If you want this to be a global style, make the XHTML namespace the default and prefix the XUL namespace instead.

    Now add the prefix to every HTML element reference, like so:
    ...
    htmlNS|*#toolbarViewerRight htmlNS|*#fileInput { ... }
    notification button, htmlNS|*#scaleSelectContainer { ... }
    notification button:hover, htmlNS|*#scaleSelectContainer:hover { ... }
    ...
    The prefix must apply to an element name, so add a universal selector "*" to "naked" ID or class selectors. Some element names (button, for example) are used in both namespaces, and occasionally an HTML element is embedded in an XUL document (the Orion editor, for instance). When in doubt, consult the Javascript element.namespaceURI property.

    Yes, it is a pain, but for our purposes can almost always be avoided by omitting the namespace declaration and wrapping everything in @document rules:
    @-moz-document url(chrome://browser/content/browser.xul) { ... }
    @-moz-document url-prefix(http:), url-prefix(https:) { ... }
    Since a document almost always contains only elements from just one namespace, it doesn't matter that the rules apply in all namespaces as long as each @document only applies to one namespace. (The style editor, chrome://stylish/content/edit.xul, is an exception, if you want to style both Orion (HTML) and its container (XUL).)
  • LouCypher said:

    It's better to use its value attribute than label as selector.

    notification[value="pdfjs-fallback"] { display: none; }

    Using label won't work on all locales.


    Unfortunately it wont work for me on a localized version. Any other ideas to get this working on localized version?

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!