DevTools: migrate SSP Classes and ElementState toolbar widgets to shadow

third_party/WebKit/Source/devtools/front_end/elements/elementsPanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 241 matching lines @@
     padding: 2px 4px 0 0;
     list-style: none;
     clear: both;
     display: flex;
 }
 
 .styles-section.matched-styles .style-properties {
     padding-left: 0;
 }
 
-.styles-element-state-pane {
-    overflow: hidden;
-    height: 66px;
-    padding-left: 2px;
-    border-bottom: 1px solid rgb(189, 189, 189);
-}
-
 @keyframes styles-element-state-pane-slidein {
     from {
         margin-top: -60px;
     }
     to {
         margin-top: 0px;
     }
 }
 
 @keyframes styles-element-state-pane-slideout {
@@ skipping 10 matching lines @@
     animation-duration: 0.1s;
     animation-direction: normal;
 }
 
 .styles-sidebar-toolbar-pane-container {
     position: relative;
     overflow: hidden;
     flex-shrink: 0;
 }
 
-.styles-element-state-pane {

[luoe, 2017/06/06 18:38:17]

This selector is a dupe of L262.  In the new file, I just merged the two
rulesets.

-    background-color: #f3f3f3;
-    border-bottom: 1px solid rgb(189, 189, 189);
-    margin-top: 0;
-}
-
-.styles-element-classes-pane {
-    background-color: #f3f3f3;
-    border-bottom: 1px solid rgb(189, 189, 189);
-    padding: 6px 2px 2px;
-}
-
-.styles-element-classes-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-.styles-element-classes-pane label {
-    margin-right: 15px;
-}
-
-.styles-element-classes-pane .title-container {
-    padding-bottom: 2px;
-}
-
-.styles-element-classes-pane .new-class-input {
-    padding-left: 3px;
-    padding-right: 3px;
-    overflow: hidden;
-    border: 1px solid #ddd;
-    line-height: 15px;
-    margin-left: 3px;
-    width: calc(100% - 7px);
-    background-color: #fff;
-    cursor: text;
-}
-
-.styles-element-state-pane > div {
-    margin: 8px 4px 6px;
-}
-
-.styles-element-state-pane > table {
-    width: 100%;
-    border-spacing: 0;
-}
-
-.styles-element-state-pane td {
-    padding: 0;
-}
-
 .styles-animations-controls-pane > * {
     margin: 6px 4px;
 }
 
 .styles-animations-controls-pane {
     border-bottom: 1px solid rgb(189, 189, 189);
     height: 60px;
     overflow: hidden;
     background-color: #eee;
 }
@@ skipping 171 matching lines @@
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 
 .elements-tree-header-frame {
     margin-left: 6px;
     margin-right: 6px;
     flex: none;
 }