Summary: | Web Inspector: Preview other CSS @media in browser window (print) | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Richard Connamacher <richardconnamacher> | ||||||||||
Component: | Web Inspector | Assignee: | 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
Richard Connamacher
2007-04-27 19:11:23 PDT
Changing component to Web Inspector, since that's where most of our developer-oriented features live. *** Bug 33594 has been marked as a duplicate of this bug. *** 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? That is a fine place to put it. Getting the plumbing there is the important part, the UI can improve/change later if needed. 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!
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? Sure the others are neat, but less likely to be needed. I would go print-only for now. 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. Implemented under bug 103752. *** This bug has been marked as a duplicate of bug 103752 *** Needs fixed in the new Web Inspector still. 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) 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 :( 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. Created attachment 294895 [details]
[PATCH] Proposed Fix
Created attachment 294898 [details]
[IMAGE] Navigation Bar Buttons
Image shows macOS on top, GTK on bottom.
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.
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 on attachment 294900 [details]
[PATCH] Proposed Fix
I like the wide icon better I think.
Comment on attachment 294900 [details] [PATCH] Proposed Fix Clearing flags on attachment: 294900 Committed r208779: <http://trac.webkit.org/changeset/208779> All reviewed patches have been landed. Closing bug. (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. (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") (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 =) 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. |