Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Revert "Merge pull request #16263 from yzen/969553"
Browse files Browse the repository at this point in the history 
This reverts commit e1c443d, reversing
changes made to e328318.
  • Loading branch information
@rvandermeulen
rvandermeulen committed Mar 26, 2014
1 parent 71153c4 commit ff5d799
Show file tree
Hide file tree
Showing 57 changed files with 448 additions and 636 deletions.
41 changes: 17 additions & 24 deletions apps/browser/index.html
View file
Expand Up @@ -26,7 +26,6 @@
<!-- Shared code -->
<script defer src="shared/js/l10n.js"></script>
<script defer src="shared/js/lazy_loader.js"></script>
<script defer src="shared/js/accessibility_helper.js"></script>
<script defer src="shared/js/mime_mapper.js"></script>
<script defer src="shared/js/simple_operator_variant_helper.js"></script>
<script defer src="shared/js/utilities.js"></script>
Expand Down Expand Up @@ -80,33 +79,27 @@ <h2 data-l10n-id="top-sites-startPage">Top Sites</h2>
<div id="awesomescreen">
<!--
<nav data-role="tabs" id="tab-headers">
<ul role="tablist" class="bb-tablist">
<li role="presentation">
<ul role="tablist">
<li role="tab">
<a id="top-sites-tab" href="#" class="selected"
data-l10n-id="top-sites-tab" role="tab"
aria-selected="true" aria-controls="top-sites">Top Sites</a>
data-l10n-id="top-sites-tab">Top Sites</a>
</li>
<li role="presentation">
<li role="tab">
<a id="bookmarks-tab" href="#"
data-l10n-id="bookmarks" role="tab"
aria-selected="false" aria-controls="bookmarks">Bookmarks</a>
data-l10n-id="bookmarks">Bookmarks</a>
</li>
<li role="presentation">
<li role="tab">
<a id="history-tab" href="#"
data-l10n-id="history" role="tab"
aria-selected="false" aria-controls="history">History</a>
data-l10n-id="history">History</a>
</li>
</ul>
</nav>
<div id="tab-panels">
<section id="top-sites" role="tabpanel" class="bb-tabpanel selected"
aria-labelledby="top-sites-tab">
<section id="top-sites" role="tabpanel" class="selected">
</section>
<section id="bookmarks" role="tabpanel" class="bb-tabpanel"
aria-labelledby="bookmarks-tab">
<section id="bookmarks" role="tabpanel">
</section>
<section id="history" role="tabpanel" class="bb-tabpanel"
aria-labelledby="history-tab">
<section id="history" role="tabpanel">
</section>
</div>
<section id="results" class="hidden">
Expand All @@ -133,18 +126,18 @@ <h3 data-l10n-id="this-is-embarrassing">Well, this is embarrassing.</h3>
</div>
</div>

<ul id="toolbar-end" class="bb-tablist skin-dark">
<li role="presentation">
<ul id="toolbar-end" role="tablist" class="skin-dark">
<li role="tab">
<button id="back-button" class="icon" disabled="true" alt="Back"></button>
</li>
<li role="presentation">
<li role="tab">
<button id="forward-button" class="icon" disabled="true" alt="Forward"></button>
</li>
<li role="presentation">
<a id="bookmark-button" class="icon" alt="Bookmark" role="button"></a>
<li role="tab">
<a id="bookmark-button" class="icon" alt="Bookmark"></a>
</li>
<li role="presentation">
<a id="share-button" class="icon" alt="Share" role="button"></a>
<li role="tab">
<a id="share-button" class="icon" alt="Share"></a>
</li>
</ul>

Expand Down
4 changes: 0 additions & 4 deletions apps/browser/js/awesomescreen.js
View file
Expand Up @@ -18,7 +18,6 @@ var Awesomescreen = {
init: function awesomescreen_init() {
// DOM elements
this.cancelButton = document.getElementById('awesomescreen-cancel-button');
this.tabs = document.querySelectorAll('#awesomescreen [role="tab"]');
this.tabPanels = document.getElementById('tab-panels');
this.tabHeaders = document.getElementById('tab-headers');
this.topSitesTab = document.getElementById('top-sites-tab');
Expand Down Expand Up @@ -89,7 +88,6 @@ var Awesomescreen = {
this.deselectTabs();
this.topSitesTab.classList.add('selected');
this.topSites.classList.add('selected');
AccessibilityHelper.setAriaSelected(this.topSitesTab, this.tabs);
BrowserDB.getTopSites(this.TOP_SITES_COUNT, null,
this.populateTopSites.bind(this));
},
Expand Down Expand Up @@ -121,7 +119,6 @@ var Awesomescreen = {
this.deselectTabs();
this.historyTab.classList.add('selected');
this.history.classList.add('selected');
AccessibilityHelper.setAriaSelected(this.historyTab, this.tabs);
BrowserDB.getHistory(this.populateHistory.bind(this));
},

Expand Down Expand Up @@ -250,7 +247,6 @@ var Awesomescreen = {
this.deselectTabs();
this.bookmarksTab.classList.add('selected');
this.bookmarks.classList.add('selected');
AccessibilityHelper.setAriaSelected(this.bookmarksTab, this.tabs);
BrowserDB.getBookmarks(this.populateBookmarks.bind(this));
},

Expand Down
20 changes: 10 additions & 10 deletions apps/browser/style/awesomescreen.css
View file
Expand Up @@ -28,7 +28,7 @@ nav[data-role="tabs"] {
height: 100%;
}

#tab-headers .bb-tablist {
#tab-headers [role="tablist"] {
margin: 0;
padding: 0;
list-style-type: none;
Expand All @@ -39,19 +39,19 @@ nav[data-role="tabs"] {
}

/* override [BB]Tabs */
#tab-headers .bb-tablist:before {
#tab-headers [role="tablist"]:before {
display: none;
}

#tab-headers .bb-tablist a:active {
#tab-headers [role="tablist"] [role="tab"] a:active {
background-color: transparent;
}

#tab-headers .bb-tablist li {
#tab-headers [role="tablist"] li[role="tab"] {
display: inline;
}

#tab-headers .bb-tablist li a {
#tab-headers [role="tablist"] li[role="tab"] a {
float: left;
max-width: calc(33% - 3.9rem);
height: 3.6rem;
Expand All @@ -68,15 +68,15 @@ nav[data-role="tabs"] {
overflow: hidden;
}

#tab-headers .bb-tablist li a:active {
#tab-headers [role="tablist"] li[role="tab"] a:active {
background: none;
}

#tab-headers .bb-tablist li:first-child a {
#tab-headers [role="tablist"] li[role="tab"]:first-child a {
margin-left: 0;
}

#tab-headers .bb-tablist li a.selected {
#tab-headers [role="tablist"] li[role="tab"] a.selected {
background-image: url('images/tab-background.png');
background-image: url('images/tab-left.png'), url('images/tab-right.png'), url('images/tab-background.png');
background-position: left, right, center;
Expand All @@ -85,14 +85,14 @@ nav[data-role="tabs"] {
background-size: auto 3.6rem;
}

section.bb-tabpanel {
section[role="tabpanel"] {
padding-top: 0.5rem;
clear: both;
background-color: #f3f4f8;
display: none;
}

section.bb-tabpanel.selected {
section[role="tabpanel"].selected {
display: block;
}

Expand Down
19 changes: 9 additions & 10 deletions apps/calendar/index.html
View file
Expand Up @@ -19,7 +19,6 @@

<!--- shared scripts -->
<script defer src="/shared/js/l10n.js"></script>
<script defer src="/shared/js/accessibility_helper.js"></script>
<script defer src="/shared/js/gesture_detector.js"></script>
<script defer src="/shared/js/lazy_loader.js"></script>
<script defer src="/shared/js/l10n_date.js"></script>
Expand Down Expand Up @@ -139,27 +138,27 @@ <h1 id="current-month-year">
<div class="hint-swipe-image"></div>
</div>

<section id="month-view" role="tabpanel" aria-labelledby="month">
<section id="month-view">
</section>

<!---
When a day is selected you have
access to the details here
-->
<section id="months-day-view" role="tabpanel" aria-labelledby="today">
<section id="months-day-view">
<section id="event-list" class="day-events">
</section>
</section>

<section id="day-view" role="tabpanel" aria-labelledby="day"></section>
<section id="day-view"></section>

<section id="week-view" role="tabpanel" aria-labelledby="week"></section>
<section id="week-view"></section>

<ul id="view-selector" role="tablist" class="bb-tablist">
<li class="today" role="presentation"><a role="tab" aria-selected="false" aria-controls="months-day-view" id="today" data-l10n-id="show-today" href="#today">Today</a></li>
<li class="month" role="presentation"><a role="tab" aria-selected="true" aria-controls="month-view" id="month" data-l10n-id="show-month-view" href="/month/">Month</a></li>
<li class="week" role="presentation"><a role="tab" aria-selected="false" aria-controls="week-view" id="week" data-l10n-id="show-week-view" href="/week/">Week</a></li>
<li class="day" role="presentation"><a role="tab" aria-selected="false" aria-controls="day-view" id="day" data-l10n-id="show-day-view" href="/day/">Day</a></li>
<ul id="view-selector" role="tablist">
<li class="today" role="tab"><a id="today" data-l10n-id="show-today" href="#today">Today</a></li>
<li class="month" role="tab"><a data-l10n-id="show-month-view" href="/month/">Month</a></li>
<li class="week" role="tab"><a data-l10n-id="show-week-view" href="/week/">Week</a></li>
<li class="day" role="tab"><a data-l10n-id="show-day-view" href="/day/">Day</a></li>
</ul>

</section>
Expand Down
11 changes: 1 addition & 10 deletions apps/calendar/js/app.js
View file
Expand Up @@ -315,9 +315,7 @@ Calendar.App = (function(window) {
_init: function() {
var self = this;
// quick hack for today button
var tablist = document.querySelector('#view-selector');
var today = tablist.querySelector('.today a');
var tabs = tablist.querySelectorAll('[role="tab"]');
var today = document.querySelector('#view-selector .today');

today.addEventListener('click', function(e) {
var date = new Date();
Expand All @@ -327,13 +325,6 @@ Calendar.App = (function(window) {
e.preventDefault();
});

// Handle aria-selected attribute for tabs.
tablist.addEventListener('click', function(event) {
if (event.target !== today) {
AccessibilityHelper.setAriaSelected(event.target, tabs);
}
});

this.dateFormat = navigator.mozL10n.DateTimeFormat();

// re-localize dates on screen
Expand Down
4 changes: 2 additions & 2 deletions apps/calendar/style/ui.css
View file
Expand Up @@ -64,8 +64,8 @@ body[data-path="/day/"] #view-selector > .day > a:active {
color: #5f5f5f;
}

.bb-tablist > li > a:after,
.bb-tablist > li > button:after {
[role="tablist"] > [role="tab"] > a:after,
[role="tablist"] > [role="tab"] > button:after {
display: block !important;
}

Expand Down
14 changes: 7 additions & 7 deletions apps/clock/index.html
View file
Expand Up @@ -34,18 +34,18 @@
<body>
<div id="views">
<div id="main-panel-wrapper">
<div id="alarm-panel" class="active panel" data-panel-id="alarm" role="tabpanel" aria-labelledby="alarm-tab"></div>
<div id="timer-panel" class="panel hidden" data-panel-id="timer" role="tabpanel" aria-labelledby="timer-tab"></div>
<div id="stopwatch-panel" class="panel hidden" data-panel-id="stopwatch" role="tabpanel" aria-labelledby="stopwatch-tab"></div>
<div class="active panel" data-panel-id="alarm"></div>
<div class="panel hidden" data-panel-id="timer"></div>
<div class="panel hidden" data-panel-id="stopwatch"></div>
</div>
<section role="region" class="skin-dark panel hidden" data-panel-id="alarm_edit">
</section>
</div>

<ul role="tablist" class="bb-tablist skin-dark bottom" id="clock-tabs">
<li role="presentation"><a id="alarm-tab" aria-controls="alarm-panel" aria-selected="true" role="tab" href="#alarm-panel" data-l10n-id="alarm">Alarm</a></li>
<li role="presentation"><a id="timer-tab" aria-controls="timer-panel" aria-selected="false" role="tab" href="#timer-panel" data-l10n-id="timer">Timer</a></li>
<li role="presentation"><a id="stopwatch-tab" aria-controls="stopwatch-panel" aria-selected="false" role="tab" href="#stopwatch-panel" data-l10n-id="stopwatch">Stopwatch</a></li>
<ul role="tablist" class="skin-dark bottom" id="clock-tabs">
<li id="alarm-tab" role="tab" aria-selected="true"><a href="#alarm-panel" data-l10n-id="alarm">Alarm</a></li>
<li id="timer-tab" role="tab"><a href="#timer-panel" data-l10n-id="timer">Timer</a></li>
<li id="stopwatch-tab" role="tab"><a href="#stopwatch-panel" data-l10n-id="stopwatch">Stopwatch</a></li>
</ul>

<script data-main="js/startup.js" src="js/alameda.js"></script>
Expand Down
3 changes: 0 additions & 3 deletions apps/clock/js/require_config.js
View file
Expand Up @@ -22,9 +22,6 @@ requirejs.config({
'shared/js/async_storage': {
exports: 'asyncStorage'
},
'shared/js/accessibility_helper': {
exports: 'AccessibilityHelper'
},
'shared/js/performance_testing_helper': {
exports: 'PerformanceTestingHelper'
},
Expand Down
19 changes: 15 additions & 4 deletions apps/clock/js/tabs.js
View file
Expand Up @@ -6,17 +6,28 @@ define(function(require) {
*/
function Tabs(element) {
this.element = element;
this.links = element.querySelectorAll('a');
this.links = Array.prototype.slice.call(element.querySelectorAll('a'));
this.currentIndex = 0;
this.element.addEventListener('click', this);
this.accessibilityHelper = require('shared/js/accessibility_helper');
}

/**
* Update selected attributes for the selected tab.
* Find the clicked link in the list of links and update selected attributes.
* Also emit a 'selected' event with the relevant data.
*/
Tabs.prototype.handleEvent = function tabsHandleEvent(event) {
this.accessibilityHelper.setAriaSelected(event.target, this.links);
var index = this.links.indexOf(event.target);
if (index === -1 || index === this.currentIndex) {
return;
}
this.currentIndex = index;
this.links.forEach(function toggleLinks(link, linkIndex) {
if (linkIndex === index) {
link.parentNode.setAttribute('aria-selected', 'true');
} else {
link.parentNode.removeAttribute('aria-selected');
}
});
};

return Tabs;
Expand Down
6 changes: 3 additions & 3 deletions apps/clock/test/marionette/lib/selectors.json
View file
@@ -1,8 +1,8 @@
{
"tabs": {
"alarm": "#alarm-tab",
"timer": "#timer-tab",
"stopwatch": "#stopwatch-tab"
"alarm": "#alarm-tab a",
"timer": "#timer-tab a",
"stopwatch": "#stopwatch-tab a"
},
"panels": {
"alarm": "[data-panel-id='alarm']",
Expand Down
11 changes: 3 additions & 8 deletions apps/clock/test/unit/tabs_test.js
View file
@@ -1,8 +1,4 @@

'use strict';

mocha.setup({ globals: ['AccessibilityHelper'] });

suite('Tabs', function() {
var Tabs;

Expand Down Expand Up @@ -33,10 +29,9 @@ suite('Tabs', function() {
setup(function() {
this.links[1].click();
});
test('test aria-selected set', function() {
['false', 'true', 'false'].forEach(function(value, index) {
assert.equal(this.links[index].getAttribute('aria-selected'), value);
}, this);
test('moved aria-selected', function() {
assert.isTrue(this.links[1].parentNode.hasAttribute('aria-selected'));
assert.equal(this.element.querySelectorAll('[aria-selected]').length, 1);
});
});
});
3 changes: 0 additions & 3 deletions apps/clock/test/unit/test_require.js
View file
Expand Up @@ -27,9 +27,6 @@ requireApp('clock/js/alameda.js', function() {
'shared/js/async_storage': {
exports: 'asyncStorage'
},
'shared/js/accessibility_helper': {
exports: 'AccessibilityHelper'
},
'mocks/mock_shared/js/l10n': {
exports: 'MockL10n'
},
Expand Down

0 comments on commit ff5d799

Please sign in to comment.