Update samples that use draggable regions to adapt to new CSS syntax …

…and default behavior.

frameless-window/README.md

@@ -1,6 +1,6 @@
 # Frameless window
 
-A sample application to showcase how you can use frame:'none' windows to allow total customization of the window's real state. At beginning, the window is open with no titlebar. As long as you check one of the titlebars, it is added to the appropriate position. Notice that the added titlebars are the only parts of the window that allows dragging. This is achieved through a special CSS property applied to what is NOT to be draggable (in this case, the whole content of the window, except the titlebars): `-webkit-widget-region: region(control rectangle);`
+A sample application to showcase how you can use frame:'none' windows to allow total customization of the window's real state. At beginning, the window is open with no titlebar. As long as you check one of the titlebars, it is added to the appropriate position. Notice that the added titlebars are the only parts of the window that allows dragging. This is achieved through a special CSS property applied to what is draggable or non-draggable (by default, the whole window is not draggable): `-webkit-app-region: drag|no-drag;`
 
 ## APIs
 

frameless-window/style.css

@@ -38,6 +38,7 @@ div#inner-content {
   width: 100%;
   height: 32px;
   background-color: #7a7c7c;
+  -webkit-app-region: drag;
 }
 
 .bottom-titlebar {
@@ -47,6 +48,7 @@ div#inner-content {
   width: 100%;
   height: 32px;
   background-color: #7a7c7c;
+  -webkit-app-region: drag;
 }
 
 .left-titlebar {
@@ -56,6 +58,7 @@ div#inner-content {
   width: 32px;
   height: 100%;
   background-color: #7a7c7c;
+  -webkit-app-region: drag;
 }
 
 .right-titlebar {
@@ -65,6 +68,7 @@ div#inner-content {
   width: 32px;
   height: 100%;
   background-color: #7a7c7c;
+  -webkit-app-region: drag;
 }
 
 .top-titlebar-icon,
@@ -135,7 +139,7 @@ div#inner-content {
   height: 17px;
   margin-top: 6px;
   margin-bottom: 6px;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 .left-titlebar-close-button {
@@ -145,7 +149,7 @@ div#inner-content {
   height: 17px;
   margin-left: 6px;
   margin-right: 6px;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 .right-titlebar-close-button {
@@ -155,7 +159,7 @@ div#inner-content {
   height: 17px;
   margin-left: 6px;
   margin-right: 6px;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 .top-titlebar-divider {

frameless-window/titlebar.js

@@ -112,7 +112,7 @@ function updateContentStyle() {
     width -= titlebar.offsetWidth;
   }
 
-  var contentStyle = "position: absolute; -webkit-widget-region: region(control rectangle); ";
+  var contentStyle = "position: absolute; ";
   contentStyle += "left: " + left + "px; ";
   contentStyle += "top: " + top + "px; ";
   contentStyle += "width: " + width + "px; ";

mdns-browser/header.css

@@ -12,6 +12,7 @@ header {
   z-index: 100;
   font-family: Arial, Helvetica, Sans-Serif;
   border-radius: 2px;
+  -webkit-app-region: drag;
 }
 
 header li,
@@ -36,7 +37,7 @@ header input[type="text"] {
 
 header button,
 header input[type="text"] {
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 header .small {

mdns-browser/main.css

@@ -4,6 +4,7 @@ body {
   background: rgba(102, 102, 119, 0.85);
   background: white;
   width: 100%;
+  -webkit-app-region: drag;
 }
 
 div#main {
@@ -14,7 +15,7 @@ div#main {
   overflow-y: scroll;
   color: white;
   color: black;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 ul#results {

weather/style.css

@@ -15,18 +15,23 @@ body {
   text-align: center;
   height: 450px;
   width: 300px;
+  -webkit-app-region: drag;
+}
+
+a {
+  -webkit-app-region: no-drag;
 }
 
 ::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   border: 1px solid #fff;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 ::-webkit-scrollbar-thumb {
   background: #eee;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 
@@ -40,7 +45,7 @@ body {
   width: 17px;
   height: 17px;
   cursor: pointer;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
   visibility: hidden;
 }
 
@@ -72,6 +77,7 @@ body:hover .close {
   transition: all 0.218s;
   -webkit-transition: all 0.218s;
   white-space: nowrap;
+  -webkit-app-region: no-drag;
 }
 
 .button:hover {
@@ -129,6 +135,7 @@ input[type=radio] {
 	box-sizing: border-box;
 	cursor: default;
 	position: relative;
+	-webkit-app-region: no-drag;
 }
 
 input[type=checkbox]:active,
@@ -197,7 +204,7 @@ input[type=text] {
   vertical-align: middle;
   margin-bottom: 15px;
   width: 270px;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 input[type=text]:hover {
@@ -282,6 +289,7 @@ input[type=text].form-error{
 	position: absolute;
 	right: 0px;
 	width: 20px;
+	-webkit-app-region: no-drag;
 }
 
 #weather {

webgl/styles/main.css

@@ -15,7 +15,7 @@ body {
   width: 17px;
   height: 17px;
   cursor: pointer;
-  -webkit-widget-region: region(control rectangle);
+  -webkit-app-region: no-drag;
 }
 
 .close:hover {