[DevTools] Add UI for adding remote targets

chrome/browser/resources/inspect/inspect.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 * {
   box-sizing: border-box;
 }
 
 body {
   color: rgb(48, 57, 66);
@@ skipping 264 matching lines @@
   align-items: center;
   border-bottom: 1px solid #eee;
   display: flex;
   padding: 5px 0;
 }
 
 #device-settings button {
   margin-left: 15px;
 }
 
-#port-forwarding-config::backdrop {
+dialog.config::backdrop {
   background-color: rgba(255, 255, 255, 0.75);
 }
 
-#port-forwarding-config {
+dialog.config {
   background: white;
   border: 0;
   border-radius: 3px;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
   color: #333;
   padding: 17px 17px 12px;
   position: relative;
 }
 
 #port-forwarding-enable {
   vertical-align: middle;
 }
 
 .close-button {
   background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
   height: 14px;
   width: 14px;
 }
 
 .close-button:active {
   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
 }
 
 .close-button:hover {
   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
 }
 
-#port-forwarding-config > .close-button {
+dialog.config > .close-button {
   position: absolute;
   right: 7px;
   top: 7px;
 }
 
-#port-forwarding-config-title {
+dialog.config > .title {
   font-size: 130%;
 }
 
-#port-forwarding-config-list {
+dialog.config > .list {
   border: 1px solid #eee;
   height: 180px;
   margin-bottom: 10px;
   margin-top: 10px;
   overflow-x: hidden;
 }
 
-.port-forwarding-pair {
+.config-list-row {
   -webkit-flex-direction: row;
   display: -webkit-flex;
 }
 
-.port-forwarding-pair:hover {
+.config-list-row:hover {
   background-color: #eee;
 }
 
-.port-forwarding-pair.selected,
-.port-forwarding-pair.selected:hover {
+.config-list-row.selected,
+.config-list-row.selected:hover {
   background-color: #ccc;
 }
 
-.port-forwarding-pair input {
+.config-list-row input {
   border: 1px solid transparent;
   line-height: 20px;
   margin: 4px;
   min-width: 0;
   padding: 0 3px;
 }
 
-.port-forwarding-pair.fresh:not(.selected) input {
+.config-list-row.fresh:not(.selected) input {
   border-color: #eee;
 }
 
-.port-forwarding-pair input.port {
+.config-list-row input.port {
   width: 4em;
 }
 
-.port-forwarding-pair input.location {
+.config-list-row input.location {
   -webkit-flex: 1;
+  width: 100%;
 }
 
-.port-forwarding-pair:not(.empty) input.invalid {
+.config-list-row:not(.empty) input.invalid {
   background-color: rgb(255, 200, 200);
 }
 
-.port-forwarding-pair .close-button {
+.config-list-row .close-button {
   margin: 8px 8px;
 }
 
-.port-forwarding-pair.fresh .close-button,
-.port-forwarding-pair:not(.selected):not(:hover) .close-button:not(:hover) {
+.config-list-row.fresh .close-button,
+.config-list-row:not(.selected):not(:hover) .close-button:not(:hover) {
   background-image: none;
   pointer-events: none;
 }
 
-.port-forwarding-pair:not(.selected) .close-button:not(:hover) {
+.config-list-row:not(.selected) .close-button:not(:hover) {
   opacity: 0.5;
 }
 
-#port-forwarding-message {
+dialog.config > .message {
   margin-bottom: 12px;
   width: 20em;
 }
 
-#port-forwarding-config-buttons {
+.config-buttons {
   align-items: center;
   display: flex;
 }
 
-#port-forwarding-config-buttons > label {
+dialog.port-forwarding .target-discovery {
+  display: none;
+}
+
+dialog.target-discovery .port-forwarding {
+  display: none;
+}
+
+.config-buttons > label {
   flex-grow: 1
 }
 
 @media (max-width: 47em) {
   #navigation,
   #content {
     overflow: visible;
   }
 }
 @media (min-width: 47em) {
   #container {
     height: 100vh;
   }
   #navigation,
   #content {
     height: 100vh;
     overflow: auto;
   }
 }