Bug 228723 - Button for toggling inspect mode on mobile devices is not easily reachable
Button for toggling inspect mode on mobile devices is not easily reachable
Status: RESOLVED FIXED
Product: web
Classification: Unclassified
Component: CSS Visual Tools
7.4
All All
: P3 (vote)
: 7.4
Assigned To: Jan Stola
Vladimir Riha
: UI, USABILITY
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2013-04-18 20:42 UTC by Petr Jiricka
Modified: 2013-06-12 14:25 UTC (History)
2 users (show)

See Also:
Issue Type: DEFECT
:


Attachments
Screenshot of the CSS styles window (44.86 KB, image/jpeg)
2013-04-24 13:28 UTC, Petr Jiricka
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Petr Jiricka 2013-04-18 20:42:58 UTC
1. Create a HTML5 application
2. Open index.html (if not opened already)
3. Change the browser to Android Device (Chrome)
4. Run the project - this will populate the CSS Styles window and the button to enable inspect mode will appear in the top right corner of this window; so far so good, the button is in your view
5. Open a CSS file (or a JavaScript file) in the editor - the CSS Styles will be changed, and now it no longer displays the button

=> When I want to switch to inspect mode now, I can not do it easily (there is no UI for this in the mobile browser itself, like there is for Chrome). I need to go back to the HTML file to make the button appear (unless I remember the keyboard shortcut), and this is neither convenient nor intuitive/discoverable.

There should be a more easy and discoverable way to switch to select mode even when a different file than a HTML file is at the front.
Comment 1 lxlyons 2013-04-24 12:14:48 UTC
I'm not sure I'm crystal clear on the issue here.  There isn't an inspect mode option in the CSS Styles window, so I'm not sure what it has to do with not having access to inspect mode in the mobile browser?  Sorry if I'm being dense (!), but can you clarify?

Also, do we really have no option for offering some kind of UI in chrome when on a mobile device?
Comment 2 Petr Jiricka 2013-04-24 13:28:50 UTC
Created attachment 133752 [details]
Screenshot of the CSS styles window

> There isn't an inspect mode option in the CSS Styles window

See the attached screenshot - it's the button at the top right (the screenshot also shows its tooltip. This is a placeholder, we can decide to put it elsewhere.

> Also, do we really have no option for offering some kind of UI in chrome 
> when on a mobile device?

Not sure, this is for Honza S to clarify. I believe he mentioned the possibility to inject some UI directly as a part of the page, but this may be problematic from both functional and visual point of view. Also it may require substantial effort. But Honza can provide a more definitive answer.
Comment 3 Jan Stola 2013-05-22 14:02:51 UTC
> Also, do we really have no option for offering some kind of UI in chrome 
> when on a mobile device?

Unfortunately, there is no extension support for mobile Chrome, i.e., there is no way to extend the UI of the browser itself. The only possibility I am aware of is to insert some stuff into the inspected page directly, but this approach has several drawbacks (mentioned by Petr in the previous comment).

I suggest to resolve this issue by move of the Inspect Mode button from the CSS Styles view into the top-right corner of the Browser DOM view (next to URL). The Inspect Mode is mainly about selection which is driven by Browser DOM view by now. Therefore, the Inspect Mode button fits there well.
Comment 4 Vladimir Riha 2013-06-04 10:55:57 UTC
Both toggle buttons ("Style Element States" and "Inspect mode...") are often not visible on displays with lower resolution because there are shifted by name of inspected element to the right. One has to make CSS Styles wide to make them visible again
Comment 5 Jan Stola 2013-06-12 14:25:45 UTC
The Inspect Mode button has been moved from CSS Styles view to Browser DOM view.

Modified files: http://hg.netbeans.org/web-main/rev/5b0727103c15


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo