From e97b2577b70a448626b83763c72f87b558e8f9db Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 15 Aug 2015 20:41:55 -0400
Subject: [PATCH] update recordings

---
 dashboard-ui/edititemmetadata.html            |  63 +++----
 dashboard-ui/playlists.html                   |  67 --------
 dashboard-ui/scripts/edititemmetadata.js      |  56 +++---
 dashboard-ui/scripts/librarybrowser.js        |   2 +-
 dashboard-ui/scripts/playlists.js             | 159 +++++-------------
 .../strings/javascript/javascript.json        |   4 +-
 dashboard-ui/thirdparty/emby-icons.html       |   1 +
 dashboard-ui/vulcanize-out.html               |   3 +
 8 files changed, 99 insertions(+), 256 deletions(-)

diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
index f40f4ff6a7..8c7e96830a 100644
--- a/dashboard-ui/edititemmetadata.html
+++ b/dashboard-ui/edititemmetadata.html
@@ -209,66 +209,56 @@
                                     <br />
 
                                     <div class="detailSection" id="collapsibleDvdEpisodeInfo" style="display: none;">
-                                        <div class="detailSectionHeader">
+                                        <h1>
                                             ${HeaderAlternateEpisodeNumbers}
-                                        </div>
-                                        <div class="detailSectionContent" style="padding: 0 .5em;">
-                                            <br />
+                                        </h1>
+                                        <div class="detailSectionContent">
                                             <div>
-                                                <label for="txtDvdSeasonNumber">${LabelDvdSeasonNumber}</label>
-                                                <input type="number" id="txtDvdSeasonNumber" pattern="[0-9]*" />
+                                                <paper-input id="txtDvdSeasonNumber" type="number" pattern="[0-9]*" label="${LabelDvdSeasonNumber}"></paper-input>
                                             </div>
                                             <div>
-                                                <label for="txtDvdEpisodeNumber">${LabelDvdEpisodeNumber}</label>
-                                                <input type="number" id="txtDvdEpisodeNumber" pattern="[0-9]*" />
+                                                <paper-input id="txtDvdEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelDvdEpisodeNumber}"></paper-input>
                                             </div>
                                             <div>
-                                                <label for="txtAbsoluteEpisodeNumber">${LabelAbsoluteEpisodeNumber}</label>
-                                                <input type="number" id="txtAbsoluteEpisodeNumber" pattern="[0-9]*" />
+                                                <paper-input id="txtAbsoluteEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelAbsoluteEpisodeNumber}"></paper-input>
                                             </div>
                                         </div>
                                     </div>
 
                                     <div class="detailSection" id="collapsibleSpecialEpisodeInfo" style="display: none;">
-                                        <div class="detailSectionHeader">
+                                        <h1>
                                             ${HeaderSpecialEpisodeInfo}
-                                        </div>
-                                        <div class="detailSectionContent" style="padding: 0 .5em;">
-                                            <br />
+                                        </h1>
+                                        <div class="detailSectionContent">
                                             <div>
-                                                <label for="txtAirsBeforeSeason">${LabelAirsBeforeSeason}</label>
-                                                <input type="number" id="txtAirsBeforeSeason" pattern="[0-9]*" />
+                                                <paper-input id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}"></paper-input>
                                             </div>
                                             <div>
-                                                <label for="txtAirsAfterSeason">${LabelAirsAfterSeason}</label>
-                                                <input type="number" id="txtAirsAfterSeason" pattern="[0-9]*" />
+                                                <paper-input id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}"></paper-input>
                                             </div>
                                             <div>
-                                                <label for="txtAirsBeforeEpisode">${LabelAirsBeforeEpisode}</label>
-                                                <input type="number" id="txtAirsBeforeEpisode" pattern="[0-9]*" />
+                                                <paper-input id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}"></paper-input>
                                             </div>
                                         </div>
                                     </div>
 
                                     <div class="detailSection">
-                                        <div class="detailSectionHeader">
+                                        <h1>
                                             ${HeaderExternalIds}
-                                        </div>
-                                        <div class="detailSectionContent" style="padding: 0 .5em;">
+                                        </h1>
+                                        <div class="detailSectionContent">
                                             <div class="externalIds editorFieldset">
                                             </div>
                                         </div>
                                     </div>
 
                                     <div class="detailSection" id="collapsibleDisplaySettings" style="display:none;">
-                                        <div class="detailSectionHeader">
+                                        <h1>
                                             ${HeaderDisplaySettings}
-                                        </div>
-                                        <div class="detailSectionContent" style="padding: 0 .5em;">
-                                            <br />
+                                        </h1>
+                                        <div class="detailSectionContent">
                                             <div id="fldSourceType" style="display: none;" class="fldDisplaySetting">
-                                                <label for="txtDisplayMediaType">${LabelTreatImageAs}</label>
-                                                <input type="text" id="txtDisplayMediaType" />
+                                                <paper-input id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}"></paper-input>
                                             </div>
                                             <div id="fldDisplaySpecialsInline" class="fldDisplaySetting">
                                                 <label for="chkDisplaySpecialsInline">${LabelDisplaySpecialsWithinSeasons}</label>
@@ -350,10 +340,9 @@
                                             <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
                                         </div>
                                     </div>
-                                    <div data-role="collapsible" data-mini="true" id="metadataSettingsCollapsible" style="display: none; margin-top: 1em;">
-                                        <h3>${HeaderMetadataSettings}</h3>
+                                    <div id="metadataSettingsCollapsible" style="display: none; margin-top: 3em;">
+                                        <h1>${HeaderMetadataSettings}</h1>
                                         <div>
-                                            <br />
                                             <div>
                                                 <label for="selectLanguage">${LabelMetadataDownloadLanguage}</label>
                                                 <select id="selectLanguage" data-mini="true"></select>
@@ -366,15 +355,13 @@
                                             </div>
                                             <div class="fieldDescription editorfieldDescription">${MessageLeaveEmptyToInherit}</div>
 
-                                            <p>
-                                                <br />
-                                                <label for="chkLockData">${LabelLockItemToPreventChanges}</label>
-                                                <input data-mini="true" type="checkbox" id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)" />
-                                            </p>
+                                            <div>
+                                                <br /><br />
+                                                <paper-checkbox id="chkLockData" onchange="EditItemMetadataPage.setProviderSettingsContainerVisibility(this)">${LabelLockItemToPreventChanges}</paper-checkbox>
+                                            </div>
                                             <br />
                                             <div id="providerSettingsContainer" style="display: none">
                                             </div>
-                                            <br />
                                         </div>
                                     </div>
                                     <br />
diff --git a/dashboard-ui/playlists.html b/dashboard-ui/playlists.html
index edc2de0864..02d361414a 100644
--- a/dashboard-ui/playlists.html
+++ b/dashboard-ui/playlists.html
@@ -18,73 +18,6 @@
                 <p>${MessageNoPlaylistsAvailable}</p>
             </div>
         </div>
-
-        <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
-            <form>
-
-                <div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabSort">${TabSort}</a>
-                    <a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
-                </div>
-
-                <div class="tabView viewTab">
-
-                    <div>
-                        <label for="selectView">${LabelView}</label>
-                        <select id="selectView">
-                            <option value="List">${OptionList}</option>
-                            <option value="Poster">${OptionPoster}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectPageSize">${LabelPageSize}</label>
-                        <select id="selectPageSize"></select>
-                    </div>
-
-                </div>
-                <div class="tabFilter viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>${HeaderFilters}</legend>
-                        <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
-                        <label for="chkIsFavorite">${OptionFavorite}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
-                        <label for="chkLikes">${OptionLikes}</label>
-
-                        <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
-                        <label for="chkDislikes">${OptionDislikes}</label>
-                    </fieldset>
-
-                </div>
-                <div class="tabSort viewTab">
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortBy}
-                        </legend>
-
-                        <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
-                        <label for="radioSortName">${OptionNameSort}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
-                        <label for="radioDateCreated">${OptionDateAdded}</label>
-                    </fieldset>
-
-                    <fieldset data-role="controlgroup">
-                        <legend>
-                            ${HeaderSortOrder}
-                        </legend>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
-                        <label for="radioAscending">${OptionAscending}</label>
-
-                        <input class="radioSortOrder" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
-                        <label for="radioDescending">${OptionDescending}</label>
-                    </fieldset>
-                </div>
-            </form>
-        </div>
     </div>
 </body>
 </html>
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
index 52e69ff043..8df663597e 100644
--- a/dashboard-ui/scripts/edititemmetadata.js
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -6,6 +6,8 @@
 
     function reload(page) {
 
+        page = $(page)[0];
+
         unbindItemChanged(page);
         Dashboard.showLoadingMsg();
 
@@ -123,20 +125,16 @@
             var buttonId = "btnOpen1" + idInfo.Key;
             var formatString = idInfo.UrlFormatString || '';
 
-            html += '<div data-role="fieldcontain">';
-            var idLabel = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
-            html += '<label for="' + id + '">' + idLabel + '</label>';
+            var labelText = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
 
-            html += '<div style="display: inline-block; width: 80%;">';
+            html += '<div>';
 
             var value = providerIds[idInfo.Key] || '';
 
-            html += '<input class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" data-buttonclass="' + buttonId + '" id="' + id + '" />';
-
-            html += '</div>';
+            html += '<paper-input style="display:inline-block;width:80%;" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" data-buttonclass="' + buttonId + '" id="' + id + '" label="' + labelText + '"></paper-input>';
 
             if (formatString) {
-                html += '<a class="' + buttonId + '" href="#" target="_blank" data-icon="arrow-r" data-inline="true" data-iconpos="notext" data-role="button" style="float: none; width: 1.75em"></a>';
+                html += '<a class="clearLink ' + buttonId + '" href="#" target="_blank" data-role="none" style="float: none; width: 1.75em"><paper-icon-button icon="open-in-browser"></paper-icon-button></a>';
             }
 
             html += '</div>';
@@ -433,8 +431,9 @@
         populateListView($('#listKeywords', page), item.Keywords);
 
         var lockData = (item.LockData || false);
-        var chkLockData = $("#chkLockData", page).attr('checked', lockData).checkboxradio('refresh');
-        if (chkLockData.checked()) {
+        var chkLockData = page.querySelector("#chkLockData");
+        chkLockData.checked = lockData;
+        if (chkLockData.checked) {
             $('#providerSettingsContainer', page).hide();
         } else {
             $('#providerSettingsContainer', page).show();
@@ -708,20 +707,16 @@
         return list.find('a.data').map(function () { return $(this).text(); }).get();
     }
 
-    function generateSliders(fields, type) {
+    function generateSliders(fields, currentFields) {
+
         var html = '';
         for (var i = 0; i < fields.length; i++) {
 
             var field = fields[i];
             var name = field.name;
             var value = field.value || field.name;
-            html += '<div data-role="fieldcontain">';
-            html += '<label for="lock' + value + '">' + name + '</label>';
-            html += '<select class="selectLockedField" id="lock' + value + '" data-role="slider" data-mini="true">';
-            html += '<option value="' + value + '">' + Globalize.translate('OptionOff') + '</option>';
-            html += '<option value="" selected="selected">' + Globalize.translate('OptionOn') + '</option>';
-            html += '</select>';
-            html += '</div>';
+            var checkedHtml = currentFields.indexOf(value) == -1 ? ' checked' : '';
+            html += '<paper-checkbox class="selectLockedField" data-value="' + value + '" style="display:block;margin:1em 0;"' + checkedHtml + '>' + name + '</paper-checkbox>';
         }
         return html;
     }
@@ -760,14 +755,10 @@
 
         var html = '';
 
-        html += "<h1>" + Globalize.translate('HeaderFields') + "</h1>";
-        html += "<p>" + Globalize.translate('HeaderFieldsHelp') + "</p>";
-        html += generateSliders(metadatafields, 'Fields');
-        container.html(html).trigger('create');
-        for (var fieldIndex = 0; fieldIndex < lockedFields.length; fieldIndex++) {
-            var field = lockedFields[fieldIndex];
-            $('#lock' + field).val(field).slider('refresh');
-        }
+        html += "<h1>" + Globalize.translate('HeaderEnabledFields') + "</h1>";
+        html += "<p>" + Globalize.translate('HeaderEnabledFieldsHelp') + "</p>";
+        html += generateSliders(metadatafields, lockedFields);
+        container.html(html);
     }
 
     function getSelectedAirDays(form) {
@@ -869,11 +860,12 @@
                 OfficialRating: $('#selectOfficialRating', form).val(),
                 CustomRating: $('#selectCustomRating', form).val(),
                 People: currentItem.People,
-                LockData: $("#chkLockData", form).prop('checked'),
-                LockedFields: $('.selectLockedField', form).map(function () {
-                    var value = $(this).val();
-                    if (value != '') return value;
-                }).get()
+                LockData: form.querySelector("#chkLockData").checked,
+                LockedFields: $('.selectLockedField', form).get().filter(function (c) {
+                    return !c.checked;
+                }).map(function (c) {
+                    return c.getAttribute('data-value');
+                })
             };
 
             item.ProviderIds = $.extend({}, currentItem.ProviderIds || {});
@@ -1376,7 +1368,7 @@
     }
 
     function showMoreMenu(page, elem) {
-        
+
         Dashboard.getCurrentUser().done(function (user) {
 
             var moreCommands = LibraryBrowser.getMoreCommands(currentItem, user);
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index c781d7a84c..a6572cd996 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2359,7 +2359,7 @@
         showLayoutMenu: function (button, currentLayout) {
 
             // Add banner and list once all screens support them
-            var views = ['Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
+            var views = ['List', 'Poster', 'PosterCard', 'Thumb', 'ThumbCard'];
 
             var menuItems = views.map(function (v) {
                 return {
diff --git a/dashboard-ui/scripts/playlists.js b/dashboard-ui/scripts/playlists.js
index 9362abe83d..bdee1a7402 100644
--- a/dashboard-ui/scripts/playlists.js
+++ b/dashboard-ui/scripts/playlists.js
@@ -1,21 +1,38 @@
 (function ($, document) {
 
-    var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
+    var data = {};
+    function getPageData() {
+        var key = getSavedQueryKey();
+        var pageData = data[key];
 
-    // The base query options
-    var query = {
+        if (!pageData) {
+            pageData = data[key] = {
+                query: {
+                    SortBy: "SortName",
+                    SortOrder: "Ascending",
+                    IncludeItemTypes: "Playlist",
+                    Recursive: true,
+                    Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
+                    StartIndex: 0,
+                    Limit: LibraryBrowser.getDefaultPageSize()
+                },
+                view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
+            };
 
-        SortBy: "SortName",
-        SortOrder: "Ascending",
-        IncludeItemTypes: "Playlist",
-        Recursive: true,
-        Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo",
-        StartIndex: 0
-    };
+            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+        }
+        return pageData;
+    }
+
+    function getQuery() {
+
+        return getPageData().query;
+    }
 
     function getSavedQueryKey() {
 
-        return 'playlists2' + (query.ParentId || '');
+        return getWindowUrl();
     }
 
     function showLoadingMessage(page) {
@@ -31,6 +48,7 @@
 
         showLoadingMessage(page);
 
+        var query = getQuery();
         var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query);
         var promise2 = Dashboard.getCurrentUser();
 
@@ -43,16 +61,20 @@
             window.scrollTo(0, 0);
 
             var html = '';
+            var view = getPageData().view;
 
             $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: true,
-                showLimit: false
+                viewButton: false,
+                showLimit: false,
+                updatePageSizeSetting: false,
+                addLayoutButton: true,
+                currentLayout: view
+
             })).trigger('create');
 
-            updateFilterControls(page);
             var trigger = false;
 
             if (result.TotalRecordCount) {
@@ -117,116 +139,21 @@
                 reloadItems(page);
             });
 
+            $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
+                getPageData().view = layout;
+                reloadItems(page);
+            });
+
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
             hideLoadingMessage(page);
         });
     }
 
-    function updateFilterControls(page) {
-
-        // Reset form values using the last used query
-        $('.radioSortBy', page).each(function () {
-
-            this.checked = (query.SortBy || '').toLowerCase() == this.getAttribute('data-sortby').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.radioSortOrder', page).each(function () {
-
-            this.checked = (query.SortOrder || '').toLowerCase() == this.getAttribute('data-sortorder').toLowerCase();
-
-        }).checkboxradio('refresh');
-
-        $('.chkStandardFilter', page).each(function () {
-
-            var filters = "," + (query.Filters || "");
-            var filterName = this.getAttribute('data-filter');
-
-            this.checked = filters.indexOf(',' + filterName) != -1;
-
-        }).checkboxradio('refresh');
-
-        $('#selectView', page).val(view).selectmenu('refresh');
-
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
-    }
-
-    $(document).on('pageinitdepends', "#playlistsPage", function () {
+    $(document).on('pagebeforeshowready', "#playlistsPage", function () {
 
         var page = this;
-
-        $('.radioSortBy', this).on('click', function () {
-            query.SortBy = this.getAttribute('data-sortby');
-            reloadItems(page);
-        });
-
-        $('.radioSortOrder', this).on('click', function () {
-            query.SortOrder = this.getAttribute('data-sortorder');
-            reloadItems(page);
-        });
-
-        $('.chkStandardFilter', this).on('change', function () {
-
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.Filters || "";
-
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
-
-            if (this.checked) {
-                filters = filters ? (filters + ',' + filterName) : filterName;
-            }
-
-            query.StartIndex = 0;
-            query.Filters = filters;
-
-            reloadItems(page);
-        });
-
-        $('#selectView', this).on('change', function () {
-
-            view = this.value;
-
-            reloadItems(page);
-
-            LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
-        });
-
-        $('#selectPageSize', page).on('change', function () {
-            query.Limit = parseInt(this.value);
-            query.StartIndex = 0;
-            reloadItems(page);
-        });
-
-    }).on('pagebeforeshowready', "#playlistsPage", function () {
-
-        var page = this;
-
-        query.ParentId = LibraryMenu.getTopParentId();
-
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
-        }
-
-        var viewkey = getSavedQueryKey();
-
-        LibraryBrowser.loadSavedQueryValues(viewkey, query);
-
-        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
-
-            if (val) {
-                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
-            } else {
-                reloadItems(page);
-            }
-        });
-
-        updateFilterControls(this);
-
+        reloadItems(page);
     });
 
 })(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/strings/javascript/javascript.json b/dashboard-ui/strings/javascript/javascript.json
index 22a1fd6013..7ce77d61ff 100644
--- a/dashboard-ui/strings/javascript/javascript.json
+++ b/dashboard-ui/strings/javascript/javascript.json
@@ -357,8 +357,8 @@
     "OptionOn": "On",
     "ButtonSettings": "Settings",
     "ButtonUninstall": "Uninstall",
-    "HeaderFields": "Fields",
-    "HeaderFieldsHelp": "Slide a field to 'off' to lock it and prevent it's data from being changed.",
+    "HeaderEnabledFields": "Enabled Fields",
+    "HeaderEnabledFieldsHelp": "Uncheck a field to lock it and prevent it's data from being changed.",
     "HeaderLiveTV": "Live TV",
     "HeaderMediaFolders": "Media Folders",
     "MissingLocalTrailer": "Missing local trailer.",
diff --git a/dashboard-ui/thirdparty/emby-icons.html b/dashboard-ui/thirdparty/emby-icons.html
index 367e8676a0..5ff33c22e5 100644
--- a/dashboard-ui/thirdparty/emby-icons.html
+++ b/dashboard-ui/thirdparty/emby-icons.html
@@ -124,6 +124,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
             <g id="more-horiz"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></g>
             <g id="repeat"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" /></g>
             <g id="repeat-one"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z" /></g>
+            <g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z" /></g>
         </defs>
     </svg>
 </iron-iconset-svg>
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 3511737685..61a9129c2d 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -14260,6 +14260,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         return this.icon || !this.src;
       },
 
+      /** @suppress {visibility} */
       _updateIcon: function() {
         if (this._usesIconset()) {
           if (this._iconsetName) {
@@ -14276,6 +14277,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             this._img = document.createElement('img');
             this._img.style.width = '100%';
             this._img.style.height = '100%';
+            this._img.draggable = false;
           }
           this._img.src = this.src;
           Polymer.dom(this.root).appendChild(this._img);
@@ -18667,6 +18669,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             <g id="more-horiz"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></g>
             <g id="repeat"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"></path></g>
             <g id="repeat-one"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"></path></g>
+            <g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"></path></g>
         </defs>
     </svg>
 </iron-iconset-svg>