Implement apps v2 custom window frame.

remoting/webapp/html/title_bar.html

Index: remoting/webapp/html/title_bar.html
diff --git a/remoting/webapp/html/title_bar.html b/remoting/webapp/html/title_bar.html
new file mode 100644
index 0000000000000000000000000000000000000000..15fa79dcd230e9dd66221395be5efb3b4be6fd2b
--- /dev/null
+++ b/remoting/webapp/html/title_bar.html
@@ -0,0 +1,35 @@
+<!--
+Copyright (c) 2014 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.
+-->
+<div id="title-bar" class="title-bar apps-v2-only">
+  <span id="window-title" class="window-title">&nbsp;</span>

[Jamie, 2014/05/05 22:37:15]

I don't like the use of   here, but the size specifications for the span
are not respected without it. If you can think of a better solution, please let
me know.

[Sergey Ulanov, 2014/05/06 07:58:14]

nit: do you need both class and id here?

[Sergey Ulanov, 2014/05/06 07:58:14]

Does it not work if you put a space instead of   here?

[Jamie, 2014/05/06 21:11:08]

I don't think so. Even if it did, I would be nervous about it being removed by a
future edit that thought it was unnecessary white-space.

[Jamie, 2014/05/06 21:11:08]

I've eliminated all ids except the top-level one in favour of a pattern whereby
the root node is passed to the WindowFrame class, which uses querySelector to
find the child nodes.

+  <span class="window-controls-hover-target" id="window-controls">

[Sergey Ulanov, 2014/05/06 07:58:14]

Maybe use divs instead of spans and explicitly set display to inline-block?
Otherwise presentation is not separated from the content. Also it's confusing
when divs are mixed with spans. 

[Jamie, 2014/05/06 21:11:08]

I've used spans for content that is laid out horizontally and divs for content
that is laid out vertically. I think that more clearly describes the layout than
using divs everywhere. LMK if you disagree; the CSS overrides the defaults
sufficiently that I don't think it makes any difference and I don't have a
strong preference either way.

It turns out there was an extra unnecessary div, which I've removed, but I've
left everything else unchanged.

+    <span class="window-controls">

[Sergey Ulanov, 2014/05/06 07:58:14]

you have both id=window-controls and class=window-controls. This might be
confusing and I'm not sure if id=window-controls is useful at all.

[Jamie, 2014/05/06 21:11:08]

See above.

+      <div>

[kelvinp, 2014/05/06 04:42:15]

<span>'s are inline elements and <div>'s are block elements.  Is it a particular
reason why the div is sandwiched between the spans here?  Can we replace the div
with a span?

[Jamie, 2014/05/06 21:11:08]

Done.

+        <span id="window-disconnect"
+              i18n-title="DISCONNECT_MYSELF_BUTTON"
+              class="window-control">
+          <img src="icon_disconnect.webp">
+        </span>
+        <span id="window-minimize"

[kelvinp, 2014/05/06 04:42:15]

Do we care about RTL languages?  Do we need to show the buttons on the top-right
corner on those locales?

[Jamie, 2014/05/06 21:11:08]

Good catch! We do care, and I think the correct behaviour is to lay out the
controls left-aligned. I'm not certain though, and it might be a bit fiddly to
get it working, so I would prefer to follow up with a CL to address just that
after confirming that it's the right behaviour.

+              i18n-title="MINIMIZE_WINDOW"
+              class="window-control">
+          <img src="icon_minimize.webp">
+        </span>
+        <span id="window-maximize-restore"
+              i18n-title="MAXIMIZE_WINDOW"
+              class="window-control">
+          <img src="icon_maximize_restore.webp">
+        </span>
+        <span id="window-close"
+              i18n-title="CLOSE_WINDOW"
+              class="window-control">
+          <img src="icon_close.webp">
+        </span>
+      </div>
+      <div id="window-controls-stub">&nbsp;</div>
+    </span>
+  </span>
+</div>