Bug 13530 – Web Inspector: Preview other CSS @media in browser window (print)

• Component: Web Inspector
• Status: RESOLVED FIXED

[Richard Connamacher]

Please consider adding an option to either:

1) Switch a page's stylesheet from @media screen to @media print or any other non-screen media, to view how a page will appear printed from within the main WebKit interface. This way, developers could use all of WebKit's features, such as the DOM Inspector, while debugging a printed page's layout.

2) Offer a full-on print preview in Safari, using @media print CSS and simulated page breaks, where all of Safari's debugger features (like the DOM inspector) can be used.

This feature request is primarily for developers, though a live print preview would help all users.

[Alexey Proskuryakov]

Changing component to Web Inspector, since that's where most of our developer-oriented features live.

[Adam Roben (:aroben)]

<rdar://problem/5712928>

[Alexander Pavlov (apavlov)]

*** Bug 33594 has been marked as a duplicate of this bug. ***

[Connor Montgomery]

I'd like to work on this. I think the best way to approach it would be to have another option within the "Styles" section of Settings (accessible by clicking the gear at the bottom-right of the inspector). I was thinking a checkbox similar to "Show user agent styles", but "Show only print styles", or something similar.

Does that sound like a good approach?

[Timothy Hatcher]

That is a fine place to put it. Getting the plumbing there is the important part, the UI can improve/change later if needed.

[Connor Montgomery]

Created attachment 121800 [details]
Progress on the patch

I've added this stuff so far. After re-building it, this shows up in the correct spot correctly. I've got a few questions, as this is my first commit to WebKit:

I understand how in Settings.js, I create the setting using createSetting(), and I'm also okay on SettingsScreen.js.

I'm a bit confused as to how I can access the page the user is on, or where I can find the API exposed to me. I'm also kind of confused regarding the structure - I just copied what _showUserAgentStylesSettingChanged() was, and tried to alert something when checking the "Only use print styles" checkbox. It was unsuccessful, though.

Thanks for your help!

[Connor Montgomery]

After thinking about this for a little while, it shouldn't be print-only. There are several recognized media types (http://www.w3.org/TR/CSS2/media.html):

- all
- braille
- embossed
- handheld
- print
- projection
- screen
- speech
- tty
- tv

and it's not fair to just allow users use print-only. Maybe a dropdown with the media types listed above.

Thoughts?

[Timothy Hatcher]

Sure the others are neat, but less likely to be needed. I would go print-only for now.

[PhistucK]

I believe this is fixed.
Web Inspector-->Settings (cog wheel)-->Overrides-->Tick "Emulate CSS media" and select a CSS media. It affects the page itself and the Styles drawer of the Elements panel shows the appropriate styles.

[Alexander Pavlov (apavlov)]

Implemented under bug 103752.

*** This bug has been marked as a duplicate of bug 103752 ***

[Timothy Hatcher]

Needs fixed in the new Web Inspector still.

[Rob Brackett]

Maybe worth noting that Media Queries Level 4 deprecated all media types except all, print, screen, and speech, so worrying about other types besides print is definitely no longer that big a deal. (https://drafts.csswg.org/mediaqueries/#media-types)

[Derk-Jan Hartman]

In the mean time, some 9 years since this ticket was opened, writing a print stylesheet still feels like using console.log to debug my javascript :(

[Joseph Pecoraro]

The most common @media is print styles. We can add a button to toggle on/off print styles. I just have to write some tests now.

[Joseph Pecoraro]

Created attachment 294895 [details]
[PATCH] Proposed Fix

[Joseph Pecoraro]

Created attachment 294898 [details]
[IMAGE] Navigation Bar Buttons

Image shows macOS on top, GTK on bottom.

[Joseph Pecoraro]

Created attachment 294900 [details]
[PATCH] Proposed Fix

Updated GTK's UpDown arrows as seen in the image they were black instead of white.
Updated JSON to preferred style.

[Rob Brackett]

Ooh, having this land will be awesome! However, it seems like this might fit better in "responsive design mode" instead of just another button in the elements panel. Responsive design mode is where I first naturally thought to look for it back in January when I commented on this bug.

[Timothy Hatcher]

Comment on attachment 294900 [details]
[PATCH] Proposed Fix

I like the wide icon better I think.

[WebKit Commit Bot]

Comment on attachment 294900 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 294900

Committed r208779: <http://trac.webkit.org/changeset/208779>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Joseph Pecoraro]

(In reply to comment #18)
> Ooh, having this land will be awesome! However, it seems like this might fit
> better in "responsive design mode" instead of just another button in the
> elements panel. Responsive design mode is where I first naturally thought to
> look for it back in January when I commented on this bug.

Yeah, this came up among ourselves. I'll file a separate bug about adding such capabilities to Responsive Design Mode.

We put it in Web Inspector now because it allows us to do this via Remote Inspector with iOS, where Responsive Design Mode is not available.

[Rob Brackett]

(In reply to comment #22)
> We put it in Web Inspector now because it allows us to do this via Remote
> Inspector with iOS

Ah, good point. I hadn’t considered that at all!

As a side note, there’s an unfortunate typo in the test result message: "PASS: MediaQueryList listesner fired." ("listesner" -> "listener")

[Joseph Pecoraro]

(In reply to comment #23)
> (In reply to comment #22)
> > We put it in Web Inspector now because it allows us to do this via Remote
> > Inspector with iOS
> 
> Ah, good point. I hadn’t considered that at all!
> 
> As a side note, there’s an unfortunate typo in the test result message:
> "PASS: MediaQueryList listesner fired." ("listesner" -> "listener")

Haha, thanks I'll fix this =)

[Derk-Jan Hartman]

It works wonderfully in WTP. I'm very happy that I can finally use Safari to improve how pages print ! It's the little things that matter. Thank you Joseph and Timothy !

BTW, there was no note about this in the WTP release notes.

@Rob, i wouldn't mind if this was ALSO available in responsive design mode, but indeed having it work with the remote debugger is valuable as well.