Bug 13530

Summary: Web Inspector: Preview other CSS @media in browser window (print)
Product: WebKit Reporter: Richard Connamacher <richardconnamacher>
Component: Web InspectorAssignee: Joseph Pecoraro <joepeck>
Status: RESOLVED FIXED    
Severity: Enhancement CC: commit-queue, graouts, hartman.wiki, joepeck, mail, rob, timothy, webkit-bug-importer
Priority: P3 Keywords: InRadar
Version: 523.x (Safari 3)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Progress on the patch
none
[PATCH] Proposed Fix
none
[IMAGE] Navigation Bar Buttons
none
[PATCH] Proposed Fix none

Description Richard Connamacher 2007-04-27 19:11:23 PDT
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.
Comment 1 Alexey Proskuryakov 2007-07-06 06:06:33 PDT
Changing component to Web Inspector, since that's where most of our developer-oriented features live.
Comment 2 Adam Roben (:aroben) 2008-01-29 11:14:32 PST
<rdar://problem/5712928>
Comment 3 Alexander Pavlov (apavlov) 2011-11-01 08:29:45 PDT
*** Bug 33594 has been marked as a duplicate of this bug. ***
Comment 4 Connor Montgomery 2012-01-01 00:48:25 PST
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?
Comment 5 Timothy Hatcher 2012-01-08 17:04:59 PST
That is a fine place to put it. Getting the plumbing there is the important part, the UI can improve/change later if needed.
Comment 6 Connor Montgomery 2012-01-09 23:17:44 PST
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!
Comment 7 Connor Montgomery 2012-01-10 09:10:50 PST
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?
Comment 8 Timothy Hatcher 2012-01-10 11:08:29 PST
Sure the others are neat, but less likely to be needed. I would go print-only for now.
Comment 9 PhistucK 2013-03-22 11:25:18 PDT
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.
Comment 10 Alexander Pavlov (apavlov) 2013-03-25 03:28:18 PDT
Implemented under bug 103752.

*** This bug has been marked as a duplicate of bug 103752 ***
Comment 11 Timothy Hatcher 2014-08-15 11:19:28 PDT
Needs fixed in the new Web Inspector still.
Comment 12 Rob Brackett 2016-01-12 16:30:06 PST
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)
Comment 13 Derk-Jan Hartman 2016-04-22 12:59:12 PDT
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 :(
Comment 14 Joseph Pecoraro 2016-11-15 15:13:28 PST
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.
Comment 15 Joseph Pecoraro 2016-11-15 16:14:39 PST
Created attachment 294895 [details]
[PATCH] Proposed Fix
Comment 16 Joseph Pecoraro 2016-11-15 16:19:23 PST
Created attachment 294898 [details]
[IMAGE] Navigation Bar Buttons

Image shows macOS on top, GTK on bottom.
Comment 17 Joseph Pecoraro 2016-11-15 16:24:55 PST
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.
Comment 18 Rob Brackett 2016-11-15 17:55:34 PST
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.
Comment 19 Timothy Hatcher 2016-11-15 18:29:37 PST
Comment on attachment 294900 [details]
[PATCH] Proposed Fix

I like the wide icon better I think.
Comment 20 WebKit Commit Bot 2016-11-15 19:10:08 PST
Comment on attachment 294900 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 294900

Committed r208779: <http://trac.webkit.org/changeset/208779>
Comment 21 WebKit Commit Bot 2016-11-15 19:10:13 PST
All reviewed patches have been landed.  Closing bug.
Comment 22 Joseph Pecoraro 2016-11-16 11:06:12 PST
(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.
Comment 23 Rob Brackett 2016-11-16 12:21:16 PST
(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")
Comment 24 Joseph Pecoraro 2016-11-16 14:10:30 PST
(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 =)
Comment 25 Derk-Jan Hartman 2017-02-01 01:33:19 PST
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.