Live CSS Editing and "New Style" Input #62

Open
Denyerec opened this Issue Sep 4, 2012 · 5 comments

Comments

Projects
None yet
4 participants
@Denyerec

Denyerec commented Sep 4, 2012

(Brought across to GitHub from bitbucket on request)

Adding CSS to Inspected element with no current rules

Use the inspect tool to highlight an element with no current CSS rules. At this point I now need to use the "New Style" panel at the bottom of the "Styles" tab to add a new rule. Instead of simply typing the CSS and having it apply to the highlighted element I am required to type the selector in full. It would be helpful if the input box pre-populated with a "Best guess", either the CSS path from the nearest parent with a class/ID, or simply with the element type. With an empty box it is not clear what you are supposed to enter. It's also incredibly inconvenient if your element has a long selector path. Finally when you're done typing in the "New Style" box, you must use the mouse to click the "Apply" button. If you try to use the TAB key to navigate to it, focus ends up elsewhere.

There appears to be no way to quickly add a rule inline, other than right clicking the element and then "Add attribute" followed by ' Style="" ' and manually entering the style rules. This is clumsy and slow.

Resolution Make the TAB key switch focus correctly from the New Style input box to the Apply button. Introduce an area in the Styles panel for "Element Styles" that is always shown, but empty if the element has no inline styles. This then allows the user to double-click and add inline styles without having to right-click on the element itself and "Add Attribute", which is long winded and slow. Finally, prepopulate the "New Style" input with a best-guess or even element level entry such as " span { } " (If a span has been inspected) to act as a guide as to how to use the tool, and also to speed things up for developers.

Adding/Editing CSS for Inspected element with existing rules

This is almost done right, but has some confusing interface issues.

I double click a rule, it enters editing mode. I personally expect a single click to do this, but double is OK (Until the arthritis kicks in...) Now TAB moves between existing rules and when editing a VALUE the cursor keys behave as expected. However when a rule is highlighted, cursor keys do not navigate alphabetically. For example if the rule is "Margin-right" and I press the UP cursor, I expect this to change to "Margin-Left", however it changes instead to "-xv-voice-duration". What's worse is that when I press DOWN cursor, it does not return me to "Margin-Right" but instead navigates me to the next alphabetic entry from that point. I must now press ESCAPE to undo the damage, and type the "Margin-Left" rule manually.

There is no autocomplete or code suggest in the editing context. I attempted to use Ctrl+Space to trigger autocomplete and it navigated me to the Opera Portal page, destroying my first bug report. Not a happy rabbit.

Finally when I am editing the last rule in a set, the behaviour of the TAB and ENTER keys feels inconsistent.

  • If a rule is highlighted in EDIT mode and I hit ENTER, I am taken out of EDIT mode and my changes are committed.
  • If a rule's VALUE is highlighted and I hit ENTER, I am taken to a new row to add a new rule
  • If I am on a rule VALUE and I hit TAB, I am taken to the next rule, even if it is in a different selector group
  • If I make a change I don't like and hit ESCAPE to avoid making the change, I am kicked out of EDIT mode. The only way to re-enter is to use the mouse to double click a rule again. This is really really slow. Any means by which to get back into editing the rules by using the keyboard is not made clear.

I know you will tire of people saying this, but simply refer to how FireBug handles keyboard input in the CSS properties panel and copy their keyboard behaviour. I could explain it in detail here, but no-one would read it and it's easier to refer to the real thing than to my half-baked rambling. In Firebug:

  • Once editing, ENTER behaves as TAB, but commits changes.
  • Cursors navigate through rules alphabetically, starts from the point of the previous rule in the alphabetic list if nothing is typed first (handy)
  • When on the last rule, TAB will trigger a new rule to be inserted, as will ENTER. If you hit TAB again you are THEN taken to the next selector group. The behaviour is consistent with the ENTER key.

On the plus side, your colour picking system is 100x better than everyone elses :)

Live CSS Editing

In Firebug you can navigate via CSS->Source Edit to modify a full stylesheet in realtime. In Firefox (HEAD) you can hit Shift+F7 to open up a CSS editor where you can work on all stylesheets in realtime.

Dragonfly/Opera needs this functionality as soon as possible to be competative when it comes to authoring CSS in-browser. Steal it, improve it, become everyone's best friend on the internet.

Firebug has a dedicated CSS tab, Dragonfly does not. I can find CSS files by picking through the "Resources" list, but this is cumbersome considering that, after HTML, CSS is the next most important part of a website. Once I find the stylesheet in the resources tab I can now only view it, there is no mechanism to edit it to try changes out.

The method to achieve this in Opera is to manually extract the link to the CSS file, view it in the browser, then view-source, make the changes without seeing their impact in realtime, save the file and reload the page from the cache rather than on web via Menu->Page->Developer Tools->Reload from Cache.

This is cumbersome to the point of being completely useless in a development context, however it does have the advantage that changes persist between reloads IF you remember to reload from cache, which can be set to a custom shortcut but, for the sake of ease of use, should perhaps be bound by default to ctrl+shift+r or such.

If the dynamic inline editing of Firebug could be combined with a "save to cache" and "reload from cache" mechanism, you'd have something truly special to offer developers. CSS is important enough to warrant its own tab in Dragonfly, coupled with a full-file live edit/save/cache reload mechanic and it'd be awesome.

Live HTML Editing

I can inspect an element and edit the HTML source in realtime, this is great, however dynamically inserted elements such as CUFON headings will vanish, leading me to suspect that something odd is going on with the screen redraw. The behaviour is the same in Firebug too, if you can find a way around this, you'd have an edge.

Furthermore, once changes have been made in the Dragonfly window, being able to "save to cache" would be helpful. I am aware that you can view-source, edit there, and then save/apply, but that's another window/tab that needs to be broken out, so it'd be nice to have that functionality within Dragonfly.

Apologies for the lack of organisation in this ticket, as stated the ctrl+space shortcut I was experimenting in Dragonfly with resulted in me losing my much more detailed proposal :(

Contact: denyerec@gmail.com

@Denyerec

This comment has been minimized.

Show comment Hide comment
@Denyerec

Denyerec Sep 4, 2012

Please flag as "Enhancement".

Denyerec commented Sep 4, 2012

Please flag as "Enhancement".

@metude

This comment has been minimized.

Show comment Hide comment
@metude

metude Sep 24, 2012

+1

metude commented Sep 24, 2012

+1

@Denyerec

This comment has been minimized.

Show comment Hide comment
@Denyerec

Denyerec Nov 15, 2012

It occurs to me that being able to "Live edit" any file from the "Resources" tab would be the most awesome feature ever. Having a button / toggle to indicate "Use edited version" or "Refresh from site" would seal the deal.

Imagine that... being able to just dive in, edit CSS or JS, have the changes visible in realtime (A-la firefox in CSS), persist them by hitting a button... You could test hacks and fixes really quickly in that working model. I know Opera already supports modifying CSS in local cached files, so it's a stones throw away...

Also there are options in DF to configure the keyboard shortcuts... more options in here could potentially resolve several of the "Style" panel operation issues outlined in the report above.

It occurs to me that being able to "Live edit" any file from the "Resources" tab would be the most awesome feature ever. Having a button / toggle to indicate "Use edited version" or "Refresh from site" would seal the deal.

Imagine that... being able to just dive in, edit CSS or JS, have the changes visible in realtime (A-la firefox in CSS), persist them by hitting a button... You could test hacks and fixes really quickly in that working model. I know Opera already supports modifying CSS in local cached files, so it's a stones throw away...

Also there are options in DF to configure the keyboard shortcuts... more options in here could potentially resolve several of the "Style" panel operation issues outlined in the report above.

@c69

This comment has been minimized.

Show comment Hide comment
@c69

c69 Dec 9, 2012

+1

c69 commented Dec 9, 2012

+1

@OOPMan

This comment has been minimized.

Show comment Hide comment
@OOPMan

OOPMan Jul 14, 2014

+1

I can't believe Dragonfly still doesn't support this!

OOPMan commented Jul 14, 2014

+1

I can't believe Dragonfly still doesn't support this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment