Ubuntu HTML5 UI SDK

Merge lp:~abreu-alexandre/ubuntu-html5-theme/fix-page-actions into lp:ubuntu-html5-theme

  1. fix-page-actions
  2. Merge into trunk
Proposed by Alexandre Abreu
Status: Merged
Approved by: Alexandre Abreu
Approved revision: 206
Merged at revision: 208
Proposed branch: lp:~abreu-alexandre/ubuntu-html5-theme/fix-page-actions
Merge into: lp:ubuntu-html5-theme
Diff against target: 425 lines (+221/-45)
7 files modified
0.1/ambiance/js/core.js (+37/-21)
0.1/ambiance/js/tabs.js (+10/-8)
tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py (+2/-1)
tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py (+46/-0)
tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py (+2/-5)
tests/data/html/apps/rss-reader/index.html (+7/-10)
tests/data/html/test-page-actions.html (+117/-0)
To merge this branch: bzr merge lp:~abreu-alexandre/ubuntu-html5-theme/fix-page-actions
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Needs Fixing
Ubuntu HTML5 Theme Developers Pending
Review via email: mp+259515@code.launchpad.net

Commit message

Fix page actions; no need to create actions when none is defined

Description of the change

Fix page actions; no need to create actions when none is defined

To post a comment you must log in.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:205
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/182/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-wily/5/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-wily-amd64-ci/1
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-wily-armhf-ci/1
    FAILURE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-wily/5/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-wily-amd64/6
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-wily-amd64/6/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/182/rebuild

review: Needs Fixing (continuous-integration)
lp:~abreu-alexandre/ubuntu-html5-theme/fix-page-actions updated
206. By Alexandre Abreu

fix tests

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Continuous integration, rev:206
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/183/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-wily/6/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-wily-amd64-ci/2
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-wily-armhf-ci/2
    FAILURE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-wily/6/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-wily-amd64/7
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-wily-amd64/7/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/183/rebuild

review: Needs Fixing (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file '0.1/ambiance/js/core.js'
2--- 0.1/ambiance/js/core.js 2015-03-04 21:21:52 +0000
3+++ 0.1/ambiance/js/core.js 2015-05-19 17:32:11 +0000
4@@ -71,6 +71,9 @@
5 this._prevScrollTop = this._y = 0;
6
7 this._header = document.querySelector('[data-role="header"]');
8+ if ( ! this._header) {
9+ return;
10+ }
11 this._content = document.querySelector('[data-role="content"]');
12 this._headerHeight = this._header.offsetHeight + 17;
13 this._content.style.paddingTop = this._headerHeight + "px";
14@@ -133,11 +136,18 @@
15 this._pageStack.push(pages[0].getAttribute('id'));
16 }
17
18- this._pageActions = d.createElement('div');
19- this._pageActions.setAttribute('data-role', 'actions');
20+ this._pageActions = null;
21
22 header.appendChild(this._tabTitle);
23- header.appendChild(this._pageActions);
24+ },
25+
26+ __createPageActions: function() {
27+ if ( ! this._pageActions) {
28+ this._pageActions = document.createElement('div');
29+ this._pageActions.setAttribute('data-role', 'actions');
30+ var header = document.querySelector("[data-role='header']");
31+ header.appendChild(this._pageActions);
32+ }
33 },
34
35 __transformHeader: function(y) {
36@@ -162,10 +172,10 @@
37 var actionBar;
38
39 var apptabsElements = document.querySelectorAll('[data-role=tab]');
40- if (apptabsElements.length >= 0) {
41+ if (apptabsElements.length > 0) {
42 for (var idx = 0; idx < apptabsElements.length; ++idx) {
43 var footers = apptabsElements[idx].querySelectorAll("[data-role='footer']");
44- if (footers.length >= 0) {
45+ if (footers.length > 0) {
46 // TODO: validate footer count: should be 1 footer
47 actionBar = this.__setupTabAction(footers[0], apptabsElements[idx]);
48 if (footers[0] != null) footers[0].remove();
49@@ -174,10 +184,10 @@
50 }
51
52 var apppagesElements = document.querySelectorAll('[data-role=page]');
53- if (apppagesElements.length >= 0) {
54+ if (apppagesElements.length > 0) {
55 for (var idx = 0; idx < apppagesElements.length; ++idx) {
56 var footers = apppagesElements[idx].querySelectorAll("[data-role='footer']");
57- if (footers.length >= 0) {
58+ if (footers.length > 0) {
59 // TODO: validate footer count: should be 1 footer
60 actionBar = this.__setupPageAction(footers[0], apppagesElements[idx]);
61 if (footers[0] != null) footers[0].remove();
62@@ -213,7 +223,11 @@
63
64 this._overlay = document.querySelector('[data-role="overlay"]');
65
66+ this.__createPageActions();
67+
68 var newActionsBar = document.querySelector('[data-role="actions"]');
69+ if ( ! newActionsBar)
70+ return;
71
72 if (!this._oldFooter)
73 return;
74@@ -239,20 +253,18 @@
75 firstId = firstAction.querySelector('a').getAttribute('id'),
76 k = 1;
77
78- if (this._tabs != 'undefined' && this._tabs) {
79- if (this._tabs._tabsItems.length == 1) {
80- k = 2;
81- this._tabs._tabTitle.style.width = "calc(100% - 155px)";
82+ if (this._tabs && this._tabs._tabsitems.length == 1) {
83+ k = 2;
84+ this._tabs._tabTitle.style.width = "calc(100% - 155px)";
85
86- // Maintain the second item
87- var secondAction = actionButtons[1],
88- /* Action Button */
89- secondButton = document.createElement('button'),
90- /* Icon */
91- secondIcon = secondAction.querySelector('img').getAttribute('src'),
92- /* ID*/
93- secondId = secondAction.querySelector('a').getAttribute('id');
94- }
95+ // Maintain the second item
96+ var secondAction = actionButtons[1],
97+ /* Action Button */
98+ secondButton = document.createElement('button'),
99+ /* Icon */
100+ secondIcon = secondAction.querySelector('img').getAttribute('src'),
101+ /* ID*/
102+ secondId = secondAction.querySelector('a').getAttribute('id');
103 }
104
105 overflowList.setAttribute('data-role', 'actions-overflow-list');
106@@ -286,7 +298,7 @@
107
108 newActionsBarWrapper.appendChild(firstButton);
109 if (this._tabs != 'undefined' && this._tabs) {
110- if (this._tabs._tabsItems.length == 1) {
111+ if (this._tabs._tabsitems && this._tabs._tabsitems.length == 1) {
112 secondButton.setAttribute('id', secondId);
113 document.styleSheets[0].addRule('#' + secondId + ':after', 'background-image: url("' + secondIcon + '");');
114 newActionsBarWrapper.appendChild(secondButton);
115@@ -325,7 +337,11 @@
116 this._oldFooterParent = parent;
117 this._overlay = document.querySelector('[data-role="overlay"]');
118
119+ this.__createPageActions();
120+
121 var newActionsBar = document.querySelector('[data-role="actions"]');
122+ if (! newActionsBar)
123+ return;
124
125 if (!this._oldFooter)
126 return;
127
128=== modified file '0.1/ambiance/js/tabs.js'
129--- 0.1/ambiance/js/tabs.js 2015-03-03 23:30:16 +0000
130+++ 0.1/ambiance/js/tabs.js 2015-05-19 17:32:11 +0000
131@@ -188,9 +188,6 @@
132 var tabtitle_value = document.createTextNode('Main');
133 this._tabtitle.appendChild(tabtitle_value);
134
135- this._tabsactions = document.createElement('div');
136- this._tabsactions.setAttribute('data-role', 'actions');
137-
138 var tab = this._tabs.querySelector('[data-role="tabitem"]:first-child');
139 /*tab.classList.remove('inactive');
140 tab.classList.add('active');*/
141@@ -208,7 +205,6 @@
142 };
143 } else { this._tabtitle.style.marginLeft = '16px'; }
144 this._header.appendChild(this._tabtitle);
145- this._header.appendChild(this._tabsactions);
146
147 var self = this;
148 this._overlay.onclick = function (e) {
149@@ -315,8 +311,11 @@
150 __toggleTabs: function () {
151 this._tabs.classList.toggle('opened');
152 this._overlay.classList.toggle('active');
153- if (this._tabsactions.querySelector('.opened') !== null)
154- this._tabsactions.querySelector('.opened').classList.remove('opened');
155+
156+ var tabsActions = document.querySelector('[data-role="actions"]');
157+ if (tabsActions &&
158+ tabsActions.querySelector('.opened') !== null)
159+ tabsActions.querySelector('.opened').classList.remove('opened');
160 },
161
162 /**
163@@ -325,8 +324,11 @@
164 __hideMenus: function () {
165 this._tabs.classList.remove('opened');
166 this._overlay.classList.remove('active');
167- if (this._tabsactions.querySelector('.opened') !== null)
168- this._tabsactions.querySelector('.opened').classList.remove('opened');
169+
170+ var tabsActions = document.querySelector('[data-role="actions"]');
171+ if (tabsActions &&
172+ tabsActions.querySelector('.opened') !== null)
173+ tabsActions.querySelector('.opened').classList.remove('opened');
174 }
175 };
176
177
178=== modified file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py'
179--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py 2015-01-21 16:41:33 +0000
180+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py 2015-05-19 17:32:11 +0000
181@@ -86,7 +86,8 @@
182 '/usr/share/ubuntu-html5-ui-toolkit/tests/tools/qml/webview.qml'
183 BROWSER_QML_APP_LAUNCHER = "/usr/lib/{}/qt5/bin/qmlscene".format(
184 subprocess.check_output(
185- ["dpkg-architecture", "-qDEB_HOST_MULTIARCH"]).strip().decode('utf-8'))
186+ ["dpkg-architecture",
187+ "-qDEB_HOST_MULTIARCH"]).strip().decode('utf-8'))
188
189 # TODO: fix version
190 LOCAL_HTML_EXAMPLES_PATH = os.path.abspath(
191
192=== added file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py'
193--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py 1970-01-01 00:00:00 +0000
194+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py 2015-05-19 17:32:11 +0000
195@@ -0,0 +1,46 @@
196+# -*- Mode: Python; coding: utf-8; indent-tabs-mode: nil; tab-width: 4 -*-
197+# Copyright 2013 Canonical
198+#
199+# This program is free software: you can redistribute it and/or modify it
200+# under the terms of the GNU Lesser General Public License version 3, as
201+# published by the Free Software Foundation.
202+
203+from __future__ import absolute_import
204+
205+from testtools.matchers import Equals, NotEquals
206+from autopilot.matchers import Eventually
207+
208+from ubuntu_html5_ui_toolkit.tests import UbuntuHTML5TestCaseBase
209+
210+
211+class UbuntuThemePageStackTestCase(UbuntuHTML5TestCaseBase):
212+
213+ def setUp(self):
214+ super(UbuntuThemePageStackTestCase, self).setUp()
215+
216+ def test_tabWithActions(self):
217+ self.browse_to_test_html('test-page-actions.html')
218+ self.eval_expression_in_page_unsafe(
219+ 'var UI = new UbuntuUI(); UI.init();'),
220+ self.assertThat(
221+ self.eval_expression_in_page_unsafe(
222+ 'return document.querySelector\
223+(\'[data-role="actions"]\') != null;'),
224+ Equals('true'))
225+ self.assertThat(
226+ lambda: self.eval_expression_in_page_unsafe(
227+ 'return document.getElementById\
228+("addfeed").parentNode.style.display;'),
229+ Eventually(NotEquals('none')))
230+
231+ def test_noActions(self):
232+ self.browse_to_test_html('test-nopagestack-in-app.html')
233+ self.assertThat(
234+ self.eval_expression_in_page_unsafe(
235+ 'var UI = new UbuntuUI(); UI.init(); return "ok";'),
236+ Equals('ok'))
237+ self.assertThat(
238+ self.eval_expression_in_page_unsafe(
239+ 'return document.querySelector\
240+(\'[data-role="actions"]\') != null;'),
241+ Equals('false'))
242
243=== modified file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py'
244--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py 2014-11-19 18:36:44 +0000
245+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py 2015-05-19 17:32:11 +0000
246@@ -39,8 +39,5 @@
247
248 self.assertThat(
249 self.eval_expression_in_page_unsafe(
250- 'var UI = new UbuntuUI(); '
251- 'UI.init(); '
252- 'return UI.tabs.selectedTabIndex;'),
253- Equals('1'))
254-
255+ 'return document.getElementById("tab2").style.display;'),
256+ Equals('block'))
257
258=== modified file 'tests/data/html/apps/rss-reader/index.html'
259--- tests/data/html/apps/rss-reader/index.html 2014-01-30 19:56:22 +0000
260+++ tests/data/html/apps/rss-reader/index.html 2015-05-19 17:32:11 +0000
261@@ -55,23 +55,20 @@
262 <div data-role="mainview">
263
264 <header data-role="header">
265- <ul data-role="tabs">
266- <li data-role="tabitem" data-page="main">RSS Mobile Reader</li>
267- <li data-role="tabitem" data-page="results">RSS Feed</li>
268- <li data-role="tabitem" data-page="article">Article</li>
269- </ul>
270 </header>
271
272 <div data-role="content">
273- <div data-role="pagestack">
274- <div data-role="page" id="main">
275+
276+ <div data-role="pagestack">
277+
278+ <div data-role="page" id="main" data-title="RSS Mobile Reader">
279 <section data-role="list" id="yourfeeds"></section>
280 <footer data-role="footer" class="revealed">
281 <nav>
282 <ul>
283 <li>
284 <a href="#" id="addfeed">
285- <img src="../../../ambiance/img/back@18.png" alt="Tap me!" />
286+ <img src="/usr/share/icons/suru/actions/scalable/note-new.svg" alt="Tap me!" />
287 <span>Add feed</span>
288 </a>
289 </li>
290@@ -80,11 +77,11 @@
291 </footer>
292 </div>
293
294- <div data-role="page" id="results">
295+ <div data-role="page" id="results" data-title="Articles">
296 <section data-role="list" id="resultscontent"></section>
297 </div>
298
299- <div data-role="page" id="article">
300+ <div data-role="page" id="article" data-title="Article">
301 <section id="articleinfo"></section>
302 </div>
303 </div>
304
305=== added file 'tests/data/html/test-page-actions.html'
306--- tests/data/html/test-page-actions.html 1970-01-01 00:00:00 +0000
307+++ tests/data/html/test-page-actions.html 2015-05-19 17:32:11 +0000
308@@ -0,0 +1,117 @@
309+<!--
310+ Copyright (C) 2015 Canonical Ltd
311+
312+ This file is part of ubuntu-html5-ui-toolkit.
313+
314+ This package is free software; you can redistribute it and/or modify
315+ it under the terms of the GNU Lesser General Public License as
316+ published by the Free Software Foundation; either version 3 of the
317+ License, or
318+ (at your option) any later version.
319+
320+ This package is distributed in the hope that it will be useful,
321+ but WITHOUT ANY WARRANTY; without even the implied warranty of
322+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
323+ GNU General Public License for more details.
324+
325+ You should have received a copy of the GNU Lesser General Public
326+ License along with this program. If not, see
327+ <http://www.gnu.org/licenses/>
328+-->
329+
330+<!DOCTYPE html>
331+<html>
332+<head>
333+ <meta charset="utf-8" />
334+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
335+
336+ <title>Page Actions test</title>
337+
338+ <!-- Ubuntu UI Style imports - Ambiance theme -->
339+ <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
340+
341+ <!-- Ubuntu UI javascript imports - Ambiance theme -->
342+ <script src="../../../0.1/ambiance/js/fast-buttons.js"></script>
343+ <script src="../../../0.1/ambiance/js/core.js"></script>
344+ <script src="../../../0.1/ambiance/js/buttons.js"></script>
345+ <script src="../../../0.1/ambiance/js/dialogs.js"></script>
346+ <script src="../../../0.1/ambiance/js/popovers.js"></script>
347+ <script src="../../../0.1/ambiance/js/list.js"></script>
348+ <script src="../../../0.1/ambiance/js/tab.js"></script>
349+ <script src="../../../0.1/ambiance/js/tabs.js"></script>
350+</head>
351+
352+<body>
353+ <div data-role="mainview">
354+
355+ <header data-role="header">
356+ <ul data-role="tabs">
357+ <li data-role="tabitem" data-page="tab1">Tab 1</li>
358+ <li data-role="tabitem" data-page="tab2">Tab 2</li>
359+ </ul>
360+ </header>
361+
362+ <div data-role="content">
363+
364+ <div data-role="tab" id="tab1">
365+ <div>tab1 content</div>
366+
367+ <footer id="footer1" data-role="footer" class="revealed">
368+ <nav>
369+ <ul>
370+ <li>
371+ <a href="#" id="addfeed">
372+ <img src="/usr/share/icons/suru/actions/scalable/note-new.svg" alt="Tap me!" />
373+ <span>Add feed</span>
374+ </a>
375+ </li>
376+ </ul>
377+ </nav>
378+ </footer>
379+ </div>
380+
381+ <div data-role="tab" id="tab2">
382+ <div>tab2 content</div>
383+
384+ <footer id="footer2" data-role="footer" class="revealed">
385+ <nav>
386+ <ul>
387+ <li>
388+ <a href="#" id="new-email">
389+ <img src="/usr/share/icons/suru/actions/scalable/notebook-new.svg" alt="Tap me!" />
390+ <span>New Email</span>
391+ </a>
392+ </li>
393+
394+ <li>
395+ <a href="#" id="edit-note">
396+ <img src="/usr/share/icons/suru/actions/scalable/edit-paste.svg" alt="Tap me!" />
397+ <span>Edit Note</span>
398+ </a>
399+ </li>
400+
401+ <li>
402+ <a href="#" id="infos">
403+ <img src="/usr/share/icons/suru/actions/scalable/info.svg" alt="Tap me!" />
404+ <span>Infos</span>
405+ </a>
406+ </li>
407+
408+ <li>
409+ <a href="#" id="private-browsing">
410+ <img src="/usr/share/icons/suru/actions/scalable/private-browsing.svg" alt="Tap me!" />
411+ <span>Private Browsing</span>
412+ </a>
413+ </li>
414+ </ul>
415+ </nav>
416+ </footer>
417+ </div>
418+ </div>
419+
420+ <script>
421+
422+ </script>
423+
424+</body>
425+</html>

Subscribers

People subscribed via source and target branches