HTML matching tag highlighting enhancement

[erodri]

Webuilder v9.0 has a great new feature that saves me a lot of time when writing standards-compliant HTML/XHTML: matching tag highlighting. It's really helpful especially when you have a lot of nested tags.

But sometimes if the page is very long the feature is less useful. You get the green/red highlighting that hints you if the tag is correctly nested, but you can't see the opening & closing tag together because they don't fit in the screen.

Example:

Code: Select all

  <div class="myDiv1">
    .... some code ....
      <div class="myDiv2">
        .... some more code ....
          <div class="myDiv3">
            .... even more code ....
          </div>
      </div>
  </div>

In cases like the above example (but with a bunch more of code in the nested div's so that you don't get to see all of it in the screen) I often find myself hovering on the "</div>" tags trying to guess the id/class name of the matching opening tag.

I think it would be great if when hovering a closing tag, Webuilder could show a tooltip with the contents of the matching opening tag. So if in the example above I hover the mouse arrow on the last "</div>" tag, it should show a tooltip with [ <div class="myDiv1"> ].

I think it shouldn't be too hard to implement as you've already got the matching tag highlighting working. Hope you'll keep this request in consideration.

Thanks and keep up the great work.

[chrisjlocke]

When closing a DIV, why is it useful to know what class you're using?
Its also possible to 'code collapse' the DIV sections, so you can have open just the DIVs you need.

[erodri]

When closing a DIV, why is it useful to know what class you're using?
Its also possible to 'code collapse' the DIV sections, so you can have open just the DIVs you need.

I wasn't referring only to classes, also to IDs. The class name and/or the ID tell you which element you're editing. It's useful to know if you're adding new code within a certain element or just after it. Especially when you have multiple levels of nested elements.

I know the 'code collapse' feature, and while I find it very useful in some cases, it doesn't help in this scenario:
- first, you can't use word wrap simultaneously
- second, it would require extra steps, e.g. 1) hover the closing tag, 2) scroll up (right side of the window) until you find the highlighted opening tag, 3) click on the [+] sign (left side of the window) to collapse the block of code. A tooltip hinting you "hey, you're into <div id=123>" is way faster.
- third, it wouldn't help if you want to write code "just before" the closing tag (there's no point in collapsing the element)

[syrupcore]

It would be neat but maybe consider commenting your code better?

Code: Select all

      <div class="myDiv1">
        .... some code ....
          <div class="myDiv2">
            .... some more code ....
              <div class="myDiv3">
                .... even more code ....
              </div><!-- /myDiv3 -->
          </div><!-- /myDiv2 -->
      </div><!-- /myDiv1 -->

is the law in our shop for exactly the situation you describe. :)

[chrisjlocke]

This is recommended in many VB coding books when doing large IF statements and loops, etc, so is a good general programming practice.

[erodri]

It would be neat but maybe consider commenting your code better?

Code: Select all

      <div class="myDiv1">
        .... some code ....
          <div class="myDiv2">
            .... some more code ....
              <div class="myDiv3">
                .... even more code ....
              </div><!-- /myDiv3 -->
          </div><!-- /myDiv2 -->
      </div><!-- /myDiv1 -->

is the law in our shop for exactly the situation you describe.

Thanks for the suggestion, I already comment my code more or less as you suggest, otherwise it would be unmanageable:

Code: Select all

  <div id="myDiv1">
    ....
    <div class="myClass1">
      ....
    </div> <!-- class="myClass1" -->
    ....
  </div> <!-- id="myDiv1" -->

I just omitted the comments in my example to make it less cluttered and more readable.

Still I find that if the feature I suggested could be built into Webuilder it would be a neat time saving feature - especially when you're working on someone else's code that isn't using such good coding practices

[syrupcore]

I know what you mean. Didn't mean to presume.... :)

I like to differentiate the classes and ids sometimes too but I just do it with <!-- /#mydiv --> or <!-- /.mydiv -->

I will cut any keystroke I can. I'm so effing lazy.