Implement apps v2 custom window frame.

remoting/webapp/window_frame.css

+/* Copyright 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.
+ */
+
+html.apps-v2,
+html.apps-v2 body {
+  height: 100%;
+  width: 100%;
+}
+
+html.apps-v2 body:not(.fullscreen) {
+  border: 1px solid gray;  /* This is the window border. */
+}
+
+html.apps-v2 .title-bar {
+  border-bottom: 1px solid gray;
+  z-index: 100;
+}
+
+.window-title,
+.window-controls-hover-target {
+  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;
+}
+
+.window-controls-hover-target {
+  -webkit-app-region: no-drag;
+  position: fixed;
+  top: 1px;
+  right: 1px;
+}
+
+.window-controls-hover-target {
+  display: table;
+}
+
+.window-controls-hover-target > 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;
+  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;
+}
+
+body.fullscreen .window-controls-stub {
+  display: table-cell;
+}
+
+body.fullscreen .window-controls-hover-target {
+  transition-property: opacity, box-shadow, border, top;
+  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 {
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
+}