DevTools: introduce --custom-devtools-frontend flag.

chrome/browser/devtools/frontend/devtools_discovery_page.html

Index: chrome/browser/devtools/frontend/devtools_discovery_page.html
diff --git a/chrome/browser/devtools/frontend/devtools_discovery_page.html b/chrome/browser/devtools/frontend/devtools_discovery_page.html
index d6d9fb01ce793c36d1c340f1adc5139924a9c84b..df5db67319bc28c71345488183e639acfccb4148 100644
--- a/chrome/browser/devtools/frontend/devtools_discovery_page.html
+++ b/chrome/browser/devtools/frontend/devtools_discovery_page.html
@@ -46,12 +46,16 @@ body {
   color: rgb(110, 116, 128);
 }
 
+.item.custom {
+    cursor: pointer;
+}
+
 .description {
   display: flex;
   flex-direction: column;
 }
 
-.title, .subtitle {
+.title, .subtitle, .custom-url {
   font-size: 13px;
   margin: 4px 0px 0px 6px;
   overflow: hidden;
@@ -64,6 +68,19 @@ body {
   font-size: 15px;
 }
 
+.custom-url {
+  display: flex;
+}
+
+.custom-url-label {
+  flex: 0 0 auto;
+}
+
+.custom-url-value {
+  font-family: monospace;
+  margin-left: 1em;
+}
+
 </style>
 
 <script>
@@ -84,23 +101,34 @@ function onReady() {
   }
 }
 
-function overrideFrontendUrl(item) {
-  if (window.location.hash) {
-    var overridden_url = window.location.hash.substr(1);
-    var ws_suffix = item.webSocketDebuggerUrl.replace('ws://', 'ws=');
-    if (overridden_url.indexOf('?') == -1)
-      return overridden_url + '?' + ws_suffix;
-    else
-      return overridden_url + '&' + ws_suffix;
-  }
-  return item.devtoolsFrontendUrl;
+function customFrontendURL(url) {
+  if (!url || !window.location.hash)
+    return null;
+
+  var hashParams = new URLSearchParams(location.hash.substring(1));
+  if (!hashParams.get("custom"))
+    return null;
+
+  var searchIndex = url.indexOf("?");
+  if (searchIndex === -1)
+    return null;
+  var originalParams = url.substring(searchIndex + 1);
+  if (hashParams.get("experiments"))
+    originalParams += "&experiments=true";
+
+  return "chrome-devtools://devtools/custom/inspector.html?" + originalParams;
 }
 
 function appendItem(item_object) {
   var item_element;
-  if (item_object.devtoolsFrontendUrl) {
+  var customURL = customFrontendURL(item_object.devtoolsFrontendUrl);
+  if (customURL) {
+    item_element = document.createElement('div');
+    item_element.title = item_object.title;
+    item_element.className = 'custom';
+  } else if (item_object.devtoolsFrontendUrl) {
     item_element = document.createElement('a');
-    item_element.href = overrideFrontendUrl(item_object);
+    item_element.href = item_object.devtoolsFrontendUrl;
     item_element.title = item_object.title;
   } else {
     item_element = document.createElement('div');
@@ -115,8 +143,10 @@ function appendItem(item_object) {
   var title = document.createElement('div');
   title.className = 'title';
   title.textContent = item_object.description || item_object.title;
-  title.style.cssText = 'background-image:url(' +
-      item_object.faviconUrl + ')';
+  if (item_object.faviconUrl) {
+    title.style.cssText = 'background-image:url(' +
+        item_object.faviconUrl + ')';
+  }
   description.appendChild(title);
 
   var subtitle = document.createElement('div');
@@ -124,10 +154,38 @@ function appendItem(item_object) {
   subtitle.textContent = (item_object.url || '').substring(0, 300);
   description.appendChild(subtitle);
 
+  if (customURL) {
+    var urlContainer = document.createElement('div');
+    urlContainer.classList.add("custom-url");
+    var urlLabel = document.createElement('div');
+    urlLabel.classList.add("custom-url-label");
+    urlLabel.textContent = "Click to copy URL:";
+    urlContainer.appendChild(urlLabel);
+    var urlValue = document.createElement('div');
+    urlValue.classList.add("custom-url-value");
+    urlValue.textContent = customURL;
+    urlContainer.appendChild(urlValue);
+    description.appendChild(urlContainer);
+    item_element.addEventListener('click', selectNodeText.bind(null, urlValue));
+  }
+
   item_element.appendChild(description);
 
   document.getElementById('items').appendChild(item_element);
 }
+
+function selectNodeText(selectElement, event)
+{
+  var selection = window.getSelection();
+  if (!selection.isCollapsed)
+    return;
+  var range = document.createRange();
+  range.selectNode(selectElement);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  event.stopPropagation();
+  event.preventDefault();
+}
 </script>
 </head>
 <body onload='onLoad()'>