Skip to content

GitLab

T
tangled
Commit 3d458921 authored by dimich@chromium.org's avatar dimich@chromium.org
Browse files
Options

Refactor Notifications Galore to simplify, amke more hackable and add 'recording'. 

BUG=
R=dewittj@chromium.org

Review URL: https://codereview.chromium.org/315053006

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@276736 0039d316-1c4b-4281-b951-d872f2087c98
parent bb635de2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 561 additions and 1713 deletions
chrome/test/data/extensions/api_test/notifications/galore/app/data/28.0.1500.70.json → chrome/test/data/extensions/api_test/notifications/galore/app/data/data.json
View file @ 3d458921
[ [
{ {
"copyright": [ "sectionName": "Web Notifications",
"Copyright (c) 2013 The Chromium Authors. All rights reserved.", "notificationType": "web",
"Use of this source code is governed by a BSD-style license that can be",
"found in the LICENSE file."
],
"api": "notifications",
"events": [
"onDisplayed",
"onClosed",
"onClicked",
"onButtonClicked"
],
"globals": {
"type": "$?",
"priority": "$!"
}
},
{
"sectionName": "WebKit Notifications",
"notificationType": "webkit",
"notificationOptions": [ "notificationOptions": [
{ {
"iconUrl": "/images/man1-40x40.jpg", "iconUrl": "/images/man1-40x40.jpg",
......
chrome/test/data/extensions/api_test/notifications/galore/app/main.js
View file @ 3d458921
...@@ -2,9 +2,5 @@ ...@@ -2,9 +2,5 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
(function() { chrome.app.runtime.onLaunched.addListener(createWindow);
var controller = Galore.controller.create(); chrome.app.runtime.onRestarted.addListener(createWindow);
var listener = controller.createWindow.bind(controller);
chrome.app.runtime.onLaunched.addListener(listener);
chrome.app.runtime.onRestarted.addListener(listener);
}());
chrome/test/data/extensions/api_test/notifications/galore/app/style.css
View file @ 3d458921
...@@ -3,18 +3,27 @@ ...@@ -3,18 +3,27 @@
* found in the LICENSE file. */ * found in the LICENSE file. */
/* Globals ********************************************************************/ /* Globals ********************************************************************/
html {
height: 100%
}
body { body {
-webkit-app-region: drag;
cursor: default; cursor: default;
margin: 0; margin: 0px;
padding: 15px 4px 4px; padding: 0px 4px 4px;
overflow:hidden;
height: 100%;
} }
.section { .section {
margin: 12px 0 0; overflow:hidden;
position: relative; margin:14px 0 12px 0;
padding: 23px 0 0; }
.subsection {
margin:2px;
padding:3px;
border:1px solid lightgrey;
} }
h1 { h1 {
...@@ -24,12 +33,8 @@ h1 { ...@@ -24,12 +33,8 @@ h1 {
white 65%, white); white 65%, white);
font: normal 16px 'Arimo', 'Gill Sans', 'Open Sans', font: normal 16px 'Arimo', 'Gill Sans', 'Open Sans',
'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
left: 0; margin: 0 0 8px 0;
margin: 0;
position: absolute;
right: 0;
text-align: center; text-align: center;
top: 0;
} }
h1 span { h1 span {
...@@ -37,32 +42,32 @@ h1 span { ...@@ -37,32 +42,32 @@ h1 span {
padding: 0 4px; padding: 0 4px;
} }
button { button.borderless {
background: none; background-color: white;
border: 1px solid white; border:1px solid rgba(0,0,0,0.1);
margin: 0; margin: 3px;
padding: 3px; padding: 3px;
} }
::-webkit-scrollbar { button.borderless:hover {
display: none !important; border:1px solid rgba(0,0,0,1);
}
button.borderless:hover[disabled] {
border:1px solid rgba(0,0,0,0.1);
} }
/* Template section (invisible) ***********************************************/ /* Template section (invisible) ***********************************************/
#templates { #templates {
position: absolute; display: none;
visibility: hidden;
} }
/* Priority section ***********************************************************/ /* Priority section ***********************************************************/
#priority { #priority {
font-size: 0; /* To collapse the spaces between buttons. */ font-size: 0; /* To collapse the spaces between buttons. */
} text-align: center;
#priority .priority:first-of-type {
margin: 0 0 0 96px; /* Leftmost button is 96 pixels in. */
} }
button.priority { button.priority {
...@@ -72,14 +77,30 @@ button.priority { ...@@ -72,14 +77,30 @@ button.priority {
width: 48px; width: 48px;
} }
/* Notification sections ******************************************************/ /* Recorder *******************************************************************/
#recording-status {
font-size:18pt;
text-align: center;
}
button.notification { #recording-stats {
height: 48px; font-size:9pt;
width: 48px; text-align: center;
}
button.control img {
display: block;
margin: 0;
padding: 0;
}
button.control[disabled="true"] {
opacity: 0.2;
} }
img { /* Notification sections ******************************************************/
button.notification img {
display: block; display: block;
height: 40px; height: 40px;
margin: 0; margin: 0;
...@@ -90,32 +111,13 @@ img { ...@@ -90,32 +111,13 @@ img {
/* Events section *************************************************************/ /* Events section *************************************************************/
#events { #events {
position: relative; margin:0;
height: 183px;
}
#events-scroll {
bottom: 4px;
font-weight: lighter; font-weight: lighter;
left: 4px;
padding: 0; padding: 0;
max-height: 190px; height:180px;
overflow: scroll; overflow-y: auto;
position: absolute; overflow-x: hidden;
right: 4px; background-color: gold;
-webkit-user-select: text;
}
#events-fade {
background: -webkit-linear-gradient(rgba(255, 255, 255, 1),
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0));
height: 46px;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
} }
.event { .event {
...@@ -131,116 +133,7 @@ img { ...@@ -131,116 +133,7 @@ img {
text-align: center; text-align: center;
} }
/* Menu ***********************************************************************/
body[data-active="menu"] #popup,
body[data-popup="true"] #popup {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
body:not([data-active="menu"]):not([data-popup="true"]) #popup {
left: -9999px !important;
position: absolute !important;
top: -9999px !important;
}
#shadow {
background: gray;
bottom: 0;
left: 0;
opacity: 0.33;
position: absolute;
right: 0;
top: 0;
}
#menu {
left: 12px;
padding: 0;
position: absolute;
top: 26px;
width: auto;
}
#menu-items {
background: white;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.7);
margin: 7px 0 0;
padding: 4px;
}
#menu-items button {
display: block;
text-align: left;
width: 100%;
}
#show-settings {
/* TODO(dharcourt): Add a settings panel and make this open it. */
display: none !important;
}
#arrow {
border-bottom: 7px solid white;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
position: absolute;
top: 0;
width: 0;
}
/* Menu and close buttons *****************************************************/
#show-menu,
#close {
border: 1px solid transparent;
height: 16px;
opacity: 0.15;
position: absolute;
top: 11px;
width: 16px;
}
#show-menu {
background: url("/images/menu-14x14.png");
left: 11px;
}
#close {
background: url("/images/close-14x14.png");
right: 11px;
}
#show-menu:hover,
#close:hover {
opacity: 0.6;
}
body[data-active="close"] #close,
body[data-active="menu"] #show-menu {
opacity: 1;
}
/* Highlighting ***************************************************************/ /* Highlighting ***************************************************************/
body[data-active=""] button[data-hover="true"],
body[data-active="close"] button.close[data-hover="true"],
body[data-active="menu"] button.menu[data-hover="true"],
body[data-active="notification"] button.notification[data-hover="true"],
body[data-active="priority"] button.priority[data-hover="true"] {
border: 1px solid black !important;
}
body[data-active="notification"] button.notification[data-hover="true"],
body[data-active="priority"] button.priority[data-hover="true"] {
opacity: 0.5;
}
body[data-priority="-2"] button.priority[data-priority="-2"], body[data-priority="-2"] button.priority[data-priority="-2"],
body[data-priority="-1"] button.priority[data-priority="-1"], body[data-priority="-1"] button.priority[data-priority="-1"],
body[data-priority="0"] button.priority[data-priority="0"], body[data-priority="0"] button.priority[data-priority="0"],
...@@ -249,20 +142,3 @@ body[data-priority="2"] button.priority[data-priority="2"] { ...@@ -249,20 +142,3 @@ body[data-priority="2"] button.priority[data-priority="2"] {
background: rgb(255, 255, 85); background: rgb(255, 255, 85);
-webkit-box-shadow: inset 3px 3px 0 white, inset -3px -3px 0 white; -webkit-box-shadow: inset 3px 3px 0 white, inset -3px -3px 0 white;
} }
/* Cursor and dragging control ************************************************/
body:not([data-active=""]),
body:not([data-active="menu"]):not([data-popup="true"]) button,
button.menu,
button.close {
-webkit-app-region: no-drag;
cursor: pointer;
}
body:not([data-active="menu"]):not([data-popup="true") #events {
-webkit-app-region: no-drag;
cursor: text;
}
/* That's all folks! **********************************************************/
chrome/test/data/extensions/api_test/notifications/galore/app/window.html
View file @ 3d458921
...@@ -7,41 +7,40 @@ ...@@ -7,41 +7,40 @@
<title>Notifications Galore!</title> <title>Notifications Galore!</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
</head> </head>
<body data-active="" data-popup="false"> <body data-active="">
<div id="templates"> <div id="templates">
<div class="section"><h1><span/></h1></div> <div class="section"><h1><span/></h1></div>
<div class="event"></div> <div class="event"></div>
<div class="error"></div> <div class="error"></div>
<div class="spacer"></div> <div class="spacer"></div>
<button class="notification"> <button class="notification borderless">
<img src="images/white-40x40.png"> <img src="images/white-40x40.png">
</button> </button>
</div> </div>
<div id="priority" class="section"> <div id="priority" class="section">
<h1><span>Priority</span></h1> <h1><span>Priority</span></h1>
<button class="priority" data-priority="-2">-2</button> <button class="priority borderless" data-priority="-2">-2</button>
<button class="priority" data-priority="-1">-1</button> <button class="priority borderless" data-priority="-1">-1</button>
<button class="priority" data-priority="0">0</button> <button class="priority borderless" data-priority="0">0</button>
<button class="priority" data-priority="1">1</button> <button class="priority borderless" data-priority="1">1</button>
<button class="priority" data-priority="2">2</button> <button class="priority borderless" data-priority="2">2</button>
</div> </div>
<div id="notifications"></div> <div id="other-controls" xclass="section">
<div id="events" class="section"> <h1><span>Controls</span></h1>
<div id="events-scroll"></div> <div class="subsection">
<div id="events-fade"></div> <button id="clear-events">Clear Events</button>
<h1><span>Events</span></h1> </div>
</div> <div class="subsection">
<div id="popup"> <button id="record" class="control borderless"><img src="images/record.png"></img></button>
<div id="shadow" class="shadow"></div> <button id="pause" class="control borderless"><img src="images/pause.png"></img></button>
<div id="menu"> <button id="stop" class="control borderless"><img src="images/stop.png"></img></button>
<div id="menu-items"> <button id="play" class="control borderless"><img src="images/play.png"></img></button>
<button id="show-settings" class="menu">Settings...</button> <sup id="recording-status">Stopped</sup>
<button id="clear-events" class="menu">Clear Events</button> <div id="recording-stats"> </div>
</div>
<div id="arrow"></div>
</div> </div>
</div> </div>
<button id="close" class="close" name="Close"></button> <div id="notifications"></div>
<button id="show-menu" class="menu" name="Show Menu"></button> <h1><span>Events</span></h1>
<div id="events" class="section"></div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment