search

gregtatum / z-index-devtool

A UCOSP project for building a Z-Index Devtool.
Mozilla Public License 2.0
31 stars 7 forks source link

Button for element picker #76

Closed jreinlein closed 8 years ago

jreinlein commented 8 years ago

Added button that toggles functionality of pointing and clicking directly on the page to select the corresponding element in the tree.

!!! BUG !!! In Chrome, as soon as the button is toggled, it searches for a filters.svg file (that applies a style to show the button is selected). However, even once it's loaded, the browser repeatedly makes requests for that file forever. Does not occur in Firefox.

Any ideas? @gregtatum

gif capture

gregtatum commented 8 years ago

Whoa, that's crazy. I have no idea why that would happen. Looks like a browser bug almost :-0

On Sat, Nov 26, 2016 at 8:13 PM, James Reinlein notifications@github.com wrote:

Added button that toggles functionality of pointing and clicking directly on the page to select the corresponding element in the tree.

!!! BUG !!! In Chrome, as soon as the button is toggled, it searches for a filters.svg file (that applies a style to show the button is selected). However, even once it's loaded, the browser repeatedly makes requests for that file forever. Does not occur in Firefox.

Any ideas? @gregtatum https://github.com/gregtatum

gif capture http://i.imgur.com/UgGFASu.gifv

You can view, comment on, or merge this pull request online at:

https://github.com/gregtatum/z-index-devtool/pull/76 Commit Summary

  • Implement button to toggle element picker
  • Removed STRONG tags, added P tags

File Changes

Patch Links:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gregtatum/z-index-devtool/pull/76, or mute the thread https://github.com/notifications/unsubscribe-auth/ABg9qM5T6ShMM6OO5HNft89Wj4XP9U_eks5rCOdngaJpZM4K9Cun .

gregtatum commented 8 years ago

Haven't looked at the source, but maybe try and apply the SVG via CSS and not img src?

On Sat, Nov 26, 2016 at 8:32 PM, Greg Tatum tatum.creative@gmail.com wrote:

Whoa, that's crazy. I have no idea why that would happen. Looks like a browser bug almost :-0

On Sat, Nov 26, 2016 at 8:13 PM, James Reinlein notifications@github.com wrote:

Added button that toggles functionality of pointing and clicking directly on the page to select the corresponding element in the tree.

!!! BUG !!! In Chrome, as soon as the button is toggled, it searches for a filters.svg file (that applies a style to show the button is selected). However, even once it's loaded, the browser repeatedly makes requests for that file forever. Does not occur in Firefox.

Any ideas? @gregtatum https://github.com/gregtatum

gif capture http://i.imgur.com/UgGFASu.gifv

You can view, comment on, or merge this pull request online at:

https://github.com/gregtatum/z-index-devtool/pull/76 Commit Summary

  • Implement button to toggle element picker
  • Removed STRONG tags, added P tags

File Changes

Patch Links:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gregtatum/z-index-devtool/pull/76, or mute the thread https://github.com/notifications/unsubscribe-auth/ABg9qM5T6ShMM6OO5HNft89Wj4XP9U_eks5rCOdngaJpZM4K9Cun .

jreinlein commented 8 years ago

Thanks for the reply Greg. I didn't think it was possible to apply an SVG filter purely via CSS. I'll give it another go :)

jreinlein commented 8 years ago

I managed to fix the bug. Here's what I gathered:

Here's how I went about fixing the issue:

  1. When the button is selected, I applied a CSS class to it.
  2. This CSS class would apply the rule filter: var(--checked-icon-filter);
  3. The lookup for var() would go to to the toolbars.css file
  4. The value would return --checked-icon-filter: url(/lib/img/filters.svg#checked-icon-state) (or dark, depending on the theme)
  5. For some reason, the call to var() which triggered url() would create infinite requests in Chrome.
  6. I bypassed the var() and hard-coded the url() into the CSS class. Bug The bug was no longer. By my conclusion, it seems this is where the Chrome bug was found—in the use of var()
  7. Therefore, I bypassed the calling of a var in url(). Since there are multiple themes, I had to have different CSS classes (since I could no longer use variables to determine the theme). I made a quick JS hack that would find the applied theme and applied the CSS class accordingly.
w-jiang commented 8 years ago

What is the expected behaviour for this feature when we also have the hover-highlight feature? I'm finding some unexpected behaviours. 1) The selected element highlight goes away when I hover over any node in the stacking context. When I stop hovering over elements, I think it should go back to displaying the previously selected element. 2) Should element selection be turned off after one click/selection? (This is the behaviour for Chrome and Firefox's element selector) 3) That element selector button looks hella cool 👍

jreinlein commented 8 years ago

@w-jiang I considered some of those points, but we'll definitely need to discuss!

  1. I should have tested that, but was implementing at the same time as @bkindersley for the mouseOver
  2. I'm not sure. I wanted to keep it like the picker on browsers (one-time click), but there isn't much visual feedback to the user telling them the picker is active besides the highlighted button. Let's discuss :)
  3. Thanks! I tried grabbing most of Firefox's resources to keep the look consistent.
w-jiang commented 8 years ago

@jreinlein

  1. We should prioritize fixing this. I can create an issue for it. (edit: Issue #80 )
  2. I think the user will be able to understand that it's a one-time click since it'll match up with the firefox element selector tool
jreinlein commented 8 years ago
w-jiang commented 8 years ago

Looks great! The selector pointer was a lovely touch :D really added to the user experience 10/10 would use again