Implement apps v2 custom window frame.

remoting/webapp/title_bar.css

+html.apps-v2,

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

add copyright header

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

Done.

+html.apps-v2 body {
+  height: 100%;
+  width: 100%;
+}
+
+html.apps-v2 body:not(.fullscreen) {
+  border: 1px solid gray;  /** This is the window border. */

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

why "/**" instead of "/*?

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

Force of habit. Done.

+}
+
+html.apps-v2 .title-bar {
+  border-bottom: 1px solid gray;
+  z-index: 100;
+}
+
+.window-title,
+.window-controls {
+  height: 32px;
+  line-height: 32px;
+  font-size: 16px;
+  background-color: #c4c4c4;
+}
+
+.title-bar .window-title {
+  padding-left: 12px;
+  width: 100%;
+  display: inline-block;
+  -webkit-app-region: drag;

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

I didn't know about this before.  This is cool :)

+}
+
+.window-controls-hover-target {
+  -webkit-app-region: no-drag;
+  position: fixed;
+  top: 1px;
+  right: 1px;
+}
+
+.window-controls {
+  display: table;

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

I think we can probably achieve the same layout without using display:table.  Is
that a particular reason why we need to use a table here?

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

See my response to Sergey's similar comment.

+}
+
+.window-controls > div:first-child {
+  display: table-row;
+}
+
+.window-control {
+  height: 32px;
+  width: 32px;
+  text-align: center;
+  display: inline-block;
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.window-control:hover {
+  background-color: #d5d5d5;
+}
+
+.window-control:active {
+  background-color: #a6a6a6;
+}
+
+.window-control > img {
+  margin-bottom: -2px;
+}
+
+#window-controls-stub {
+  display: none;
+  -webkit-column-span: all;

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

is it possible to use flex instead of tables to layout controls?

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

I tried lots of different methods for laying out the controls, and all had
subtle problems I couldn't work-around except for tables. The most common was a
gap between the buttons, but tbh I don't remember all the failure modes, or if I
even tried flexbox.

I think it's important to distinguish between using <table> as a cheat to get
the layout you want vs. using "display: table" in the CSS. Using <table> for
something that is not tabular content pollutes the mark-up and should be
avoided; OTOH, "display: table", IMO, is fine if it's the clearest way of
expressing how things should look.

I would prefer not to spend a lot of time trying to get this working with
flexbox, but LMK if you feel strongly that we should not be using "display:
table".

+  line-height: 3px;
+  background: url("drag.webp");
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+#scroller {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  position: relative;
+}
+
+html.apps-v2 #scroller {
+  height: calc(100% - 32px);  /** Allow space for the title-bar */
+}
+
+/* Add an etched border to the window controls, title bar and stub */
+.title-bar,
+.window-control,
+#window-controls-stub {
+  position: relative;
+}
+
+.title-bar:after,
+.window-control:after,
+#window-controls-stub:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  pointer-events: none;
+}
+
+
+/* When connected to a host, the Disconnect button is displayed. */
+body:not(.connected) #window-disconnect {
+  display: none;
+}
+
+
+/*
+ * When in full-screen mode, significant changes are made:
+ * - The scroll-bars are removed.
+ * - The window controls have a border (so the left-border of the first button
+ *   is not needed).
+ * - The title-bar (and its bottom border) are not displayed.
+ * - The stub is visible.
+ * - The window controls gain transition effects for position and opacity and
+ *   auto-hide behind the top edge of the screen.
+ * - The window border is removed.
+ */
+
+html.apps-v2 body.fullscreen #scroller {
+  height: 100%;
+  overflow: hidden;
+}
+
+body.fullscreen .window-controls {
+  border: 1px solid gray;
+}
+
+body.fullscreen .window-control:first-child {
+  border-left: none;
+}
+
+body.fullscreen .window-title {
+  display: none;
+}
+
+body.fullscreen .title-bar {
+    border-bottom: none;

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

nit: indentation

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

Done.

+}
+
+body.fullscreen #window-controls-stub {
+  display: table-cell;
+}
+
+body.fullscreen .window-controls-hover-target {
+  -webkit-transition-property: opacity,

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

CSS transitions no longer need the prefix.

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

Done.

+                               box-shadow,
+                               border,
+                               top;
+  -webkit-transition-duration: 0.3s;
+  opacity: 0.7;
+  top: -33px;
+  right: 8px;
+}
+
+body.fullscreen .window-controls-hover-target:hover,
+body.fullscreen .window-controls-hover-target.opened {
+  top: -4px;
+  opacity: 1.0;
+}
+
+.fullscreen .window-controls-hover-target.opened #window-controls-stub {
+    background-color: #a6a6a6;
+}
+
+.fullscreen .window-controls-hover-target:hover .window-controls {
+  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);

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

don't need -webkit-

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

Done.

+}