Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Need to add instructions when clicking on the extension to let users know they should go to the dev tools #3041

Closed
molant opened this issue Sep 27, 2019 · 5 comments · Fixed by #3042

Comments

@molant
Copy link
Member

commented Sep 27, 2019

Clicking in the button that appears close to the address bar should tell the user to go to the dev tools and click on the hint tab. This is how it looks like right now:

image

@molant molant added this to the 1910-1 milestone Sep 27, 2019
@molant molant self-assigned this Sep 27, 2019
@molant

This comment has been minimized.

Copy link
Member Author

commented Sep 27, 2019

Working on this ATM.

This is how it looks like for now:

image

Need to figure out how to remove it from the manifest on Firefox.

@hxlnt @antross feedback? I'd like to have this published in the store before Monday :S

@hxlnt

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

Wow, fast turnaround! 🤩 A few thoughts:

  1. Can we increase the outer padding? The text is running pretty close to the edges.
  2. What do you think about replacing some of the text with an screenshot mockup or GIF? Tony brought up a good point that the Hints pane may be in the overflow menu of DevTools. Showing the navigation there would help.

Ex:
[ Webhint header ]

Open DevTools (F12) and navigate to the Hints tab to start using webhint.

image

(We should perhaps blur the elements text a bit, maybe add a cursor pointing to the Hints tab in the image above.)

@molant

This comment has been minimized.

Copy link
Member Author

commented Sep 27, 2019

Sounds good to me. I'll use that image

@antross

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

Should we use a different image for Chrome vs Edge so it matches the devtools in each (I’m okay if we do this later)?

Also, for modifying the manifest for Firefox see https://github.com/webhintio/hint/blob/master/packages/extension-browser/scripts/drop-persistent-flag.js

@molant

This comment has been minimized.

Copy link
Member Author

commented Sep 27, 2019

This is how it's going to look in Chrome:

image

Don't think we can get the Edge one published before Monday so I'll leave it to someone else to do the image swap 😛

molant added a commit to molant/hint that referenced this issue Sep 27, 2019
@molant molant referenced this issue Sep 27, 2019
3 of 3 tasks complete
molant added a commit to molant/hint that referenced this issue Sep 27, 2019
molant added a commit to molant/hint that referenced this issue Sep 28, 2019
molant added a commit to molant/hint that referenced this issue Sep 28, 2019
@molant molant closed this in #3042 Sep 28, 2019
molant added a commit that referenced this issue Sep 28, 2019
Fix #3041
Close #3042
molant added a commit that referenced this issue Sep 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.