Revert of DevTools: Move radio button input element into Shadow DOM (…

…patchset #1 id:1 of https://codereview.chromium.org/2650213005/ ) Reason for revert: Breaks all the radio buttons Original issue's description: > DevTools: Move radio button input element into Shadow DOM > > BUG=685385 > > Review-Url: https://codereview.chromium.org/2650213005 > Cr-Commit-Position: refs/heads/master@{#446606} > Committed: https://chromium.googlesource.com/chromium/src/+/b115a08ad32ae5beda325c98ba50446b7e034eab [email protected] # Skipping CQ checks because original CL landed less than 1 days ago. NOPRESUBMIT=true NOTREECHECKS=true NOTRY=true BUG=685385 Review-Url: https://codereview.chromium.org/2661623003 Cr-Commit-Position: refs/heads/master@{#446843}
binaryage · Jan 28, 2017 · 8f72fab · 8f72fab
1 parent 0f63c02
commit 8f72fab
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/front_end/network/networkConfigView.css b/front_end/network/networkConfigView.css
@@ -57,7 +57,11 @@
     line-height: 20px;
 }
 
-.network-config-ua input {
+.network-config-ua label[is="dt-radio"].checked > * {
+    display: none
+}
+
+.network-config-ua input:not(.dt-radio-button) {
     display: block;
     width: calc(100% - 20px);
     max-width: 250px;
@@ -89,6 +93,10 @@
     max-width: 250px;
 }
 
+.network-config-ua label[is="dt-radio"] {
+    display: block;
+}
+
 .network-config-ua-auto, .network-config-ua-custom {
     opacity: 0.5;
 }

diff --git a/front_end/ui/UIUtils.js b/front_end/ui/UIUtils.js
@@ -1359,9 +1359,10 @@ UI.appendStyle = function(node, cssFile) {
      * @this {Element}
      */
     createdCallback: function() {
-      var root = UI.createShadowRootWithCoreStyles(this, 'ui/radioButton.css');
-      this.radioElement = root.createChild('input', 'dt-radio-button');
+      this.radioElement = this.createChild('input', 'dt-radio-button');
       this.radioElement.type = 'radio';
+      var root = UI.createShadowRootWithCoreStyles(this, 'ui/radioButton.css');
+      root.createChild('content').select = '.dt-radio-button';
       root.createChild('content');
       this.addEventListener('click', radioClickHandler, false);
     },

diff --git a/front_end/ui/radioButton.css b/front_end/ui/radioButton.css
@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 
-.dt-radio-button {
+::content .dt-radio-button {
     height: 17px;
     width: 17px;
     min-width: 17px;
@@ -16,16 +16,16 @@
     margin: 0 5px 5px 0;
 }
 
-.dt-radio-button:active:not(:disabled) {
+::content .dt-radio-button:active:not(:disabled) {
     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(239, 239, 239));
 }
 
-.dt-radio-button:checked {
+::content .dt-radio-button:checked {
     background: url(Images/radioDot.png) center no-repeat,
                 linear-gradient(to bottom, rgb(252, 252, 252), rgb(223, 223, 223));
 }
 
-.dt-radio-button:checked:active {
+::content .dt-radio-button:checked:active {
     background: url(Images/radioDot.png) center no-repeat,
                 linear-gradient(to bottom, rgb(194, 194, 194), rgb(239, 239, 239));
 }