| Summary: | Web Inspector: logged objects are highlighted in blue | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Dave Coffin <dcoffin> | ||||||||||||||
| Component: | Web Inspector | Assignee: | Antoine Quint <graouts> | ||||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||||
| Severity: | Normal | CC: | commit-queue, graouts, joepeck, timothy, webkit-bug-importer | ||||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||||
| Version: | 528+ (Nightly build) | ||||||||||||||||
| Hardware: | All | ||||||||||||||||
| OS: | All | ||||||||||||||||
| URL: | http://cl.ly/RyyP | ||||||||||||||||
| Attachments: |
|
||||||||||||||||
This is due to being able to select multiple rows in the console log to copy to the clipboard. We did attempt to fix it though, but it regressed. It should not select the row if you are clicking and arrow to expand the object. Tim- you did fix it I suppose, but the area you have to click is like 2px, and when you expand it doesn't unhighlight. I guess I have a larger problem with the highlighting in general, its ugly and you lose all syntax highlighting. I've attached a suggestion for better selecting in the console (IMO). Created attachment 214381 [details]
a suggestion for nicer looking and easier to read highlighting
(In reply to comment #5) > Created an attachment (id=214381) [details] > a suggestion for nicer looking and easier to read highlighting I've consistently complained about this behavior in the JS Console. I like this highlighting idea! We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color. (In reply to comment #7) > We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color. I'm not sure about "background-color: highlight", seems to me we would probably run in the issue of contrast between the background color and the syntax-highlighted objects logged to the console. Created attachment 214436 [details]
Patch
Created attachment 214438 [details]
Screenshot showing result of patch
(In reply to comment #8) > (In reply to comment #7) > > We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color. > > I'm not sure about "background-color: highlight", seems to me we would probably run in the issue of contrast between the background color and the syntax-highlighted objects logged to the console. It would be no different than a text selection (same color in fact). (In reply to comment #12) > (In reply to comment #8) > > (In reply to comment #7) > > > We can give it a try. I would try: background-color: highlight; that would keep it user controllable and use the system selection color. > > > > I'm not sure about "background-color: highlight", seems to me we would probably run in the issue of contrast between the background color and the syntax-highlighted objects logged to the console. > > It would be no different than a text selection (same color in fact). Updating the patch with "highlight". Created attachment 214501 [details]
Patch
Comment on attachment 214501 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review r=me So we'll now get the light highlight everywhere? Does it look good everywhere? I think it'll be good, it'll especially be an improvement for DOMNode / Object interaction. > Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.svg:-1 > -<?xml version="1.0" encoding="utf-8"?> Could you also remove these sag files from the Visual Studio project files? Lame, I know. But we don't need to be proactive adding files, just removing them =). shell> ack -a UserInputPromptPreviousSelected.svg WebInspectorUI.vcxproj/WebInspectorUI.vcxproj 539: <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg" /> WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters 1698: <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg"> (In reply to comment #15) > (From update of attachment 214501 [details]) > View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review > > r=me > > So we'll now get the light highlight everywhere? Does it look good everywhere? I think it'll be good, it'll especially be an improvement for DOMNode / Object interaction. > > > Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.svg:-1 > > -<?xml version="1.0" encoding="utf-8"?> > > Could you also remove these sag files from the Visual Studio project files? Lame, I know. But we don't need to be proactive adding files, just removing them =). > > shell> ack -a UserInputPromptPreviousSelected.svg > WebInspectorUI.vcxproj/WebInspectorUI.vcxproj > 539: <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg" /> > > WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters > 1698: <None Include="..\UserInterface\Images\UserInputPromptPreviousSelected.svg"> Will remove in commit. Comment on attachment 214501 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review > Source/WebInspectorUI/UserInterface/LogContentView.css:-147 > -.console-messages:focus .console-group.collapsed .console-item.selected .console-group-title::before { > - background-image: -webkit-canvas(disclosure-triangle-small-closed-selected); > -} Ahh, optionally you're removing a lot of the only uses of -webkit-canvas foo-selected instances. You may be able to remove some of the specifications for CSS image generation from Main.js in WebInspector._generateDisclosureTriangleImages. WebInspector._generateDisclosureTriangleImages = function() { var specifications = {}; specifications["normal"] = {fillColor: [0, 0, 0, 0.5]}; specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]}; specifications["selected"] = {fillColor: [255, 255, 255, 0.8]}; specifications["selected-active"] = {fillColor: [255, 255, 255, 1]}; generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-"); generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-"); generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-"); generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", specifications, 8, 8, "disclosure-triangle-tiny-closed-"); } It looks like you can entirely remove selected-active here. It is not used with disclosure-triangle's at all. And you can avoid "selected" for the top two, but probably still need it for the bottom two. Created attachment 214508 [details]
Patch for landing
Comment on attachment 214508 [details] Patch for landing Clearing flags on attachment: 214508 Committed r157600: <http://trac.webkit.org/changeset/157600> All reviewed patches have been landed. Closing bug. Comment on attachment 214501 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review >> Source/WebInspectorUI/UserInterface/LogContentView.css:-147 >> -} > > Ahh, optionally you're removing a lot of the only uses of -webkit-canvas foo-selected instances. You may be able to remove some of the specifications for CSS image generation from Main.js in WebInspector._generateDisclosureTriangleImages. > > WebInspector._generateDisclosureTriangleImages = function() > { > var specifications = {}; > specifications["normal"] = {fillColor: [0, 0, 0, 0.5]}; > specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]}; > specifications["selected"] = {fillColor: [255, 255, 255, 0.8]}; > specifications["selected-active"] = {fillColor: [255, 255, 255, 1]}; > > generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-"); > generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-"); > > generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-"); > generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", specifications, 8, 8, "disclosure-triangle-tiny-closed-"); > } > > It looks like you can entirely remove selected-active here. It is not used with disclosure-triangle's at all. > And you can avoid "selected" for the top two, but probably still need it for the bottom two. Not completely. DOM tree and DataGrid use disclosure-triangle-tiny-open, which still has selected and active. (In reply to comment #21) > (From update of attachment 214501 [details]) > View in context: https://bugs.webkit.org/attachment.cgi?id=214501&action=review > > >> Source/WebInspectorUI/UserInterface/LogContentView.css:-147 > >> -} > > > > Ahh, optionally you're removing a lot of the only uses of -webkit-canvas foo-selected instances. You may be able to remove some of the specifications for CSS image generation from Main.js in WebInspector._generateDisclosureTriangleImages. > > > > WebInspector._generateDisclosureTriangleImages = function() > > { > > var specifications = {}; > > specifications["normal"] = {fillColor: [0, 0, 0, 0.5]}; > > specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]}; > > specifications["selected"] = {fillColor: [255, 255, 255, 0.8]}; > > specifications["selected-active"] = {fillColor: [255, 255, 255, 1]}; > > > > generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.svg", specifications, 13, 13, "disclosure-triangle-small-open-"); > > generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.svg", specifications, 13, 13, "disclosure-triangle-small-closed-"); > > > > generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.svg", specifications, 8, 8, "disclosure-triangle-tiny-open-"); > > generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.svg", specifications, 8, 8, "disclosure-triangle-tiny-closed-"); > > } > > > > It looks like you can entirely remove selected-active here. It is not used with disclosure-triangle's at all. > > And you can avoid "selected" for the top two, but probably still need it for the bottom two. > > Not completely. DOM tree and DataGrid use disclosure-triangle-tiny-open, which still has selected and active. I don't see anything using "selected-active". And yep, I was only saying "-small-" could avoid "selected", but "-tiny-" does still need it. |
Created attachment 214365 [details] Screenshot of problem When highlighting objects in the console output, the entire object is highlighted blue.