32926 2009-12-24 18:24:37 -0800 Styles Inspector: Revert font back to "'Lucida Grande', sans-serif" and "10px" 2011-11-23 05:02:43 -0800 1 1 1 Unclassified WebKit Web Inspector (Deprecated) 528+ (Nightly build) Mac OS X 10.6 RESOLVED WONTFIX P1 Major --- 0 chrisjshull webkit-unassigned apavlov joepeck me pfeldman oldest_to_newest 174834 0 chrisjshull 2009-12-24 18:24:37 -0800 The Styles inspector recently began using "font-family: monospace;" and "font-size: 11px" for style properties. This does not look as nice, and there is no benefit to using a monospaced font. In fact, it makes it so less information is visible inside the standard Styles column width. Please revert back to: font-family: 'Lucida Grande', sans-serif; font-size: 10px; 174835 1 chrisjshull 2009-12-24 18:25:53 -0800 One of my favorite things about the WebKit Web Inspector (other than it's functionality) is that it looks so pretty. Please make it pretty again. 211140 2 pfeldman 2010-04-10 07:43:50 -0700 (In reply to comment #1) > One of my favorite things about the WebKit Web Inspector (other than it's > functionality) is that it looks so pretty. > Please make it pretty again. We are in process of changing the styles pane even further. The idea behind the change / series of changes is that we use monospace font for source code and for the parts of the UI that user can actually edit. We hope that you like the final looks, but if you don't, please let us know and we will continue 211141 3 pfeldman 2010-04-10 07:44:38 -0700 ... and we will continue looking for the ultimate solution! 211148 4 chrisjshull 2010-04-10 07:57:33 -0700 I'm getting used to the monospaced font - but I still wish the text were perhaps smaller, so that I didn't need a wider styles pane just to see things. 211158 5 53044 me 2010-04-10 09:53:33 -0700 Created attachment 53044 Lucida Grande 11px for Elements pane I have tested it only on MacOS X Leopard. 211159 6 53045 me 2010-04-10 09:55:50 -0700 Created attachment 53045 Elements pane, MacOS X Leopard, Lucida Grande 11px 211160 7 53046 me 2010-04-10 09:57:22 -0700 Created attachment 53046 Monospace Monaco for Scripts pane 211161 8 53047 me 2010-04-10 09:58:25 -0700 Created attachment 53047 Monospace Monaco for Console pane 211200 9 53055 me 2010-04-10 15:37:09 -0700 Created attachment 53055 Lucida Grande 11px for Elements pane 211219 10 joepeck 2010-04-10 16:43:40 -0700 Hey Nikita! Glad to see you're making patches (I saw you tweeted) =). ----------- First and foremost, the patch you provided would not be valid to land, as it was not done on WebKit source code! The file you edited was the inspector.css in your system framework, not of a WebKit checkout. The file you patched was: > /Applications/WebKit.app/Contents/Frameworks/10.5/WebCore.framework/Versions/A/Resources/inspector/inspector.css If you intend on doing more inspector work I strongly suggest that you checkout the WebKit source. Its easy (just a little time consuming, but something you can run in the background). It might make your patches more accurate (using the latest source instead of the WebKit version you have installed on your system) and if it gets approved you'd be in a much better position to have the patch landed! Here is where you could get started: - General Info - http://webkit.org/coding/contributing.html - SVN - http://webkit.org/building/checkout.html - Git - http://trac.webkit.org/wiki/UsingGitWithWebKit If you are interested and have any questions please don't hesitate to ask here, on twitter, via email, or on IRC (freenode.irc.net #webkit or #webkit-inspector). Plenty of people should be available and willing to help. ------------ Back to this patch. Thanks for attaching images above, that is very helpful! I've seen people argue for monospaced fonts [1] and others [here] argue against it. You can't please everybody, you can only pick a default that you think works best for most cases / users. [1] http://jayrobinson.org/2009/12/05/webkit-web-inspector-vs-firefox-firebug/ Therefore, I think the ultimate solution would be to let the developer pick the fonts! The challenge would then be coming up with a UI, that doesn't clutter the already overflowing inspector. The ideas (read IDEAS) I have are: - the fonts are already trying to be platform specific. Why not actually making them platform "Settings". At this point the platform client could include native font picker tools wherever it is appropriate. For instance in Safari's Preferences under the "Advanced" tab? - put a button in the inspector (bottom corner?) to open up its own (shared) preference window. 211221 11 joepeck 2010-04-10 16:45:42 -0700 Whoops, I messed up Freenode's address. Here are links: irc://irc.freenode.net/#webkit irc://irc.freenode.net/#webkit-inspector 211328 12 pfeldman 2010-04-11 00:33:33 -0700 > - the fonts are already trying to be platform specific. Why not actually > making them platform "Settings". At this point the platform client could > include native font picker tools wherever it is appropriate. For instance in > Safari's Preferences under the "Advanced" tab? This seems to be a part of a more general bug / feature related to changing the style and size of the fonts in the inspector. Still, I am convinced that all the UI fragments that correspond to the user's source code should be rendered as in IDE (i.e. monospace). I think that monospace migration of the DOM itself was received fairly well. And I don't see a big difference between the dom and the styles. Except for styles' UI is cluttered. We have an experiment that we will land shortly that removes some clutter: https://bug-36747-attachments.webkit.org/attachment.cgi?id=51948. We would like to play with it in nightlies / dev channel before it hits the user. Nikita, it is nice to see you contributing patches! Besides Joe's comments, my friendly advice would be to start with declaring your intentions in the bug comments and see how people react. In this case, it seems to be a significant ui change that needs to be discussed either in the bug or on the IRC (just as the serif -> monospace move was). After that, when everyone is happy, you submit patches and land things. UI is somewhat sensitive area for us! 211348 13 53085 me 2010-04-11 04:02:37 -0700 Created attachment 53085 Lucida Grande 11px for Elements pane Well, I've generated patch via `git format-patch`. I hope it's the right format. (In reply to comment #12) > Still, I am convinced that all the UI fragments that correspond to the user's > source code should be rendered as in IDE (i.e. monospace). I think that > monospace migration of the DOM itself was received fairly well. And I don't see > a big difference between the dom and the styles. ... I just made what Chris proposed in first comment. I'm totally agree with him (except a font size, 10px is too small, 11px looks better for me). I think monospaced font good: 1) when you need to move cursor vertically 2) at rendering 1 l I i, 0 O (1) doesn't work in DOM and Styles panels. You never move cursor vertically. A sans serif font is much more readable and more compact. (In reply to comment #2) > We are in process of changing the styles pane even further. The idea behind the > change / series of changes is that we use monospace font for source code and > for the parts of the UI that user can actually edit. What exactly do you mean by "parts of the UI that user can actually edit"? User can edit DOM and CSS in the Elements panel. User can write in the console. All those things already have a monospaced font. 211356 14 pfeldman 2010-04-11 07:05:19 -0700 > What exactly do you mean by "parts of the UI that user can actually edit"? User > can edit DOM and CSS in the Elements panel. User can write in the console. All > those things already have a monospaced font. Well, the point was that things you can edit should be monospace, emphasizing their editable source code nature. DOM, CSS and Console you enumerated are editable and hence monospace. And I think it should remain so. Now style selectors are also editable, but that is unclear from the way we render them. The screenshot I referenced above addressed it via pulling the selector text into the editable monospace area. 211384 15 joepeck 2010-04-11 11:35:24 -0700 (In reply to comment #13) > Well, I've generated patch via `git format-patch`. I hope it's the right > format. Great! I think thats fine. Typically the command I use (and it looks like webkit-patch uses) is: `git diff --binary. The only thing missing now would be a ChangeLog entry: http://webkit.org/coding/contributing.html#changelogs But before adding another patch on this bug, focus on on the discussion to try and find a better solution! 218918 16 me 2010-04-29 02:47:51 -0700 (In reply to comment #10) > Therefore, I think the ultimate solution would be to let the developer pick the > fonts! ... Another idea: UserCSS. What if we give user ability to choose his own CSS for Web Inspector? Maybe someone don't like not just fonts, but colors or even layout. I steal the idea from Opera. Opera has site-specific stylesheets. You can choose your own stylesheet for site you want. You can choose stylesheet fo Dragonfly (which is pretty the same thing as Inspector) — just set stylesheet for https://dragonfly.opera.com/app/ Alas, WebKit doesn't have site-specific stylesheets. But we can store CSS in localStorage, isn't it? What do you think? 219036 17 chrisjshull 2010-04-29 08:02:18 -0700 (In reply to comment #16) > Another idea: UserCSS. What if we give user ability to choose his own CSS for > Web Inspector? Maybe someone don't like not just fonts, but colors or even > layout. > ... > Alas, WebKit doesn't have site-specific stylesheets. But we can store CSS in > localStorage, isn't it? > > What do you think? I love this idea. I've been wanting an easy way to tweak the web inspector's look for a long time. I don't think localstorage is the way to go though. Right now Safari has a way to select a user Style sheet (under Advanced in prefs). However, It seems that this does not get applied to the web inspector. What if either: 1) it did apply to the web inspector or 2) there was a place to select an inspector style sheet? 219537 18 me 2010-04-30 11:07:08 -0700 (In reply to comment #17) Writing to localStorage doesn't work within Web Inspector. localStorage['yada'] = 'yada' "QUOTA_EXCEEDED_ERR: DOM Exception 22" Error message a little bit misleading, since my localStorage is empty. > Right now Safari has a way to select a user Style sheet (under Advanced in > prefs). > However, It seems that this does not get applied to the web inspector. What if > either: > 1) it did apply to the web inspector Sounds good to me. By the way, I have no idea how to implement it. 508074 19 apavlov 2011-11-23 05:02:43 -0800 The fonts have stabilized, closing the bug. 53044 2010-04-10 09:53:33 -0700 2010-04-10 15:37:09 -0700 Lucida Grande 11px for Elements pane inspector.css.patch text/plain 1304 me LS0tIGluc3BlY3Rvci5jc3MJMjAxMC0wNC0xMCAxOTozOToxMi4wMDAwMDAwMDAgKzA0MDAKKysr IC9BcHBsaWNhdGlvbnMvV2ViS2l0LmFwcC9Db250ZW50cy9GcmFtZXdvcmtzLzEwLjUvV2ViQ29y ZS5mcmFtZXdvcmsvVmVyc2lvbnMvQS9SZXNvdXJjZXMvaW5zcGVjdG9yL2luc3BlY3Rvci5jc3MJ MjAxMC0wNC0xMCAyMDoyNTozNi4wMDAwMDAwMDAgKzA0MDAKQEAgLTUwNCwyNyArNTA0LDI2IEBA CiB9CiAKIC5tb25vc3BhY2UgewotICAgIGZvbnQtc2l6ZTogMTBweDsKKyAgICBmb250LXNpemU6 IDExcHg7CiAgICAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTsKIH0KIAotYm9keS5wbGF0Zm9ybS1t YWMgLm1vbm9zcGFjZSwgYm9keS5wbGF0Zm9ybS1tYWMgLnNvdXJjZS1jb2RlIHsKLSAgICBmb250 LWZhbWlseTogTW9uYWNvLCBtb25vc3BhY2U7Citib2R5LnBsYXRmb3JtLW1hYyAubW9ub3NwYWNl IHsKKyAgICBmb250LXNpemU6IDExcHggTW9uYWNvOwogfQogCiAvKiBLZWVwIC5wbGF0Zm9ybS1t YWMgdG8gbWFrZSB0aGUgcnVsZSBtb3JlIHNwZWNpZmljIHRoYW4gdGhlIGdlbmVyYWwgb25lIGFi b3ZlLiAqLwotYm9keS5wbGF0Zm9ybS1tYWMucGxhdGZvcm0tbWFjLXNub3dsZW9wYXJkIC5tb25v c3BhY2UsCi1ib2R5LnBsYXRmb3JtLW1hYy5wbGF0Zm9ybS1tYWMtc25vd2xlb3BhcmQgLnNvdXJj ZS1jb2RlIHsKK2JvZHkucGxhdGZvcm0tbWFjLnBsYXRmb3JtLW1hYy1zbm93bGVvcGFyZCAubW9u b3NwYWNlIHsKICAgICBmb250LXNpemU6IDExcHg7CiAgICAgZm9udC1mYW1pbHk6IE1lbmxvLCBt b25vc3BhY2U7CiB9CiAKLWJvZHkucGxhdGZvcm0td2luZG93cyAubW9ub3NwYWNlLCBib2R5LnBs YXRmb3JtLXdpbmRvd3MgLnNvdXJjZS1jb2RlIHsKK2JvZHkucGxhdGZvcm0td2luZG93cyAubW9u b3NwYWNlIHsKICAgICBmb250LXNpemU6IDEycHg7CiAgICAgZm9udC1mYW1pbHk6IENvbnNvbGFz LCBMdWNpZGEgQ29uc29sZSwgbW9ub3NwYWNlOwogfQogCi1ib2R5LnBsYXRmb3JtLWxpbnV4IC5t b25vc3BhY2UsIGJvZHkucGxhdGZvcm0tbGludXggLnNvdXJjZS1jb2RlIHsKK2JvZHkucGxhdGZv cm0tbGludXggLm1vbm9zcGFjZSB7CiAgICAgZm9udC1zaXplOiAxMXB4OwogICAgIGZvbnQtZmFt aWx5OiBkZWphdnUgc2FucyBtb25vLCBtb25vc3BhY2U7CiB9CkBAIC0xMTMxLDggKzExMzAsNiBA QAogfQogCiAuc291cmNlLWNvZGUgewotICAgIGZvbnQtZmFtaWx5OiBtb25vc3BhY2U7Ci0gICAg Zm9udC1zaXplOiAxMHB4OwogICAgIHdoaXRlLXNwYWNlOiBwcmUtd3JhcDsKIH0KIAo= 53045 2010-04-10 09:55:50 -0700 2010-04-10 09:55:50 -0700 Elements pane, MacOS X Leopard, Lucida Grande 11px inspector-lucida-grande-elements.png image/png 0 me 53046 2010-04-10 09:57:22 -0700 2010-04-10 09:57:22 -0700 Monospace Monaco for Scripts pane inspector-lucida-grande-scripts.png image/png 0 me 53047 2010-04-10 09:58:25 -0700 2010-04-10 09:58:25 -0700 Monospace Monaco for Console pane inspector-lucida-grande-console.png image/png 0 me 53055 2010-04-10 15:37:09 -0700 2010-04-11 04:02:37 -0700 Lucida Grande 11px for Elements pane inspector.css.patch text/plain 1275 me LS0tIGluc3BlY3Rvci5jc3MJMjAxMC0wNC0xMCAxOTozOToxMi4wMDAwMDAwMDAgKzA0MDAKKysr IC9BcHBsaWNhdGlvbnMvV2ViS2l0LmFwcC9Db250ZW50cy9GcmFtZXdvcmtzLzEwLjUvV2ViQ29y ZS5mcmFtZXdvcmsvVmVyc2lvbnMvQS9SZXNvdXJjZXMvaW5zcGVjdG9yL2luc3BlY3Rvci5jc3MJ MjAxMC0wNC0xMSAwMjozMjo1Ny4wMDAwMDAwMDAgKzA0MDAKQEAgLTUwNCwyNyArNTA0LDI2IEBA CiB9CiAKIC5tb25vc3BhY2UgewotICAgIGZvbnQtc2l6ZTogMTBweDsKKyAgICBmb250LXNpemU6 IDExcHg7CiAgICAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTsKIH0KIAotYm9keS5wbGF0Zm9ybS1t YWMgLm1vbm9zcGFjZSwgYm9keS5wbGF0Zm9ybS1tYWMgLnNvdXJjZS1jb2RlIHsKK2JvZHkucGxh dGZvcm0tbWFjIC5tb25vc3BhY2UgewogICAgIGZvbnQtZmFtaWx5OiBNb25hY28sIG1vbm9zcGFj ZTsKIH0KIAogLyogS2VlcCAucGxhdGZvcm0tbWFjIHRvIG1ha2UgdGhlIHJ1bGUgbW9yZSBzcGVj aWZpYyB0aGFuIHRoZSBnZW5lcmFsIG9uZSBhYm92ZS4gKi8KLWJvZHkucGxhdGZvcm0tbWFjLnBs YXRmb3JtLW1hYy1zbm93bGVvcGFyZCAubW9ub3NwYWNlLAotYm9keS5wbGF0Zm9ybS1tYWMucGxh dGZvcm0tbWFjLXNub3dsZW9wYXJkIC5zb3VyY2UtY29kZSB7Citib2R5LnBsYXRmb3JtLW1hYy5w bGF0Zm9ybS1tYWMtc25vd2xlb3BhcmQgLm1vbm9zcGFjZSB7CiAgICAgZm9udC1zaXplOiAxMXB4 OwogICAgIGZvbnQtZmFtaWx5OiBNZW5sbywgbW9ub3NwYWNlOwogfQogCi1ib2R5LnBsYXRmb3Jt LXdpbmRvd3MgLm1vbm9zcGFjZSwgYm9keS5wbGF0Zm9ybS13aW5kb3dzIC5zb3VyY2UtY29kZSB7 Citib2R5LnBsYXRmb3JtLXdpbmRvd3MgLm1vbm9zcGFjZSB7CiAgICAgZm9udC1zaXplOiAxMnB4 OwogICAgIGZvbnQtZmFtaWx5OiBDb25zb2xhcywgTHVjaWRhIENvbnNvbGUsIG1vbm9zcGFjZTsK IH0KIAotYm9keS5wbGF0Zm9ybS1saW51eCAubW9ub3NwYWNlLCBib2R5LnBsYXRmb3JtLWxpbnV4 IC5zb3VyY2UtY29kZSB7Citib2R5LnBsYXRmb3JtLWxpbnV4IC5tb25vc3BhY2UgewogICAgIGZv bnQtc2l6ZTogMTFweDsKICAgICBmb250LWZhbWlseTogZGVqYXZ1IHNhbnMgbW9ubywgbW9ub3Nw YWNlOwogfQpAQCAtMTEzMSw4ICsxMTMwLDYgQEAKIH0KIAogLnNvdXJjZS1jb2RlIHsKLSAgICBm b250LWZhbWlseTogbW9ub3NwYWNlOwotICAgIGZvbnQtc2l6ZTogMTBweDsKICAgICB3aGl0ZS1z cGFjZTogcHJlLXdyYXA7CiB9CiAK 53085 2010-04-11 04:02:37 -0700 2010-06-11 11:49:41 -0700 Lucida Grande 11px for Elements pane 0001-Sans-serif-font-for-Elements-panel.patch text/plain 1719 me RnJvbSBiMDc3MTUzNWVjNjc2NjE4ZWM0ZjdkYWU5NjdmZWVmZTYwOTVhMjc0IE1vbiBTZXAgMTcg MDA6MDA6MDAgMjAwMQpGcm9tOiBOaWtpdGEgVmFzaWx5ZXYgPG1lQGVsdjFzLnJ1PgpEYXRlOiBT dW4sIDExIEFwciAyMDEwIDEzOjM2OjU5ICswNDAwClN1YmplY3Q6IFtQQVRDSF0gU2Fucy1zZXJp ZiBmb250IGZvciBFbGVtZW50cyBwYW5lbC4KCi0tLQogV2ViQ29yZS9pbnNwZWN0b3IvZnJvbnQt ZW5kL2luc3BlY3Rvci5jc3MgfCAgIDEzICsrKysrLS0tLS0tLS0KIDEgZmlsZXMgY2hhbmdlZCwg NSBpbnNlcnRpb25zKCspLCA4IGRlbGV0aW9ucygtKQoKZGlmZiAtLWdpdCBhL1dlYkNvcmUvaW5z cGVjdG9yL2Zyb250LWVuZC9pbnNwZWN0b3IuY3NzIGIvV2ViQ29yZS9pbnNwZWN0b3IvZnJvbnQt ZW5kL2luc3BlY3Rvci5jc3MKaW5kZXggNTgxYzc1YS4uYzUyZDZlYiAxMDA2NDQKLS0tIGEvV2Vi Q29yZS9pbnNwZWN0b3IvZnJvbnQtZW5kL2luc3BlY3Rvci5jc3MKKysrIGIvV2ViQ29yZS9pbnNw ZWN0b3IvZnJvbnQtZW5kL2luc3BlY3Rvci5jc3MKQEAgLTUwNCwyNyArNTA0LDI2IEBAIGJvZHku ZHJhd2VyLXZpc2libGUgI2RyYXdlciB7CiB9CiAKIC5tb25vc3BhY2UgewotICAgIGZvbnQtc2l6 ZTogMTBweDsKKyAgICBmb250LXNpemU6IDExcHg7CiAgICAgZm9udC1mYW1pbHk6IG1vbm9zcGFj ZTsKIH0KIAotYm9keS5wbGF0Zm9ybS1tYWMgLm1vbm9zcGFjZSwgYm9keS5wbGF0Zm9ybS1tYWMg LnNvdXJjZS1jb2RlIHsKK2JvZHkucGxhdGZvcm0tbWFjIC5tb25vc3BhY2UgewogICAgIGZvbnQt ZmFtaWx5OiBNb25hY28sIG1vbm9zcGFjZTsKIH0KIAogLyogS2VlcCAucGxhdGZvcm0tbWFjIHRv IG1ha2UgdGhlIHJ1bGUgbW9yZSBzcGVjaWZpYyB0aGFuIHRoZSBnZW5lcmFsIG9uZSBhYm92ZS4g Ki8KLWJvZHkucGxhdGZvcm0tbWFjLnBsYXRmb3JtLW1hYy1zbm93bGVvcGFyZCAubW9ub3NwYWNl LAotYm9keS5wbGF0Zm9ybS1tYWMucGxhdGZvcm0tbWFjLXNub3dsZW9wYXJkIC5zb3VyY2UtY29k ZSB7Citib2R5LnBsYXRmb3JtLW1hYy5wbGF0Zm9ybS1tYWMtc25vd2xlb3BhcmQgLm1vbm9zcGFj ZSB7CiAgICAgZm9udC1zaXplOiAxMXB4OwogICAgIGZvbnQtZmFtaWx5OiBNZW5sbywgbW9ub3Nw YWNlOwogfQogCi1ib2R5LnBsYXRmb3JtLXdpbmRvd3MgLm1vbm9zcGFjZSwgYm9keS5wbGF0Zm9y bS13aW5kb3dzIC5zb3VyY2UtY29kZSB7Citib2R5LnBsYXRmb3JtLXdpbmRvd3MgLm1vbm9zcGFj ZSB7CiAgICAgZm9udC1zaXplOiAxMnB4OwogICAgIGZvbnQtZmFtaWx5OiBDb25zb2xhcywgTHVj aWRhIENvbnNvbGUsIG1vbm9zcGFjZTsKIH0KIAotYm9keS5wbGF0Zm9ybS1saW51eCAubW9ub3Nw YWNlLCBib2R5LnBsYXRmb3JtLWxpbnV4IC5zb3VyY2UtY29kZSB7Citib2R5LnBsYXRmb3JtLWxp bnV4IC5tb25vc3BhY2UgewogICAgIGZvbnQtc2l6ZTogMTFweDsKICAgICBmb250LWZhbWlseTog ZGVqYXZ1IHNhbnMgbW9ubywgbW9ub3NwYWNlOwogfQpAQCAtMTEzMSw4ICsxMTMwLDYgQEAgYm9k eS5wbGF0Zm9ybS1saW51eCAubW9ub3NwYWNlLCBib2R5LnBsYXRmb3JtLWxpbnV4IC5zb3VyY2Ut Y29kZSB7CiB9CiAKIC5zb3VyY2UtY29kZSB7Ci0gICAgZm9udC1mYW1pbHk6IG1vbm9zcGFjZTsK LSAgICBmb250LXNpemU6IDEwcHg7CiAgICAgd2hpdGUtc3BhY2U6IHByZS13cmFwOwogfQogCi0t IAoxLjcuMAoK