HTML titlebars for v2 apps.

chrome/renderer/resources/extensions/inject_app_titlebar.js

Index: chrome/renderer/resources/extensions/inject_app_titlebar.js
diff --git a/chrome/renderer/resources/extensions/inject_app_titlebar.js b/chrome/renderer/resources/extensions/inject_app_titlebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c13d2f127f30ed976e6e24c3f3185a968ee2fb4
--- /dev/null
+++ b/chrome/renderer/resources/extensions/inject_app_titlebar.js
@@ -0,0 +1,28 @@
+exports.didCreateDocumentElement = function(inject_titlebar) {
+  if (inject_titlebar) {
+    var root = new WebKitShadowRoot(document.childNodes[0]);
+    root.appendChild(document.createElement('style')).innerText =
+        "x-titlebar { height: 24px; width: 100%; position: absolute; left: 0; top: 0; }\n" +
+        "div { padding-top: 24px; }\n" +
+        ":-webkit-full-screen * { display: none; }\n" +
+        ":-webkit-full-screen-document * { display: none; }\n" +
+        "div:-webkit-full-screen, div:-webkit-full-screen-document { padding-top: 0; }\n" +
+        "button { -webkit-widget-region: region(control rectangle); }\n" +
+        "button.close { border: 0; background-color: transparent; width: 16px; height: 16px; position: absolute; right: 4px; top: 4px; }\n" +
+        // TODO(jeremya): these are ui/resources/default_100_percent/close_bar*
+        //   and it would be good to find a way to directly reference them

[Mihai Parparita -not on Chrome, 2012/08/30 01:13:47]

We have a chrome-extension-resource for resources that live in Chrome that apps
would want to reference. See http://crrev.com/137918 for how they're exposed
(demo/library.js).

You could have a build step that copies the selected UI images to the extension
resources directory.

Same thing about the stylesheet itself.

Alternatively, if you're concerned about request overhead, you could look into
the tool that we have to automatically inline images and CSS resources into
pages like the NTP and see if that could be used here
(tools/grit/grit/format/html_inline.py).

+        //   instead of duplicating them here.
+        "button.close { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA9ElEQVQ4T7VTQQ6CMBCk0HAyIfAQbiZ+QHyDL/QLxqvx4MWDB+MvFAWMAuKsacmmSjkQSDbQ2Z3Z3WkQzsBHDOQ7owgsMdUacTGmi3BeIFYcNycgciGlfFRVtcd3qoojz/PmdV0XOD8RGy1iCoQgT5G8IyREjni7ICcg58ilwA7A8i4BwgMUxkKIV9M0PggTAoFlJpnwLhO5iEuFapq2s20CyoWIGbpeaRICyrI889FtAtqwGxdQ65yYsV8NcwVN5obR/uTJW4mQsfp2fgToGjPqbBjWeoJVfNRsbSskSO7+7BsAiznZdgu6Qe97lH+htysv+AA10msRAt5JYQAAAABJRU5ErkJggg==); }\n" +
+        "button.close:hover { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABTElEQVQ4T2NkoBAwUqifAcWA////KwANFAPiV4yMjA+QDcclBzcApCA6Otpz2bJluQkJCf3z58/fDTMEnxyyAWZADQuAtj4B4ncpKSnbZs+efQjkCqjBmUDmMyD+ADSwD6j2FEgOxQWJiYmuCxYscIYawpWamnr89+/fHECxbKjmB2VlZbs6OzsvwFyHEQZATXZz5syxAGr4BMR8QCwJDYvn1dXVO1taWi4ihw9GLID8m5aWZgt0viXUEBaQAUDNh9E1o3gBFuIgA6Be8QKK3QXiLyA5oNMvIDsdph7DC9AASwcquI9sAJDNk5GRcX769OlHsXoBKapAoQ2KiQcgPwMDkbGrq8sGyP8DChNQwM6aNeswRiACDYBF4yOgwnuwAAM5NTMz03rGjBnWsIAFql2ANxqB/l2B7F/kgCUYjUBbyEvKsFAllaY4NwIAmJDPEd+LFvYAAAAASUVORK5CYII=); }\n" +
+        "button.close:active { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZ0lEQVQ4T2NkoBAwUqifgeoG2AFd1AfERUB8CM11WOXQXXAGSROyITDNMGkTGAPdAHSFIENAAOQqGEBxHbYwQDcE2ScYXsMViNgMwRYuOGOBIgMo8gLFgUi1aCQ7IZGcNaieF0h2AQCMABwRdsuhtQAAAABJRU5ErkJggg==); }\n"
+    var container = root.appendChild(document.createElement('div'));
+    var titlebar = container.appendChild(document.createElement('x-titlebar'));
+    var closeButton = titlebar.appendChild(document.createElement('button'));
+    closeButton.setAttribute('class', 'close');
+    closeButton.addEventListener('click', function() { window.close(); });
+    container.appendChild(document.createElement('content'));
+  }
+  document.onreadystatechange = function() {

[Mihai Parparita -not on Chrome, 2012/08/30 01:13:47]

Can you not use this to determine when to inject the titlebar? I.e. will this
fire (with readyState set to "loading") roughly when DidCreateDocumentElement
would get called? Based on
http://code.google.com/searchframe#OAMlx_jo-ck/src/third_party/WebKit/Source/...
it seems like it would.

[jeremya, 2012/08/30 01:45:18]

Experimentally, it doesn't. I only get the 'interactive' and 'complete'
readystatechanges.

[jeremya, 2012/08/30 01:50:06]

(and also: readystatechange doesn't bubble to window, so I can't add a listener
on the window. The problem here is that the document element gets substituted
out when the navigation happens, so any event listeners I register on the
document at window creation time are gone by the time the second document gets
loaded.)

+    console.log(document.readyState);
+  }

[abarth-chromium, 2012/08/29 23:51:20]

Presumably you'll want to remove this part before landing.

[jeremya, 2012/08/30 02:21:02]

Done.

+}