DevTools: [SSP] refactor internal representations of sections

LayoutTests/inspector/elements/styles/styles-update-from-js-expected.txt

 Tests that changes to an inline style and ancestor/sibling className from JavaScript are reflected in the Styles pane and Elements tree.
 
 
 Running: testInit
 
 Running: testSetStyleAttribute
 <div id="container" style="color: #daC0DE; border: 1px solid black;">…</div>
 [expanded] 
 element.style  { ()
   color: #daC0DE;
   border: 1px solid black;
       border-top-color: black;
       border-top-style: solid;
       border-top-width: 1px;
       border-right-color: black;
       border-right-style: solid;
       border-right-width: 1px;
       border-bottom-color: black;
       border-bottom-style: solid;
       border-bottom-width: 1px;
       border-left-color: black;
       border-left-style: solid;
       border-left-width: 1px;
 
 [expanded] 
 div  { (user agent stylesheet)
   display: block;
 
 
-
 Running: testSetStyleCSSText
 <div id="container" style="color: rgb(192, 255, 238);">…</div>
 [expanded] 
 element.style  { ()
   color: rgb(192, 255, 238);
 
 [expanded] 
 div  { (user agent stylesheet)
   display: block;
 
 
-
 Running: testSetViaParsedAttributes
 <div id="container" style="color: rgb(192, 255, 238); border: 3px dashed green;">…</div>
 [expanded] 
 element.style  { ()
   color: rgb(192, 255, 238);
   border: 3px dashed green;
       border-top-color: green;
       border-top-style: dashed;
       border-top-width: 3px;
       border-right-color: green;
       border-right-style: dashed;
       border-right-width: 3px;
       border-bottom-color: green;
       border-bottom-style: dashed;
       border-bottom-width: 3px;
       border-left-color: green;
       border-left-style: dashed;
       border-left-width: 3px;
 
 [expanded] 
 div  { (user agent stylesheet)
   display: block;
 
 
-
 Running: testSetViaAncestorClass
 <div id="child"></div>
 [expanded] 
 element.style  { ()
 
 [expanded] 
 .red div:first-child  { (styles-update-from-js.html:4 -> styles-update-from-js.html:4:1)
   background-color: red;
 
 [expanded] 
 div  { (user agent stylesheet)
   display: block;
 
 ======== Inherited from div#container.red ========
 [expanded] 
 Style Attribute  { ()
   color: rgb(192, 255, 238);
 
 
-
 Running: testSetViaSiblingAttr
 <div id="childSibling"></div>
 [expanded] 
 element.style  { ()
 
 [expanded] 
 div[foo="bar"] + div  { (styles-update-from-js.html:8 -> styles-update-from-js.html:8:1)
   background-color: blue;
 
 [expanded] 
 div  { (user agent stylesheet)
   display: block;
 
 ======== Inherited from div#container.red ========
 [expanded] 
 Style Attribute  { ()
   color: rgb(192, 255, 238);
 
 
-