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

[Alexandre Abreu]

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

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

[PS Jenkins bot (ps-jenkins)]

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]

206. By Alexandre Abreu on 2015-05-19

fix tests

[PS Jenkins bot (ps-jenkins)]

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)

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2015-03-04 21:21:52 +0000
+++ 0.1/ambiance/js/core.js	2015-05-19 17:32:11 +0000
@@ -71,6 +71,9 @@
         this._prevScrollTop = this._y = 0;
 
         this._header = document.querySelector('[data-role="header"]');
+        if ( ! this._header) {
+            return;
+        }
         this._content = document.querySelector('[data-role="content"]');
         this._headerHeight = this._header.offsetHeight + 17;
         this._content.style.paddingTop = this._headerHeight + "px";
@@ -133,11 +136,18 @@
                 this._pageStack.push(pages[0].getAttribute('id'));
             }
 
-            this._pageActions = d.createElement('div');
-            this._pageActions.setAttribute('data-role', 'actions');
+            this._pageActions = null;
 
             header.appendChild(this._tabTitle);
-            header.appendChild(this._pageActions);
+        },
+
+        __createPageActions: function() {
+            if ( ! this._pageActions) {
+                this._pageActions = document.createElement('div');
+                this._pageActions.setAttribute('data-role', 'actions');
+                var header = document.querySelector("[data-role='header']");
+                header.appendChild(this._pageActions);
+            }
         },
 
         __transformHeader: function(y) {
@@ -162,10 +172,10 @@
             var actionBar;
 
             var apptabsElements = document.querySelectorAll('[data-role=tab]');
-            if (apptabsElements.length >= 0) {
+            if (apptabsElements.length > 0) {
                 for (var idx = 0; idx < apptabsElements.length; ++idx) {
                     var footers = apptabsElements[idx].querySelectorAll("[data-role='footer']");
-                    if (footers.length >= 0) {
+                    if (footers.length > 0) {
                         // TODO: validate footer count: should be 1 footer
                         actionBar = this.__setupTabAction(footers[0], apptabsElements[idx]);
                         if (footers[0] != null) footers[0].remove();
@@ -174,10 +184,10 @@
             }
 
             var apppagesElements = document.querySelectorAll('[data-role=page]');
-            if (apppagesElements.length >= 0) {
+            if (apppagesElements.length > 0) {
                 for (var idx = 0; idx < apppagesElements.length; ++idx) {
                     var footers = apppagesElements[idx].querySelectorAll("[data-role='footer']");
-                    if (footers.length >= 0) {
+                    if (footers.length > 0) {
                         // TODO: validate footer count: should be 1 footer
                         actionBar = this.__setupPageAction(footers[0], apppagesElements[idx]);
                         if (footers[0] != null) footers[0].remove();
@@ -213,7 +223,11 @@
 
             this._overlay = document.querySelector('[data-role="overlay"]');
 
+            this.__createPageActions();
+
             var newActionsBar = document.querySelector('[data-role="actions"]');
+            if ( ! newActionsBar)
+                return;
 
             if (!this._oldFooter)
                 return;
@@ -239,20 +253,18 @@
                     firstId = firstAction.querySelector('a').getAttribute('id'),
                     k = 1;
 
-                if (this._tabs != 'undefined' && this._tabs) {
-                    if (this._tabs._tabsItems.length == 1) {
-                        k = 2;
-                        this._tabs._tabTitle.style.width = "calc(100% - 155px)";
+                if (this._tabs && this._tabs._tabsitems.length == 1) {
+                    k = 2;
+                    this._tabs._tabTitle.style.width = "calc(100% - 155px)";
 
-                        // Maintain the second item
-                        var secondAction = actionButtons[1],
-                            /* Action Button */
-                            secondButton = document.createElement('button'),
-                            /* Icon */
-                            secondIcon = secondAction.querySelector('img').getAttribute('src'),
-                            /* ID*/
-                            secondId = secondAction.querySelector('a').getAttribute('id');
-                    }
+                    // Maintain the second item
+                    var secondAction = actionButtons[1],
+                        /* Action Button */
+                        secondButton = document.createElement('button'),
+                        /* Icon */
+                        secondIcon = secondAction.querySelector('img').getAttribute('src'),
+                        /* ID*/
+                        secondId = secondAction.querySelector('a').getAttribute('id');
                 }
 
                 overflowList.setAttribute('data-role', 'actions-overflow-list');
@@ -286,7 +298,7 @@
 
                 newActionsBarWrapper.appendChild(firstButton);
                 if (this._tabs != 'undefined' && this._tabs) {
-                    if (this._tabs._tabsItems.length == 1) {
+                    if (this._tabs._tabsitems && this._tabs._tabsitems.length == 1) {
                         secondButton.setAttribute('id', secondId);
                         document.styleSheets[0].addRule('#' + secondId + ':after', 'background-image: url("' + secondIcon + '");');
                         newActionsBarWrapper.appendChild(secondButton);
@@ -325,7 +337,11 @@
             this._oldFooterParent = parent;
             this._overlay = document.querySelector('[data-role="overlay"]');
 
+            this.__createPageActions();
+            
             var newActionsBar = document.querySelector('[data-role="actions"]');
+            if (! newActionsBar)
+                return;
 
             if (!this._oldFooter)
                 return;
 
=== modified file '0.1/ambiance/js/tabs.js'
--- 0.1/ambiance/js/tabs.js	2015-03-03 23:30:16 +0000
+++ 0.1/ambiance/js/tabs.js	2015-05-19 17:32:11 +0000
@@ -188,9 +188,6 @@
             var tabtitle_value = document.createTextNode('Main');
             this._tabtitle.appendChild(tabtitle_value);
 
-            this._tabsactions = document.createElement('div');
-            this._tabsactions.setAttribute('data-role', 'actions');
-
             var tab = this._tabs.querySelector('[data-role="tabitem"]:first-child');
             /*tab.classList.remove('inactive');
             tab.classList.add('active');*/
@@ -208,7 +205,6 @@
                 };
             } else { this._tabtitle.style.marginLeft = '16px'; }
             this._header.appendChild(this._tabtitle);
-            this._header.appendChild(this._tabsactions);
 
             var self = this;
             this._overlay.onclick = function (e) {
@@ -315,8 +311,11 @@
         __toggleTabs: function () {
             this._tabs.classList.toggle('opened');
             this._overlay.classList.toggle('active');
-            if (this._tabsactions.querySelector('.opened') !== null)
-                this._tabsactions.querySelector('.opened').classList.remove('opened');
+
+            var tabsActions = document.querySelector('[data-role="actions"]');
+            if (tabsActions &&
+                tabsActions.querySelector('.opened') !== null)
+                tabsActions.querySelector('.opened').classList.remove('opened');
         },
 
         /**
@@ -325,8 +324,11 @@
         __hideMenus: function () {
             this._tabs.classList.remove('opened');
             this._overlay.classList.remove('active');
-            if (this._tabsactions.querySelector('.opened') !== null)
-                this._tabsactions.querySelector('.opened').classList.remove('opened');
+            
+            var tabsActions = document.querySelector('[data-role="actions"]');
+            if (tabsActions &&
+                tabsActions.querySelector('.opened') !== null)
+                tabsActions.querySelector('.opened').classList.remove('opened');
         }
     };
 
 
=== modified file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py'
--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py	2015-01-21 16:41:33 +0000
+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/__init__.py	2015-05-19 17:32:11 +0000
@@ -86,7 +86,8 @@
         '/usr/share/ubuntu-html5-ui-toolkit/tests/tools/qml/webview.qml'
     BROWSER_QML_APP_LAUNCHER = "/usr/lib/{}/qt5/bin/qmlscene".format(
         subprocess.check_output(
-            ["dpkg-architecture", "-qDEB_HOST_MULTIARCH"]).strip().decode('utf-8'))
+            ["dpkg-architecture",
+             "-qDEB_HOST_MULTIARCH"]).strip().decode('utf-8'))
 
     # TODO: fix version
     LOCAL_HTML_EXAMPLES_PATH = os.path.abspath(
 
=== added file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py'
--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py	1970-01-01 00:00:00 +0000
+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_page_actions.py	2015-05-19 17:32:11 +0000
@@ -0,0 +1,46 @@
+# -*- Mode: Python; coding: utf-8; indent-tabs-mode: nil; tab-width: 4 -*-
+# Copyright 2013 Canonical
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Lesser General Public License version 3, as
+# published by the Free Software Foundation.
+
+from __future__ import absolute_import
+
+from testtools.matchers import Equals, NotEquals
+from autopilot.matchers import Eventually
+
+from ubuntu_html5_ui_toolkit.tests import UbuntuHTML5TestCaseBase
+
+
+class UbuntuThemePageStackTestCase(UbuntuHTML5TestCaseBase):
+
+    def setUp(self):
+        super(UbuntuThemePageStackTestCase, self).setUp()
+
+    def test_tabWithActions(self):
+        self.browse_to_test_html('test-page-actions.html')
+        self.eval_expression_in_page_unsafe(
+            'var UI = new UbuntuUI(); UI.init();'),
+        self.assertThat(
+            self.eval_expression_in_page_unsafe(
+                'return document.querySelector\
+(\'[data-role="actions"]\') != null;'),
+            Equals('true'))
+        self.assertThat(
+            lambda: self.eval_expression_in_page_unsafe(
+                'return document.getElementById\
+("addfeed").parentNode.style.display;'),
+            Eventually(NotEquals('none')))
+
+    def test_noActions(self):
+        self.browse_to_test_html('test-nopagestack-in-app.html')
+        self.assertThat(
+            self.eval_expression_in_page_unsafe(
+                'var UI = new UbuntuUI(); UI.init(); return "ok";'),
+            Equals('ok'))
+        self.assertThat(
+            self.eval_expression_in_page_unsafe(
+                'return document.querySelector\
+(\'[data-role="actions"]\') != null;'),
+            Equals('false'))
 
=== modified file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py'
--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py	2014-11-19 18:36:44 +0000
+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py	2015-05-19 17:32:11 +0000
@@ -39,8 +39,5 @@
 
         self.assertThat(
             self.eval_expression_in_page_unsafe(
-                'var UI = new UbuntuUI(); '
-                'UI.init(); '
-                'return UI.tabs.selectedTabIndex;'),
-            Equals('1'))
-
+                'return document.getElementById("tab2").style.display;'),
+            Equals('block'))
 
=== modified file 'tests/data/html/apps/rss-reader/index.html'
--- tests/data/html/apps/rss-reader/index.html	2014-01-30 19:56:22 +0000
+++ tests/data/html/apps/rss-reader/index.html	2015-05-19 17:32:11 +0000
@@ -55,23 +55,20 @@
     <div data-role="mainview">
 
         <header data-role="header">
-            <ul data-role="tabs">
-                <li data-role="tabitem" data-page="main">RSS Mobile Reader</li>
-                <li data-role="tabitem" data-page="results">RSS Feed</li>
-                <li data-role="tabitem" data-page="article">Article</li>
-            </ul>
         </header>
 
         <div data-role="content">
-            <div data-role="pagestack">
-                <div data-role="page" id="main">
+          
+          <div data-role="pagestack">
+            
+                <div data-role="page" id="main" data-title="RSS Mobile Reader">
                     <section data-role="list" id="yourfeeds"></section>
                     <footer data-role="footer" class="revealed">
                         <nav>
                             <ul>
                                 <li>
                                     <a href="#" id="addfeed">
-                                        <img src="../../../ambiance/img/[e-mail]" alt="Tap me!" />
+                                        <img src="/usr/share/icons/suru/actions/scalable/note-new.svg" alt="Tap me!" />
                                         <span>Add feed</span>
                                     </a>
                                 </li>
@@ -80,11 +77,11 @@
                     </footer>
                 </div>
 
-                <div data-role="page" id="results">
+                <div data-role="page" id="results" data-title="Articles">
                     <section data-role="list" id="resultscontent"></section>
                 </div>
 
-                <div data-role="page" id="article">
+                <div data-role="page" id="article" data-title="Article">
                     <section id="articleinfo"></section>
                 </div>
             </div>
 
=== added file 'tests/data/html/test-page-actions.html'
--- tests/data/html/test-page-actions.html	1970-01-01 00:00:00 +0000
+++ tests/data/html/test-page-actions.html	2015-05-19 17:32:11 +0000
@@ -0,0 +1,117 @@
+<!--
+ Copyright (C) 2015 Canonical Ltd
+
+ This file is part of ubuntu-html5-ui-toolkit.
+
+ This package is free software; you can redistribute it and/or modify
+ it under the terms of the GNU Lesser General Public License as
+ published by the Free Software Foundation; either version 3 of the
+ License, or
+ (at your option) any later version.
+
+ This package is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with this program. If not, see
+ <http://www.gnu.org/licenses/>
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <title>Page Actions test</title>
+
+    <!-- Ubuntu UI Style imports - Ambiance theme -->
+    <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
+
+    <!-- Ubuntu UI javascript imports - Ambiance theme -->
+    <script src="../../../0.1/ambiance/js/fast-buttons.js"></script>
+    <script src="../../../0.1/ambiance/js/core.js"></script>
+    <script src="../../../0.1/ambiance/js/buttons.js"></script>
+    <script src="../../../0.1/ambiance/js/dialogs.js"></script>
+    <script src="../../../0.1/ambiance/js/popovers.js"></script>
+    <script src="../../../0.1/ambiance/js/list.js"></script>
+    <script src="../../../0.1/ambiance/js/tab.js"></script>
+    <script src="../../../0.1/ambiance/js/tabs.js"></script>
+</head>
+
+<body>
+    <div data-role="mainview">
+
+        <header data-role="header">
+            <ul data-role="tabs">
+                <li data-role="tabitem" data-page="tab1">Tab 1</li>
+                <li data-role="tabitem" data-page="tab2">Tab 2</li>
+            </ul>
+        </header>
+
+        <div data-role="content">
+
+          <div data-role="tab" id="tab1">
+            <div>tab1 content</div>
+            
+              <footer id="footer1" data-role="footer" class="revealed">
+                <nav>
+                  <ul>
+                    <li>
+                      <a href="#" id="addfeed">
+                        <img src="/usr/share/icons/suru/actions/scalable/note-new.svg" alt="Tap me!" />
+                        <span>Add feed</span>
+                      </a>
+                    </li>
+                  </ul>
+                </nav>
+              </footer>
+            </div>
+
+            <div data-role="tab" id="tab2">
+                <div>tab2 content</div>
+                
+                <footer id="footer2" data-role="footer" class="revealed">
+                  <nav>
+                    <ul>
+                      <li>
+                        <a href="#" id="new-email">
+                          <img src="/usr/share/icons/suru/actions/scalable/notebook-new.svg" alt="Tap me!" />
+                          <span>New Email</span>
+                        </a>
+                      </li>
+                      
+                      <li>
+                        <a href="#" id="edit-note">
+                          <img src="/usr/share/icons/suru/actions/scalable/edit-paste.svg" alt="Tap me!" />
+                          <span>Edit Note</span>
+                        </a>
+                      </li>
+                      
+                      <li>
+                        <a href="#" id="infos">
+                          <img src="/usr/share/icons/suru/actions/scalable/info.svg" alt="Tap me!" />
+                          <span>Infos</span>
+                        </a>
+                      </li>
+                      
+                      <li>
+                        <a href="#" id="private-browsing">
+                          <img src="/usr/share/icons/suru/actions/scalable/private-browsing.svg" alt="Tap me!" />
+                          <span>Private Browsing</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </nav>
+                </footer>
+            </div>
+    </div>
+
+    <script>
+      
+    </script>
+
+</body>
+</html>