There is a patch for new resource pak for devtools tab selection page.

We have a generated tab selection page for remote debugging.
It is quite simple and needs to be extended for better discoverability and nice view.
I've splitted it into three parts. Generated one with the list of tabs available
for debugging and two static files devtools_frontend.css and devtools_frontend.js

It was decided to keep these two files separately from the rest of the devtools files.
The first reason: tab selection page can be platform specific.
The second reason: main devtools files can be stored in the cloud.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/6912023

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@84419 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 120 insertions, 54 deletions

diff --git a/chrome/browser/debugger/devtools_http_protocol_handler.cc b/chrome/browser/debugger/devtools_http_protocol_handler.cc
index 175de35..6e55da0 100644
--- a/chrome/browser/debugger/devtools_http_protocol_handler.cc
+++ b/chrome/browser/debugger/devtools_http_protocol_handler.cc
@@ -22,11 +22,14 @@
 #include "chrome/common/devtools_messages.h"
 #include "content/browser/browser_thread.h"
 #include "content/browser/tab_contents/tab_contents.h"
+#include "grit/devtools_frontend_resources.h"
 #include "googleurl/src/gurl.h"
+#include "net/base/escape.h"
 #include "net/base/io_buffer.h"
 #include "net/server/http_server_request_info.h"
 #include "net/url_request/url_request_context.h"
 #include "net/url_request/url_request_context_getter.h"
+#include "ui/base/resource/resource_bundle.h"
 
 const int kBufferSize = 16 * 1024;
 
@@ -120,18 +123,6 @@ void DevToolsHttpProtocolHandler::Stop() {
 void DevToolsHttpProtocolHandler::OnHttpRequest(
     int connection_id,
     const net::HttpServerRequestInfo& info) {
-  if (info.path == "" || info.path == "/") {
-    // Pages discovery request.
-    BrowserThread::PostTask(
-        BrowserThread::UI,
-        FROM_HERE,
-        NewRunnableMethod(this,
-                          &DevToolsHttpProtocolHandler::OnRootRequestUI,
-                          connection_id,
-                          info));
-    return;
-  }
-
   if (info.path == "/json") {
     // Pages discovery json request.
     BrowserThread::PostTask(
@@ -144,23 +135,34 @@ void DevToolsHttpProtocolHandler::OnHttpRequest(
     return;
   }
 
-  size_t pos = info.path.find("/devtools/");
-  if (pos != 0) {
+  // Proxy static files from chrome-devtools://devtools/*.
+  if (!Profile::GetDefaultRequestContext()) {
     server_->Send404(connection_id);
     return;
   }
 
-  // Proxy static files from chrome-devtools://devtools/*.
-  if (!Profile::GetDefaultRequestContext()) {
+  if (info.path == "" || info.path == "/") {
+    const base::StringPiece frontend_html(
+        ResourceBundle::GetSharedInstance().GetRawDataResource(
+            IDR_DEVTOOLS_FRONTEND_HTML));
+    std::string response(frontend_html.data(), frontend_html.length());
+    server_->Send200(connection_id, response, "text/html; charset=UTF-8");
+    return;
+  }
+
+  net::URLRequest* request;
+
+  if (info.path.find("/devtools/") == 0)
+    request = new net::URLRequest(GURL("chrome-devtools:/" + info.path), this);
+  else if (info.path.find("/thumb/") == 0)
+    request = new net::URLRequest(GURL("chrome:/" + info.path), this);
+  else {
     server_->Send404(connection_id);
     return;
   }
 
   // Make sure DevTools data source is registered.
   DevToolsUI::RegisterDevToolsDataSource();
-
-  net::URLRequest* request = new net::URLRequest(
-      GURL("chrome-devtools:/" + info.path), this);
   Bind(request, connection_id);
   request->set_context(
       Profile::GetDefaultRequestContext()->GetURLRequestContext());
@@ -224,6 +226,7 @@ struct PageInfo
   std::string url;
   bool attached;
   std::string title;
+  std::string thumbnail_url;
   std::string favicon_url;
 };
 typedef std::vector<PageInfo> PageList;
@@ -253,45 +256,14 @@ static PageList GeneratePageList(
     page_info.id = controller.session_id().id();
     page_info.attached = client_host != NULL;
     page_info.url = entry->url().spec();
-    page_info.title = UTF16ToUTF8(entry->title());
+    page_info.title = UTF16ToUTF8(EscapeForHTML(entry->title()));
+    page_info.thumbnail_url = "/thumb/" + entry->url().spec();
     page_info.favicon_url = entry->favicon().url().spec();
     page_list.push_back(page_info);
   }
   return page_list;
 }
 
-void DevToolsHttpProtocolHandler::OnRootRequestUI(
-    int connection_id,
-    const net::HttpServerRequestInfo& info) {
-  std::string host = info.headers["Host"];
-  std::string response = "<html><body>";
-  PageList page_list = GeneratePageList(tab_contents_provider_.get(),
-                                        connection_id, info);
-  for (PageList::iterator i = page_list.begin();
-       i != page_list.end(); ++i) {
-
-    std::string frontendURL = StringPrintf("%s?host=%s&page=%d",
-                                           overriden_frontend_url_.c_str(),
-                                           host.c_str(),
-                                           i->id);
-    response += "<div>";
-    response += StringPrintf(
-        "<img style=\"margin-right:5px;width:16px;height:16px\" src=\"%s\">",
-        i->favicon_url.c_str());
-
-    if (i->attached) {
-      response += i->url.c_str();
-    } else {
-      response += StringPrintf("<a href=\"%s\">%s</a><br>",
-                               frontendURL.c_str(),
-                               i->url.c_str());
-    }
-    response += "</div>";
-  }
-  response += "</body></html>";
-  Send200(connection_id, response, "text/html; charset=UTF-8");
-}
-
 void DevToolsHttpProtocolHandler::OnJsonRequestUI(
     int connection_id,
     const net::HttpServerRequestInfo& info) {
@@ -306,6 +278,7 @@ void DevToolsHttpProtocolHandler::OnJsonRequestUI(
     json_pages_list.Append(page_info);
     page_info->SetString("title", i->title);
     page_info->SetString("url", i->url);
+    page_info->SetString("thumbnailUrl", i->thumbnail_url);
     page_info->SetString("faviconUrl", i->favicon_url);
     if (!i->attached) {
       page_info->SetString("webSocketDebuggerUrl",
diff --git a/chrome/browser/debugger/devtools_http_protocol_handler.h b/chrome/browser/debugger/devtools_http_protocol_handler.h
index 67eadc5..58e3384 100644
--- a/chrome/browser/debugger/devtools_http_protocol_handler.h
+++ b/chrome/browser/debugger/devtools_http_protocol_handler.h
@@ -65,8 +65,6 @@ class DevToolsHttpProtocolHandler
                                   const std::string& data);
   virtual void OnClose(int connection_id);
 
-  virtual void OnRootRequestUI(int connection_id,
-                             const net::HttpServerRequestInfo& info);
   virtual void OnJsonRequestUI(int connection_id,
                              const net::HttpServerRequestInfo& info);
   virtual void OnWebSocketRequestUI(int connection_id,
diff --git a/chrome/browser/debugger/frontend/devtools_frontend.html b/chrome/browser/debugger/frontend/devtools_frontend.html
new file mode 100644
index 0000000..5191587
--- /dev/null
+++ b/chrome/browser/debugger/frontend/devtools_frontend.html
@@ -0,0 +1,74 @@
+<html>
+<head>
+<style>
+.item {
+    height: 132px;
+    background-attachment: scroll;
+    background-origin: padding-box;
+    background-repeat: no-repeat;
+    border: 6px solid lightgray;
+    border-radius: 9px;
+    margin-top: 5px;
+}
+
+.item:hover {
+    border-color: gray;
+}
+
+.text {
+    margin-left: 220px;
+}
+</style>
+
+<script>
+function onLoad() {
+  var tabsListRequest = new XMLHttpRequest();
+  tabsListRequest.open("GET", "/json", true);
+  tabsListRequest.onreadystatechange = onReady;
+  tabsListRequest.send();
+}
+
+function onReady() {
+  if(this.readyState == 4 && this.status == 200) {
+    if(this.response != null)
+      var responseJSON = JSON.parse(this.response);
+      for (var i = 0; i < responseJSON.length; ++i)
+        appendItem(responseJSON[i]);
+  }
+}
+
+function appendItem(itemObject) {
+  var frontendRef;
+  if (itemObject.devtoolsFrontendUrl) {
+      frontendRef = document.createElement("a");
+      frontendRef.href = itemObject.devtoolsFrontendUrl;
+  } else {
+      frontendRef = document.createElement("div");
+  }
+
+  var item = document.createElement("div");
+  item.className = "item";
+  item.style.cssText = "background-image:url(" +
+                        itemObject.thumbnailUrl +
+                        ")";
+  frontendRef.appendChild(item);
+
+  var titleElement = document.createElement("div");
+  titleElement.className = "text";
+  titleElement.innerText = itemObject.title;
+  item.appendChild(titleElement);
+
+  var urlElement = document.createElement("div");
+  urlElement.className = "text";
+  urlElement.innerText = itemObject.url;
+  item.appendChild(urlElement);
+
+  document.getElementById("items").appendChild(frontendRef);
+}
+</script>
+</head>
+<body onload='onLoad()'>
+  <div id='items'>
+  </div>
+</body>
+</html>
diff --git a/chrome/browser/debugger/frontend/devtools_frontend_resources.grd b/chrome/browser/debugger/frontend/devtools_frontend_resources.grd
new file mode 100644
index 0000000..0351cac
--- /dev/null
+++ b/chrome/browser/debugger/frontend/devtools_frontend_resources.grd
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit current_release="1" latest_public_release="0">
+  <outputs>
+    <output filename="grit/devtools_frontend_resources.h"
+            type="rc_header">
+      <emit emit_type="prepend"/>
+    </output>
+    <output filename="grit/devtools_frontend_resources_map.cc"
+            type="resource_file_map_source"/>
+    <output filename="grit/devtools_frontend_resources_map.h"
+            type="resource_map_header"/>
+    <output filename="devtools_frontend_resources.pak"
+            type="data_package"/>
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include file="devtools_frontend.html"
+               name="IDR_DEVTOOLS_FRONTEND_HTML"
+               type="BINDATA"/></includes>
+  </release>
+</grit>