diff options
| author | loislo@chromium.org <loislo@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2011-05-12 12:21:52 +0000 |
|---|---|---|
| committer | loislo@chromium.org <loislo@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2011-05-12 12:21:52 +0000 |
| commit | e29b41c7aff5a2ce77fbe127af29c0c4ce3c84ab (patch) | |
| tree | b6ae51caba3c94092bd2c0e06d53c2229774e534 /chrome/browser/debugger | |
| parent | 0a7412cbe376c30107528c2df1d1af87661ff29a (diff) | |
| download | chromium_src-e29b41c7aff5a2ce77fbe127af29c0c4ce3c84ab.zip chromium_src-e29b41c7aff5a2ce77fbe127af29c0c4ce3c84ab.tar.gz chromium_src-e29b41c7aff5a2ce77fbe127af29c0c4ce3c84ab.tar.bz2 | |
Improvements for DevTools Remote debugging tab selector page.
BUG=none
TEST=none
Review URL: http://codereview.chromium.org/6954013
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@85121 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser/debugger')
| -rw-r--r-- | chrome/browser/debugger/frontend/devtools_frontend.html | 130 |
1 files changed, 99 insertions, 31 deletions
diff --git a/chrome/browser/debugger/frontend/devtools_frontend.html b/chrome/browser/debugger/frontend/devtools_frontend.html index 5191587..85c03b8 100644 --- a/chrome/browser/debugger/frontend/devtools_frontend.html +++ b/chrome/browser/debugger/frontend/devtools_frontend.html @@ -1,22 +1,83 @@ <html> <head> +<title>Inspectable pages</title> <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; +body { + background-color: rgb(245, 245, 245); + font-family: Helvetica, Arial, sans-serif; + text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px; +} + +#caption { + text-align: left; + color: black; + font-size: 16px; + margin-top: 30px; + margin-bottom: 0px; + margin-left: 70px; + height: 20px; +} + +#items { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-lines: multiple; + margin-left: 60px; + margin-right: 60px; +} + +.frontend_ref { + color: black; + text-decoration: initial; +} + +.thumbnail { + height: 132px; + width: 212px; + background-attachment: scroll; + background-origin: padding-box; + background-repeat: no-repeat; + border: 4px solid rgba(184, 184, 184, 1); + border-radius: 5px; + -webkit-transition-property: background-color, border-color; + -webkit-transition: background-color 0.15s, 0.15s; + -webkit-transition-delay: 0, 0; } -.item:hover { - border-color: gray; +.thumbnail:hover { + background-color: rgba(242, 242, 242, 1); + border-color: rgba(110, 116, 128, 1); + color: black; +} + +.thumbnail.connected { + opacity: 0.5; +} + +.thumbnail.connected:hover { + border-color: rgba(184, 184, 184, 1); + color: rgb(110, 116, 128); +} + +.item { + display: inline-block; + margin: 5px; + margin-top: 15px; + height: 162px; + width: 222px; + vertical-align: top; } .text { - margin-left: 220px; + text-align: left; + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: no-repeat 0; + background-size: 16px; + padding: 2px 0px 0px 20px; + margin: 4px 0px 0px 4px; } </style> @@ -37,38 +98,45 @@ function onReady() { } } -function appendItem(itemObject) { - var frontendRef; - if (itemObject.devtoolsFrontendUrl) { - frontendRef = document.createElement("a"); - frontendRef.href = itemObject.devtoolsFrontendUrl; +function appendItem(item_object) { + var frontend_ref; + if (item_object.devtoolsFrontendUrl) { + frontend_ref = document.createElement("a"); + frontend_ref.href = item_object.devtoolsFrontendUrl; + frontend_ref.title = item_object.title; } else { - frontendRef = document.createElement("div"); + frontend_ref = document.createElement("div"); + frontend_ref.title = "The tab already has an active debug session"; } + frontend_ref.className = "frontend_ref"; - var item = document.createElement("div"); - item.className = "item"; - item.style.cssText = "background-image:url(" + - itemObject.thumbnailUrl + + var thumbnail = document.createElement("div"); + thumbnail.className = item_object.devtoolsFrontendUrl ? + "thumbnail" : "thumbnail connected"; + thumbnail.style.cssText = "background-image:url(" + + item_object.thumbnailUrl + ")"; - frontendRef.appendChild(item); + frontend_ref.appendChild(thumbnail); - var titleElement = document.createElement("div"); - titleElement.className = "text"; - titleElement.innerText = itemObject.title; - item.appendChild(titleElement); + var text = document.createElement("div"); + text.className = "text"; + text.innerText = item_object.title; + text.style.cssText = "background-image:url(" + + item_object.faviconUrl + ")"; + frontend_ref.appendChild(text); - var urlElement = document.createElement("div"); - urlElement.className = "text"; - urlElement.innerText = itemObject.url; - item.appendChild(urlElement); + var item = document.createElement("p"); + item.className = "item"; + item.appendChild(frontend_ref); - document.getElementById("items").appendChild(frontendRef); + document.getElementById("items").appendChild(item); } </script> </head> <body onload='onLoad()'> + <div id='caption'>Inspectable pages</div> <div id='items'> </div> + <hr> </body> </html> |