diff --git a/dashboard-ui/channelitems.html b/dashboard-ui/channelitems.html index c920f5615d..06af48d5b7 100644 --- a/dashboard-ui/channelitems.html +++ b/dashboard-ui/channelitems.html @@ -4,7 +4,11 @@ ${TitleMediaBrowser} -
+
+ +
+ ${TabChannels} +
diff --git a/dashboard-ui/channels.html b/dashboard-ui/channels.html index 518def10ba..08c375519e 100644 --- a/dashboard-ui/channels.html +++ b/dashboard-ui/channels.html @@ -4,12 +4,14 @@ ${TitleMediaBrowser} -
+
+ +
+ ${TabChannels} +
-

${HeaderChannels}

-
diff --git a/dashboard-ui/collections.html b/dashboard-ui/collections.html index a79611e0a9..adcc49ea6a 100644 --- a/dashboard-ui/collections.html +++ b/dashboard-ui/collections.html @@ -4,15 +4,17 @@ ${TitleMediaBrowser} -
+
+ +
+ ${TabCollections} +
-

${HeaderCollections}

-
diff --git a/dashboard-ui/css/chromecast.css b/dashboard-ui/css/chromecast.css index 4af5d4259f..7553df0243 100644 --- a/dashboard-ui/css/chromecast.css +++ b/dashboard-ui/css/chromecast.css @@ -1,35 +1,22 @@ -.btnCast { - width: 28px; - height: 28px; - padding: 0; +.btnCastImage { background-color: transparent; - border: 0; - background-size: 100%; - vertical-align: middle; - margin: 0 .6em; - cursor: pointer; - border: 0 !important; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + width: 28px; + height: 100%; + position: relative; + top: 1px; } - .btnCast:hover { - opacity: .5; - } - -.btnDefaultCast { +.btnDefaultCast .btnCastImage { background-image: url(images/chromecast/ic_media_route_off_holo_dark.png); } -.btnActiveCast { +.btnActiveCast .btnCastImage { background-image: url(images/chromecast/ic_media_route_on_holo_dark.png); } -.btnDisabledCast { +.btnDisabledCast .btnCastImage { background-image: url(images/chromecast/ic_media_route_disabled_holo_dark.png); } - -.ui-icon-ccast { - background-image: url(images/chromecast/ic_media_route_off_holo_dark.png); - background-position: 5px 5px; - background-repeat: no-repeat; - background-size: 18px 18px; -} \ No newline at end of file diff --git a/dashboard-ui/css/images/headersearch.png b/dashboard-ui/css/images/headersearch.png new file mode 100644 index 0000000000..f8b57015df Binary files /dev/null and b/dashboard-ui/css/images/headersearch.png differ diff --git a/dashboard-ui/css/images/items/folders/edit.png b/dashboard-ui/css/images/items/folders/edit.png new file mode 100644 index 0000000000..6b276f1cdd Binary files /dev/null and b/dashboard-ui/css/images/items/folders/edit.png differ diff --git a/dashboard-ui/css/images/items/folders/settings.png b/dashboard-ui/css/images/items/folders/settings.png new file mode 100644 index 0000000000..41cf1ed0fe Binary files /dev/null and b/dashboard-ui/css/images/items/folders/settings.png differ diff --git a/dashboard-ui/css/images/menu.png b/dashboard-ui/css/images/menu.png new file mode 100644 index 0000000000..c3d0133719 Binary files /dev/null and b/dashboard-ui/css/images/menu.png differ diff --git a/dashboard-ui/css/images/remote.png b/dashboard-ui/css/images/remote.png new file mode 100644 index 0000000000..0dccaccab5 Binary files /dev/null and b/dashboard-ui/css/images/remote.png differ diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index c854ce65b4..5533e11ee6 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -12,6 +12,26 @@ margin-left: .5em; } +.libraryPage { + background-color: #202020; +} + +.backdropPage { + background-color: rgba(0, 0, 0, .86); +} + +.backdropContainer { + position: fixed; + top: 50px; + right: 0; + left: 0; + bottom: 0; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + + .libraryPage .header { padding-bottom: 0; } @@ -26,8 +46,8 @@ } .listHeader { - margin-top: .5em; - margin-bottom: .2em; + margin-top: .7em; + margin-bottom: 0; padding-left: 4px; } @@ -465,6 +485,7 @@ a.itemTag:hover { .libraryPanelHeader { margin: 5px 0 15px 0; + font-size: 15px; } .libraryPanelHeader a { @@ -1073,7 +1094,7 @@ a.itemTag:hover { .spotlight { position: absolute; - left: -220px; + left: 0; right: 0; background-size: cover; background-position: center 25%; @@ -1103,7 +1124,7 @@ a.itemTag:hover { bottom: 55px; left: 210px; width: 600px; - background: rgba(0,0,0,.6); + background: rgba(0,0,0,.8); border-radius: 5px; } diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 235ffa09b9..230de1f29a 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -1,9 +1,9 @@ .libraryPage { - padding-top: 53px !important; + padding-top: 50px !important; } .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) { - padding-top: 102px !important; + padding-top: 100px !important; } .libraryMenuDivider { @@ -12,6 +12,73 @@ margin: .5em 0; } +.viewMenuBar, .headerButton { + height: 50px; +} + +.headerButton { + line-height: 50px; +} + +.headerButton { + margin: 0; + padding: 0; + background-color: transparent; + top: 0; + bottom: 0; + vertical-align: middle; + text-align: center; + border: 1px solid #1b1b1b!important; + cursor: pointer; + outline: none; + padding: 0 20px; +} + + .headerButton img { + height: 18px; + vertical-align: middle; + } + +.headerSearchButton img { + height: 16px; +} + +.headerButtonLeft { + border-width: 0 1px 0 0 !important; + float: left; + padding: 0 15px; +} + +.headerButtonRight { + border-width: 0 !important; + float: left; + border-width: 0 0 0 1px !important; +} + + .headerButtonRight:first-child { + border-width: 0 !important; + } + + .headerButtonRight:last-child { + } + +.desktopHomeLink { + color: #ddd !important; + text-decoration: none; + font-weight: 400!important; + font-size: 15px; + border-right: 0 !important; +} + + .desktopHomeLink span { + vertical-align: middle; + } + +.libraryMenuButton { + left: 0; + opacity: .8; +} + .viewMenuBar { font-weight: bold; position: fixed; @@ -20,13 +87,54 @@ z-index: 1000; top: 0; background: #000; - padding: 3px .25em 3px 1em; border-bottom: 1px solid #101010; border-top: 0; border-left: 0; border-right: 0; } +.libraryViewNav { + height: 48px; + overflow: hidden; + border-bottom: 1px solid #222; + position: fixed; + right: 0; + left: 0; + top: 51px; + z-index: 1000; + background-color: #181818; +} + +@media all and (max-width: 460px) { + .viewMenuBar, .headerButton { + height: 46px; + } + + .headerButton { + line-height: 46px; + } + + .libraryPage { + padding-top: 46px !important; + } + + .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) { + padding-top: 96px !important; + } + + .libraryViewNav { + top: 47px; + } + + .headerButtonLeft img { + height: 15px; + } + + .btnCastImage { + width: 26px !important; + } +} + .viewMenuLink { text-decoration: none; color: #ccc!important; @@ -35,13 +143,14 @@ vertical-align: middle; } - .viewMenuLink:hover { - background-color: #52B54B; - color: #fff!important; - } +.viewMenuTextLink:hover, .libraryMenuButton:hover { + background-color: #38c; + color: #fff!important; + opacity: 1; +} -.viewMenuBar .btnCurrentUser { - padding: 7px 1em 6px; +.headerButtonRight:hover { + opacity: .5; } .viewMenuLink:hover { @@ -59,23 +168,23 @@ .viewMenuTextLink { display: block; - padding: .6em .5em .6em 41px!important; + padding: .6em .5em .6em 43px!important; font-size: 15px; font-weight: 300!important; font-family: Roboto; background-repeat: no-repeat; background-size: 18px 18px; - background-position: 14px center; + background-position: 16px center; } .musicViewMenu { background-image: url(images/items/folders/music.png); - background-position: 14px 8px; + background-position: 16px 8px; } .tvshowsViewMenu { background-image: url(images/items/folders/tv.png); - background-position: 14px 8px; + background-position: 16px 8px; } .moviesViewMenu { @@ -84,12 +193,12 @@ .gamesViewMenu { background-image: url(images/items/folders/games.png); - background-position: 14px 8px; + background-position: 16px 8px; } .channelsViewMenu { background-image: url(images/items/folders/channels.png); - background-position: 14px 9px; + background-position: 16px 9px; } .booksViewMenu { @@ -98,12 +207,12 @@ .musicvideosViewMenu { background-image: url(images/items/folders/musicvideos.png); - background-position: 14px 8px; + background-position: 16px 8px; } .photosViewMenu { background-image: url(images/items/folders/photos.png); - background-position: 14px 8px; + background-position: 16px 8px; } .homeVideosViewMenu { @@ -114,12 +223,25 @@ background-image: url(images/items/folders/folder.png); } +.editorViewMenu { + background-image: url(images/items/folders/edit.png); + background-position: 16px 8px; +} + +.dashboardViewMenu { + background-image: url(images/items/folders/settings.png); + background-position: 16px 8px; +} + .viewMenuSecondary { - float: right; + position: absolute; + top: 0; + bottom: 0; + right: 0; } .selectedMediaFolder { - background-color: #38c!important; + background-color: #52B54B!important; color: #fff!important; } @@ -127,18 +249,6 @@ background-color: rgba(51,136,204,.8)!important; } -.libraryViewNav { - height: 48px; - overflow: hidden; - border-bottom: 1px solid #222; - position: fixed; - right: 0; - left: 0; - top: 53px; - z-index: 1000; - background-color: #181818; -} - .ui-panel.ui-body-b { background-color: #181818; } @@ -178,40 +288,13 @@ color: #ddd; } -.desktopHomeLink { - color: #ddd !important; - margin-right: 2em; - text-decoration: none; - font-weight: 400!important; -} - - .desktopHomeLink span { - vertical-align: middle; - } - -@media all and (min-width: 1099px) { - - /*.type-home { - left: 215px !important; - width: auto !important; - right: 0 !important; - }*/ - - .viewSettings { - padding-left: .4em; - } -} - -@media all and (max-width: 459px) { +@media all and (max-width: 600px) { .desktopHomeLink { display: none; } -} -@media all and (min-width: 750px) { - - .viewMenuBar .btnCurrentUser { - padding-right: 1.5em; + .headerSettingsButton { + display: none; } } diff --git a/dashboard-ui/gamesrecommended.html b/dashboard-ui/gamesrecommended.html index 8837f90efc..78fb4778ba 100644 --- a/dashboard-ui/gamesrecommended.html +++ b/dashboard-ui/gamesrecommended.html @@ -4,7 +4,7 @@ ${TitleMediaBrowser} -
+
${TabSuggested} ${TabGames} diff --git a/dashboard-ui/gamesystems.html b/dashboard-ui/gamesystems.html index d8b1a25c52..01fe0d72b3 100644 --- a/dashboard-ui/gamesystems.html +++ b/dashboard-ui/gamesystems.html @@ -4,7 +4,7 @@ ${TitleMediaBrowser} -
+
${TabSuggested} ${TabGames} diff --git a/dashboard-ui/index.html b/dashboard-ui/index.html index 1f764136b8..e1fc5f25c7 100644 --- a/dashboard-ui/index.html +++ b/dashboard-ui/index.html @@ -4,7 +4,14 @@ ${TitleMediaBrowser} -
+
+ + +
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 6304402975..2ec47520b5 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -5,6 +5,19 @@
+ + + + +
diff --git a/dashboard-ui/musicrecommended.html b/dashboard-ui/musicrecommended.html index 6f1256f1d3..36c170beb7 100644 --- a/dashboard-ui/musicrecommended.html +++ b/dashboard-ui/musicrecommended.html @@ -4,7 +4,7 @@ ${TitleMediaBrowser} -
+
${TabSuggested} ${TabSongs} diff --git a/dashboard-ui/scripts/backdrops.js b/dashboard-ui/scripts/backdrops.js new file mode 100644 index 0000000000..b41cfaa532 --- /dev/null +++ b/dashboard-ui/scripts/backdrops.js @@ -0,0 +1,106 @@ +(function ($, document) { + + function getElement() { + + var elem = $('.backdropContainer'); + + if (!elem.length) { + + elem = $('
').prependTo(document.body); + } + + return elem; + } + + function getRandom(min, max) { + return Math.floor(Math.random() * (max - min) + min); + } + + function getBackdropItemIds(userId, types, parentId) { + + var key = 'backdrops_' + userId + (types || '') + (parentId || ''); + + var deferred = $.Deferred(); + + var data = localStorage.getItem(key); + + if (data) { + + console.log('Found backdrop id list in cache. Key: ' + key) + data = JSON.parse(data); + deferred.resolveWith(null, [data]); + } else { + + var options = { + + SortBy: "Random", + Limit: 50, + Recursive: true, + IncludeItemTypes: types, + ImageTypes: "Backdrop", + //Ids: "8114409aa00a2722456c08e298f90bed", + ParentId: parentId + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + var images = result.Items.map(function (i) { + return { + id: i.Id, + tag: i.BackdropImageTags[0] + }; + }); + + localStorage.setItem(key, JSON.stringify(images)); + deferred.resolveWith(null, [images]); + }); + } + + return deferred.promise(); + } + + function showBackdrop(type) { + + getBackdropItemIds(Dashboard.getCurrentUserId(), type, LibraryMenu.getTopParentId()).done(function (images) { + + if (images.length) { + + var index = getRandom(0, images.length - 1); + var item = images[index]; + + var imgUrl = ApiClient.getImageUrl(item.id, { + type: "Backdrop", + tag: item.tag + }); + + getElement().css('backgroundImage', 'url(\'' + imgUrl + '\')'); + + } else { + + clearBackdrop(); + } + }); + } + + function clearBackdrop() { + + $('.backdropContainer').css('backgroundImage', ''); + } + + $(document).on('pagebeforeshow', ".backdropPage", function () { + + var page = this; + + // Gets real messy and jumps around the page when scrolling + // Can be reviewed later. + if ($.browser.msie) { + $(page).removeClass('backdropPage'); + } else { + var type = page.getAttribute('data-backdroptype'); + + showBackdrop(type); + } + + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index df334d5e79..0eda1433c9 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -184,6 +184,14 @@ $('#movieTabs', page).show(); } + if (item.Type == "ChannelVideoItem" || item.Type == "ChannelAudioItem" || item.Type == "ChannelCategoryItem") { + $('#channelTabs', page).show(); + } + + if (item.Type == "BoxSet") { + $('#boxsetTabs', page).show(); + } + if (item.MediaType == "Game") { $('#gameTabs', page).show(); } diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 681e5df543..82ea50ae3e 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -704,7 +704,7 @@ html += ''; var style = ""; - options.lazy = false; + if (imgUrl && !options.lazy) { style += 'background-image:url(\'' + imgUrl + '\');'; } diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 9395f7a6f4..2fe00c72d8 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -18,22 +18,30 @@ var html = '
'; - html += ''; + html += ''; - html += 'MEDIABROWSER'; + html += 'MEDIABROWSER'; - html += 'Remote Control'; + //html += 'Remote Control'; html += '
'; - html += ''; + html += ''; - html += ''; + html += ''; + + html += ''; + + if (user.Configuration.IsAdministrator) { + html += ''; + } + + html += ''; if (user.PrimaryImageTag) { var url = ApiClient.getUserImageUrl(user.Id, { - height: 24, + height: 18, tag: user.PrimaryImageTag, type: "Primary" }); @@ -45,12 +53,6 @@ html += ''; - html += ''; - - if (user.Configuration.IsAdministrator) { - html += 'Dashboard'; - } - html += '
'; html += '
'; @@ -68,9 +70,9 @@ return LibraryBrowser.getHref(item); } - + function getViewsHtml(user, counts, items, liveTvInfo) { - + var html = ''; html += items.map(function (i) { @@ -98,7 +100,8 @@ if (user.Configuration.IsAdministrator) { html += '
'; - html += 'Metadata Manager'; + html += 'Dashboard'; + html += 'Metadata Manager'; } return html; @@ -149,7 +152,7 @@ } updateLibraryNavLinks(page); - + return panel; } @@ -178,7 +181,7 @@ } } - function updateLibraryNavLinks(page) { + function updateLibraryNavLinks(page, updateElements) { page = $(page); @@ -236,22 +239,22 @@ }); - }).on('pagebeforeshow', ".page", function () { + }).on('pagebeforeshow', ".libraryPage", function () { var page = this; - if ($(page).hasClass('libraryPage')) { + updateLibraryNavLinks(page); - if (!$('.viewMenuBar', page).length) { + if (!$('.viewMenuBar', page).length) { - Dashboard.getCurrentUser().done(function (user) { + Dashboard.getCurrentUser().done(function (user) { - renderHeader(page, user); - - updateLibraryNavLinks(page); - }); - } + renderHeader(page, user); + updateCastIcon(); + + updateLibraryNavLinks(page); + }); } }).on('pageshow', ".libraryPage", function () { diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js index 24b40dcf3b..7b15f408e4 100644 --- a/dashboard-ui/scripts/moviesrecommended.js +++ b/dashboard-ui/scripts/moviesrecommended.js @@ -5,9 +5,9 @@ var html = ''; var title = ''; - + switch (recommendation.RecommendationType) { - + case 'SimilarToRecentlyPlayed': title = 'Because you watched ' + recommendation.BaselineItemName; break; @@ -23,7 +23,7 @@ title = 'Starring ' + recommendation.BaselineItemName; break; } - + html += '

' + title + '

'; html += '
'; @@ -34,7 +34,7 @@ return html; } - + $(document).on('pagebeforeshow', "#moviesRecommendedPage", function () { var parentId = LibraryMenu.getTopParentId(); @@ -42,7 +42,7 @@ var screenWidth = $(window).width(); var page = this; - + var options = { SortBy: "DatePlayed", @@ -63,20 +63,20 @@ } else { $('#resumableSection', page).hide(); } - + $('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({ items: result.Items, preferBackdrop: true, shape: 'backdrop', overlayText: screenWidth >= 600, showTitle: true - + })).createPosterItemMenus(); }); var url = ApiClient.getUrl("Movies/Recommendations", { - + userId: Dashboard.getCurrentUserId(), categoryLimit: screenWidth >= 1200 ? 6 : 3, itemLimit: screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : 6), @@ -84,7 +84,7 @@ ParentId: parentId }); - $.getJSON(url).done(function(recommendations) { + $.getJSON(url).done(function (recommendations) { if (!recommendations.length) { @@ -96,6 +96,7 @@ $('.recommendations', page).html(html).createPosterItemMenus(); }); + }); diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index 2a4961ccad..2f218a6c54 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -13,7 +13,7 @@ SortBy: "DateCreated", SortOrder: "Descending", IncludeItemTypes: "MusicAlbum", - Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5), + Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5), Recursive: true, Fields: "PrimaryImageAspectRatio", ParentId: parentId @@ -36,7 +36,7 @@ SortBy: "DateCreated", SortOrder: "Descending", IncludeItemTypes: "Audio", - Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5), + Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5), Recursive: true, Fields: "PrimaryImageAspectRatio,AudioInfo", ParentId: parentId @@ -59,7 +59,7 @@ SortBy: "DatePlayed", SortOrder: "Descending", IncludeItemTypes: "Audio", - Limit: screenWidth >= 1920 ? 7 : (screenWidth >= 1440 ? 7 : 5), + Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 5), Recursive: true, Fields: "PrimaryImageAspectRatio,AudioInfo", Filters: "IsPlayed", diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 776df0f794..e13d8b8849 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1175,6 +1175,8 @@ var Dashboard = { getDisplayTime: function (ticks) { var ticksPerHour = 36000000000; + var ticksPerMinute = 600000000; + var ticksPerSecond = 10000000; var parts = []; @@ -1187,8 +1189,6 @@ var Dashboard = { ticks -= (hours * ticksPerHour); - var ticksPerMinute = 600000000; - var minutes = ticks / ticksPerMinute; minutes = Math.floor(minutes); @@ -1199,10 +1199,8 @@ var Dashboard = { } parts.push(minutes); - var ticksPerSecond = 10000000; - var seconds = ticks / ticksPerSecond; - seconds = Math.round(seconds); + seconds = Math.floor(seconds); if (seconds < 10) { seconds = '0' + seconds; diff --git a/dashboard-ui/thirdparty/jquery.unveil-custom.js b/dashboard-ui/thirdparty/jquery.unveil-custom.js index 79f275a309..648fe06edd 100644 --- a/dashboard-ui/thirdparty/jquery.unveil-custom.js +++ b/dashboard-ui/thirdparty/jquery.unveil-custom.js @@ -29,6 +29,7 @@ } else { this.setAttribute("src", source); } + this.setAttribute("data-src", ''); if (typeof callback === "function") callback.call(this); } }); diff --git a/dashboard-ui/tvlatest.html b/dashboard-ui/tvlatest.html index abef6d884b..483d19eeb3 100644 --- a/dashboard-ui/tvlatest.html +++ b/dashboard-ui/tvlatest.html @@ -4,7 +4,7 @@ ${TitleMediaBrowser} -
+
${TabSuggested} ${TabLatest} diff --git a/dashboard-ui/tvrecommended.html b/dashboard-ui/tvrecommended.html index 2dd4a28076..e0975f8c4e 100644 --- a/dashboard-ui/tvrecommended.html +++ b/dashboard-ui/tvrecommended.html @@ -4,7 +4,7 @@ ${TitleMediaBrowser} -
+
${TabSuggested} ${TabLatest} diff --git a/dashboard-ui/tvupcoming.html b/dashboard-ui/tvupcoming.html index 1fc141e300..e2b9aba9a3 100644 --- a/dashboard-ui/tvupcoming.html +++ b/dashboard-ui/tvupcoming.html @@ -4,7 +4,7 @@ ${TitleMediaBrowser} -
+
${TabSuggested} ${TabLatest}