Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add a sample for frameless app window.

  • Loading branch information...
commit 78b6bd648cbed5654131ae4ac12bc4c6aa177add 1 parent da55b8b
@jianli-chromium jianli-chromium authored
View
14 frameless-window/background.js
@@ -0,0 +1,14 @@
+chrome.experimental.app.onLaunched.addListener(function() {
+ chrome.app.window.create(
+ "frameless_window.html",
+ { width: 360,
+ height: 300,
+ minWidth: 220,
+ minHeight: 220,
+ frame: 'none'
+ },
+ function(win) {
+ console.log(win);
+ }
+ );
+})
View
BIN  frameless-window/bottom-titlebar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  frameless-window/button_close.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  frameless-window/button_close_hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
37 frameless-window/frameless_window.html
@@ -0,0 +1,37 @@
+<html>
+
+<head>
+
+<title>Frameless Window</title>
+
+<link rel="stylesheet" type="text/css" href="style.css" />
+<script src="titlebar.js"></script>
+<script src="frameless_window.js"></script>
+
+</head>
+
+<body>
+
+<div id="content">
+
+<div id="inner-content">
+
+Select the titlebar to enable:<br/>
+<input type="checkbox" id="top-box">Top Titlebar
+<br/>
+<input type="checkbox" id="bottom-box">Bottom Titlebar
+<br/>
+<input type="checkbox" id="left-box">Left Titlebar
+<br/>
+<input type="checkbox" id="right-box">Right Titlebar
+<br/>
+<br/>
+<button id="close-window-button">Close Window</button>
+
+</div>
+
+</div>
+
+</body>
+
+</html>
View
61 frameless-window/frameless_window.js
@@ -0,0 +1,61 @@
+function updateCheckbox() {
+ var top_checkbox = document.getElementById("top-box");
+ var bottom_checkbox = document.getElementById("bottom-box");
+ var left_checkbox = document.getElementById("left-box");
+ var right_checkbox = document.getElementById("right-box");
+ if (top_checkbox.checked || bottom_checkbox.checked) {
+ left_checkbox.disabled = true;
+ right_checkbox.disabled = true;
+ } else if (left_checkbox.checked || right_checkbox.checked) {
+ top_checkbox.disabled = true;
+ bottom_checkbox.disabled = true;
+ } else {
+ left_checkbox.disabled = false;
+ right_checkbox.disabled = false;
+ top_checkbox.disabled = false;
+ bottom_checkbox.disabled = false;
+ }
+}
+
+function initCheckbox(checkboxId, titlebar_name, titlebar_icon_url, titlebar_text) {
+ var elem = document.getElementById(checkboxId);
+ if (!elem)
+ return;
+ elem.onclick = function() {
+ if (document.getElementById(checkboxId).checked)
+ addTitlebar(titlebar_name, titlebar_icon_url, titlebar_text);
+ else
+ removeTitlebar(titlebar_name);
+ focusTitlebars(true);
+
+ updateContentStyle();
+ updateCheckbox();
+ }
+}
+
+window.onfocus = function() {
+ console.log("focus");
+ focusTitlebars(true);
+}
+
+window.onblur = function() {
+ console.log("blur");
+ focusTitlebars(false);
+}
+
+window.onresize = function() {
+ updateContentStyle();
+}
+
+window.onload = function() {
+ initCheckbox("top-box", "top-titlebar", "top-titlebar.png", "Top Titlebar");
+ initCheckbox("bottom-box", "bottom-titlebar", "bottom-titlebar.png", "Bottom Titlebar");
+ initCheckbox("left-box", "left-titlebar", "left-titlebar.png", "Left Titlebar");
+ initCheckbox("right-box", "right-titlebar", "right-titlebar.png", "Right Titlebar");
+
+ document.getElementById("close-window-button").onclick = function() {
+ window.close();
+ }
+
+ updateContentStyle();
+}
View
BIN  frameless-window/icon_128.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  frameless-window/left-titlebar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
13 frameless-window/manifest.json
@@ -0,0 +1,13 @@
+{
+ "name": "Frameless Window",
+ "description": "Chrome platform app.",
+ "manifest_version": 2,
+ "version": "0.1",
+ "app": {
+ "background": {
+ "scripts": ["background.js"]
+ }
+ },
+ "permissions": ["experimental"],
+ "icons": { "128": "icon_128.png" }
+}
View
BIN  frameless-window/right-titlebar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
195 frameless-window/style.css
@@ -0,0 +1,195 @@
+html {
+ margin: 0px;
+ padding: 0px;
+ overflow: hidden;
+}
+
+body {
+ margin: 0px;
+ padding: 0px;
+}
+
+::-webkit-scrollbar-thumb {
+ display: none;
+}
+
+input[type="checkbox"]:disabled
+{
+ opacity: .3;
+}
+
+div#content {
+ background-color: #dddddd;
+ margin: 0px;
+ padding: 0px;
+}
+
+div#inner-content {
+ background-color: #dddddd;
+ margin: 10px;
+ width: 100%;
+ height: 100%;
+}
+
+.top-titlebar {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 32px;
+ background-color: #7a7c7c;
+}
+
+.bottom-titlebar {
+ position: absolute;
+ left: 0px;
+ bottom: 0px;
+ width: 100%;
+ height: 32px;
+ background-color: #7a7c7c;
+}
+
+.left-titlebar {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 32px;
+ height: 100%;
+ background-color: #7a7c7c;
+}
+
+.right-titlebar {
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 32px;
+ height: 100%;
+ background-color: #7a7c7c;
+}
+
+.top-titlebar-icon,
+.bottom-titlebar-icon {
+ position: absolute;
+ left: 6px;
+ margin-top: 6px;
+ margin-bottom: 6px;
+}
+
+.left-titlebar-icon {
+ position: absolute;
+ bottom: 6px;
+ margin-left: 6px;
+ margin-right: 6px;
+}
+
+.right-titlebar-icon {
+ position: absolute;
+ top: 6px;
+ margin-left: 6px;
+ margin-right: 6px;
+}
+
+.top-titlebar-text,
+.bottom-titlebar-text {
+ position: absolute;
+ left: 32px;
+ width: 80%;
+ margin-top: 6px;
+ margin-bottom: 6px;
+ font-style: Arial;
+ font-size: 11pt;
+ color: #ffffff;
+}
+
+.left-titlebar-text {
+ position: absolute;
+ bottom: 32px;
+ width: 100px;
+ margin-left: 6px;
+ margin-right: 6px;
+ font-style: Arial;
+ font-size: 12pt;
+ color: #ffffff;
+ -webkit-transform: rotate(-90deg) translate(0, 100%);
+ -webkit-transform-origin: 0% 100%;
+}
+
+.right-titlebar-text {
+ position: absolute;
+ top: 0px;
+ width: 100px;
+ margin-left: 6px;
+ margin-right: 6px;
+ font-style: Arial;
+ font-size: 12pt;
+ color: #ffffff;
+ -webkit-transform: rotate(90deg) translate(0, 100%);
+ -webkit-transform-origin: 0% 200%;
+}
+
+.top-titlebar-close-button,
+.bottom-titlebar-close-button {
+ position: absolute;
+ right: 11px;
+ width: 17px;
+ height: 17px;
+ margin-top: 6px;
+ margin-bottom: 6px;
+ -webkit-widget-region: region(control rectangle);
+}
+
+.left-titlebar-close-button {
+ position: absolute;
+ top: 11px;
+ width: 17px;
+ height: 17px;
+ margin-left: 6px;
+ margin-right: 6px;
+ -webkit-widget-region: region(control rectangle);
+}
+
+.right-titlebar-close-button {
+ position: absolute;
+ bottom: 11px;
+ width: 17px;
+ height: 17px;
+ margin-left: 6px;
+ margin-right: 6px;
+ -webkit-widget-region: region(control rectangle);
+}
+
+.top-titlebar-divider {
+ position: absolute;
+ left: 0px;
+ top: 31px;
+ width: 100%;
+ height: 1px;
+ background-color: #2a2c2c;
+}
+
+.bottom-titlebar-divider {
+ position: absolute;
+ left: 0px;
+ bottom: 31px;
+ width: 100%;
+ height: 1px;
+ background-color: #2a2c2c;
+}
+
+.left-titlebar-divider {
+ position: absolute;
+ left: 31px;
+ top: 0px;
+ width: 1px;
+ height: 100%;
+ background-color: #2a2c2c;
+}
+
+.right-titlebar-divider {
+ position: absolute;
+ right: 31px;
+ top: 0px;
+ width: 1px;
+ height: 100%;
+ background-color: #2a2c2c;
+}
View
121 frameless-window/titlebar.js
@@ -0,0 +1,121 @@
+function closeWindow() {
+ window.close();
+}
+
+function updateImageUrl(image_id, new_image_url) {
+ var image = document.getElementById(image_id);
+ if (image)
+ image.src = new_image_url;
+}
+
+function createImage(image_id, image_url) {
+ var image = document.createElement("img");
+ image.setAttribute("id", image_id);
+ image.src = image_url;
+ return image;
+}
+
+function createButton(button_id, button_name, normal_image_url,
+ hover_image_url, click_func) {
+ var button = document.createElement("div");
+ button.setAttribute("class", button_name);
+ var button_img = createImage(button_id, normal_image_url);
+ button.appendChild(button_img);
+ button.onmouseover = function() {
+ updateImageUrl(button_id, hover_image_url);
+ }
+ button.onmouseout = function() {
+ updateImageUrl(button_id, normal_image_url);
+ }
+ button.onclick = click_func;
+ return button;
+}
+
+function focusTitlebars(focus) {
+ var bg_color = focus ? "#3a3d3d" : "#7a7c7c";
+
+ var titlebar = document.getElementById("top-titlebar");
+ if (titlebar)
+ titlebar.style.backgroundColor = bg_color;
+ titlebar = document.getElementById("bottom-titlebar");
+ if (titlebar)
+ titlebar.style.backgroundColor = bg_color;
+ titlebar = document.getElementById("left-titlebar");
+ if (titlebar)
+ titlebar.style.backgroundColor = bg_color;
+ titlebar = document.getElementById("right-titlebar");
+ if (titlebar)
+ titlebar.style.backgroundColor = bg_color;
+}
+
+function addTitlebar(titlebar_name, titlebar_icon_url, titlebar_text) {
+ var titlebar = document.createElement("div");
+ titlebar.setAttribute("id", titlebar_name);
+ titlebar.setAttribute("class", titlebar_name);
+
+ var icon = document.createElement("div");
+ icon.setAttribute("class", titlebar_name + "-icon");
+ icon.appendChild(createImage(titlebar_name + "icon", titlebar_icon_url));
+ titlebar.appendChild(icon);
+
+ var title = document.createElement("div");
+ title.setAttribute("class", titlebar_name + "-text");
+ title.innerText = titlebar_text;
+ titlebar.appendChild(title);
+
+ var closeButton = createButton(titlebar_name + "-close-button",
+ titlebar_name + "-close-button",
+ "button_close.png",
+ "button_close_hover.png",
+ closeWindow);
+ titlebar.appendChild(closeButton);
+
+ var divider = document.createElement("div");
+ divider.setAttribute("class", titlebar_name + "-divider");
+ titlebar.appendChild(divider);
+
+ document.body.appendChild(titlebar);
+}
+
+function removeTitlebar(titlebar_name) {
+ var titlebar = document.getElementById(titlebar_name);
+ if (titlebar)
+ document.body.removeChild(titlebar);
+}
+
+function updateContentStyle() {
+ var content = document.getElementById("content");
+ if (!content)
+ return;
+
+ var left = 0;
+ var top = 0;
+ var width = window.outerWidth;
+ var height = window.outerHeight;
+
+ var titlebar = document.getElementById("top-titlebar");
+ if (titlebar) {
+ height -= titlebar.offsetHeight;
+ top += titlebar.offsetHeight;
+ }
+ titlebar = document.getElementById("bottom-titlebar");
+ if (titlebar) {
+ height -= titlebar.offsetHeight;
+ }
+ titlebar = document.getElementById("left-titlebar");
+ if (titlebar) {
+ width -= titlebar.offsetWidth;
+ left += titlebar.offsetWidth;
+ }
+ titlebar = document.getElementById("right-titlebar");
+ if (titlebar) {
+ width -= titlebar.offsetWidth;
+ }
+
+ var contentStyle = "position: absolute; -webkit-widget-region: region(control rectangle); ";
+ contentStyle += "left: " + left + "px; ";
+ contentStyle += "top: " + top + "px; ";
+ contentStyle += "width: " + width + "px; ";
+ contentStyle += "height: " + height + "px; ";
+ content.setAttribute("style", contentStyle);
+}
View
BIN  frameless-window/top-titlebar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.