dom cache unable to find correct element if duplicate element types are on the same line

[ikbenben]

The DOM cache is unable to find the correct element if the same type of element (ie 2 div elements) exist on the same element. the cache will always returns the first element.

An example of the scenario is:

<div class="header"><div class="title">This is the title</div></div>

The are two results because of this error:

• the inspect mode will only activate the first element in the code editor even when the user clicks on the second item in the frame
• opening the css inline editor will always open for the first element regardless of which element is currently active

To reproduce (issue 1):

1. open an html document and make sure that there is a line with two elements of the same type on it as per the example above.
2. switch to responsive mode and ensure a media query is selected
3. turn on the inspect mode
4. hover over the div.title element in the preview pane. it should be highlighted with the rest of the pane in a dark grey
5. click on the element in the preview pane.

At this point the editor area will scroll to the correct line but the first element (div.header) will be active, not the div.title element

To reproduce (issue 2):

1. open an html document and make sure that there is a line with two elements of the same type on it as per the example above.
2. switch to responsive mode and ensure a media query is selected
3. activate the div.title element in the code editor and click on cmd-e to open the inline css editor.

At this point the editor opens but the contents are for the first div element, not the second element: