-
-
Save jscher2000/f29d5d12713fa9afb40029bdb55e9c99 to your computer and use it in GitHub Desktop.
| // For Firefox's Web Console, creates the functions showAsPrint() and undoShowAsPrint() | |
| // to roughly emulate print media and revert | |
| function showAsPrint(){ | |
| var docSS = document.styleSheets, ss, oldMedia, newMedia, rules; | |
| var p2s = function(media){ | |
| if (media.indexOf('all') > -1) return media; //no need to change | |
| if (media == 'print') return 'all, wasprint'; //show on screen, too | |
| if (media.indexOf('print') > -1 && media.indexOf('screen') > -1) return media; //no need to change | |
| if (media == 'screen') return 'wasscreen'; //hide these rules | |
| if (media.indexOf('screen') > -1) return media.replace('screen', 'wasscreen'); //hide these rules | |
| if (media.trim().slice(0,1) == '(' && media.trim().slice(-1) == ')') return media; //too hard to parse | |
| return media + ', WTF'; //for debugging only | |
| } | |
| for (var i=0; i<docSS.length; i++) { | |
| ss = docSS[i]; | |
| if (!ss.disabled){ | |
| if (ss.ownerNode && ss.ownerNode.id.indexOf('stylus-') == -1 && ss.ownerNode.id.indexOf('stylish-') == -1){ | |
| // check link or style tag for media attribute and edit as needed | |
| if (ss.ownerNode.hasAttribute('media') && ss.ownerNode.getAttribute('media') != 'all'){ | |
| oldMedia = ss.ownerNode.getAttribute('media'); | |
| newMedia = p2s(oldMedia); | |
| if (newMedia != oldMedia){ | |
| //console.log('Updating: ' + ss.ownerNode.outerHTML + ' to ' + newMedia); | |
| ss.ownerNode.setAttribute('media', newMedia); | |
| } | |
| } | |
| // check content of style sheet for media rules | |
| try { | |
| rules = ss.cssRules; | |
| } catch(err) { | |
| console.log('Can\'t access cssRules for ' + ss.href + ' due to: ' + err ); | |
| rules = []; | |
| } | |
| for (var j=0; j<rules.length; j++){ | |
| if (rules[j].type == 4){ | |
| oldMedia = rules[j].conditionText; | |
| newMedia = p2s(oldMedia); | |
| if (newMedia != oldMedia){ | |
| //console.log('Updating CSSMediaRule from ' + oldMedia + ' to ' + newMedia); | |
| rules[j].conditionText = newMedia; | |
| } | |
| } | |
| } | |
| } else if (!ss.ownerNode){ | |
| console.log('No .ownerNode on i=' + i); | |
| } | |
| } | |
| } | |
| } | |
| function undoShowAsPrint(){ | |
| var docSS = document.styleSheets, ss, oldMedia, newMedia, rules; | |
| var unp2s = function(media){ | |
| if (media == 'all, wasprint' || media == 'all,wasprint') return 'print'; //undo applying to screen | |
| if (media == 'wasscreen') return 'screen'; //undo hiding | |
| if (media.indexOf('wasscreen') > -1) return media.replace('wasscreen', 'screen'); //undo hiding | |
| return media; // otherwise, we didn't mess with it | |
| } | |
| for (var i=0; i<docSS.length; i++) { | |
| ss = docSS[i]; | |
| if (!ss.disabled){ | |
| if (ss.ownerNode && ss.ownerNode.id.indexOf('stylus-') == -1 && ss.ownerNode.id.indexOf('stylish-') == -1){ | |
| // check link or style tag for media attribute and edit as needed | |
| if (ss.ownerNode.hasAttribute('media') && ss.ownerNode.getAttribute('media') != 'all'){ | |
| oldMedia = ss.ownerNode.getAttribute('media'); | |
| newMedia = unp2s(oldMedia); | |
| if (newMedia != oldMedia){ | |
| //console.log('Restoring: ' + ss.ownerNode.outerHTML + ' to ' + newMedia); | |
| ss.ownerNode.setAttribute('media', newMedia); | |
| } | |
| } else { | |
| // check content of style sheet for media rules | |
| try { | |
| rules = ss.cssRules; | |
| } catch(err) { | |
| console.log('Can\'t access cssRules for ' + ss.href + ' due to: ' + err ); | |
| rules = []; | |
| } | |
| for (var j=0; j<rules.length; j++){ | |
| if (rules[j].type == 4){ | |
| oldMedia = rules[j].conditionText; | |
| newMedia = unp2s(oldMedia); | |
| if (newMedia != oldMedia){ | |
| //console.log('Restoring CSSMediaRule from ' + oldMedia + ' to ' + newMedia); | |
| rules[j].conditionText = newMedia; | |
| } | |
| } | |
| } | |
| } | |
| } else if (!ss.ownerNode){ | |
| console.log('No .ownerNode on i=' + i); | |
| } | |
| } | |
| } | |
| } |
Would you mind moving p2s() and unp2s() as nested functions into the bodies of showAsPrint() and undoShowAsPrint()? That would improve legibility and avoid confusion about whether they are public and may be called by users or not.
unp2s() doesn't undo p2s(), line 8.
Example media query: @media screen, speech {}
Would you mind moving
p2s()andunp2s()as nested functions into the bodies ofshowAsPrint()andundoShowAsPrint()? That would improve legibility and avoid confusion about whether they are public and may be called by users or not.
Yes, it should all be in one object. If I were a programmer, I'm sure I would have thought of that originally.
unp2s()doesn't undop2s(), line 8.Example media query:
@media screen, speech {}
Hmm, yes, I missed that. An additional line is needed.
Maybe tonight.
Updated to address both of those issues, and also problems with halting on some cross-origin style sheets due to a security error (from https://support.mozilla.org/questions/1235041).
This script was really really helpful for me today. Thanks!
Once again thanks! 👍
THX <3
Firefox 70 has a button for this now in the Page Inspector, small document icon on the same bar as "Filter Styles" in the Rules pane.
(2024-03-26, 5 years after last comment)
- the function doesn't work (chromium 122, firefox 123).
Calling the function doesn't give any error.
It's just ends immediately, silently, without any visible change to the page.
(p.s. i was hoping to convert it to a bookmarklet.)
The above does not call a function, so add
to the end when pasting into the Web Console* to run that function. Until the page is reloaded, you don't need to reinject the script, just call either function.
BSD-3-clause license.
*https://developer.mozilla.org/docs/Tools/Web_Console