From 0e63896f4f53dd51d3d21b99400684b7ce06ace6 Mon Sep 17 00:00:00 2001
From: derv82 <derv82@gmail.com>
Date: Wed, 6 Dec 2017 22:38:35 -0800
Subject: [PATCH] Switch camelCase to dash-case in DOM classes and IDs

---
 popup.html               | 48 +++++++++++++++++------------------
 popup/search-results.css | 51 ++++++++++++++++---------------------
 popup/search-results.js  | 54 ++++++++++++++++++++--------------------
 3 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/popup.html b/popup.html
index 84988f6f..7f77e11c 100644
--- a/popup.html
+++ b/popup.html
@@ -84,34 +84,34 @@
   </template>
 
   <template data-id="searchResult">
-    <div class="searchResult">
-      <img class="searchResult-screenshot" />
-      <h3 class="searchResult-title"></h3>
-      <div class="searchResult-description-group">
-        <div class="searchResult-description"></div>
-        <div class="searchResult-description-info">
+    <div class="search-result">
+      <img class="search-result-screenshot" />
+      <h3 class="search-result-title"></h3>
+      <div class="search-result-description-group">
+        <div class="search-result-description"></div>
+        <div class="search-result-description-info">
           <svg class="svg-icon info" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
           </svg>
         </div>
       </div>
-      <div class="searchResult-author">
+      <div class="search-result-author">
         <label i18n-text="author"></label>
-        <a class="searchResult-authorLink" target="_blank"></a>
+        <a class="search-result-authorLink" target="_blank"></a>
       </div>
-      <div class="searchResult-meta">
-        <div class="searchResult-metaRating">
+      <div class="search-result-meta">
+        <div class="search-result-metaRating">
           <span i18n-text="searchResultRating"></span>:
-          <span class="searchResult-rating"></span>
+          <span class="search-result-rating"></span>
         </div>
-        <div class="searchResult-metaInstallCounts">
+        <div class="search-result-meta-install-count">
           <span i18n-text="searchResultInstallCount"></span>:
-          <span class="searchResult-installCount"></span>
+          <span class="search-result-install-count"></span>
         </div>
       </div>
       <div class="actions">
-        <button class="searchResult-install" i18n-text="installButton"></button>
-        <button class="searchResult-customize hidden"
+        <button class="search-result-install" i18n-text="installButton"></button>
+        <button class="search-result-customize hidden"
                 i18n-text="searchResultCustomize"
                 i18n-title="searchResultCustomizeTooltip"></button>
       </div>
@@ -169,20 +169,20 @@
     </div>
   </div>
   <div class="actions">
-    <div id="searchResults" class="hidden">
+    <div id="search-results" class="hidden">
       <h2>
         <span i18n-text="searchResultsHeader"></span>
-        <span id="searchResults-terms">...</span>
+        <span id="search-results-terms">...</span>
       </h2>
-      <div id="searchResults-list"></div>
-      <div id="searchResultsNav">
-        <button id="searchResultsNav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
+      <div id="search-results-list"></div>
+      <div id="search-results-nav">
+        <button id="search-results-nav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
         <label>
-          <span id="searchResultsNav-currentPage" i18n-title="paginationCurrent">-</span>
+          <span id="search-results-nav-current-page" i18n-title="paginationCurrent">-</span>
           /
-          <span id="searchResultsNav-totalPages" i18n-title="paginationTotal">-</span>
+          <span id="search-results-nav-total-pages" i18n-title="paginationTotal">-</span>
         </label>
-        <button id="searchResultsNav-next" i18n-title="paginationNext" disabled>&#8594;</button>
+        <button id="search-results-nav-next" i18n-title="paginationNext" disabled>&#8594;</button>
       </div>
     </div>
     <div class="left-gutter"></div>
@@ -199,7 +199,7 @@
           </label>
         </span>
       </div>
-      <div id="searchResults-error" class="hidden"></div>
+      <div id="search-results-error" class="hidden"></div>
       <div id="write-style">
         <span id="write-style-for" i18n-text="writeStyleFor"></span>
       </div>
diff --git a/popup/search-results.css b/popup/search-results.css
index da109def..f5cddb10 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -13,7 +13,7 @@ body.search-results-shown {
   display: none !important;
 }
 
-#searchResults-error {
+#search-results-error {
   background-color: rgba(255, 0, 0, 0.4);
   font-weight: bold;
   padding: 5px;
@@ -21,29 +21,25 @@ body.search-results-shown {
   margin-right: 20px;
 }
 
-.searchResult {
+.search-result {
   padding: 5px;
 }
-.searchResult:hover {
+.search-result:hover {
   background-color: rgba(50, 150, 255, 0.5);
 }
-.searchResult.loading {
-  background-color: rgba(90, 90, 90, 0.5);
-  opacity: 0.5;
-}
 
-.searchResult-screenshot {
+.search-result-screenshot {
   max-height: 120px;
   width: 100%;
   object-fit: cover;
 }
 
-.searchResult-title {
+.search-result-title {
   padding: 3px;
   margin: 0;
 }
 
-.searchResult-description {
+.search-result-description {
   width: 90%;
   white-space: nowrap;
   overflow: hidden;
@@ -51,7 +47,7 @@ body.search-results-shown {
   display: inline-block;
 }
 
-.searchResult-description.expanded {
+.search-result-description.expanded {
   width: 100%;
   white-space: pre-wrap;
   overflow: auto;
@@ -59,73 +55,70 @@ body.search-results-shown {
   display: block;
 }
 
-.searchResult-description-info {
+.search-result-description-info {
   display: inline-block;
   cursor: pointer;
   width: 16px;
   height: 14px;
 }
 
-.searchResult-author {
+.search-result-author {
   display: none;
 }
 
-.searchResult-meta {
+.search-result-meta {
   display: table;
   width: 100%;
 }
 
-.searchResult-metaRating, .searchResult-metaInstallCount {
+.search-result-meta-rating, .search-result-meta-install-count {
   display: table-cell;
   text-align: center;
 }
 
-.searchResult-rating {
+.search-result-rating {
   font-weight: 600;
   padding: 1px 2px 1px 2px;
   color: #fff;
 }
-.searchResult-rating.good {
+.search-result-rating.good {
   background-color: darkgreen;
 }
-.searchResult-rating.okay {
+.search-result-rating.okay {
   background-color: darkorange;
 }
-.searchResult-rating.bad {
+.search-result-rating.bad {
   background-color: darkred;
 }
-.searchResult-rating.none {
+.search-result-rating.none {
   background-color: #333;
 }
 
-.searchResult-installCount {
+.search-result-install-count {
   font-weight: 600;
 }
 
-.searchResult-install {
+.search-result-install {
   width: 100%;
 }
-.searchResult-install.customize, .searchResult-customize {
+.search-result-install.customize, .search-result-customize {
   width: 50%;
 }
 
-#searchResultsNav {
+#search-results-nav {
   flex-direction: row;
   text-align: center;
   word-break: keep-all;
   opacity: 1.0;
 }
-#searchResultsNav.loading {
-  opacity: 0.5;
-}
 
-#searchResultsNav label {
+#search-results-nav label {
   width: 40px;
   display: inline-block;
   word-break: keep-all;
 }
 
-#searchResultsNav button {
+#search-results-nav button {
   text-align: center;
 }
 
diff --git a/popup/search-results.js b/popup/search-results.js
index 656a3980..6333fa2d 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -47,8 +47,8 @@
     return {init, load, next, prev};
 
     function init() {
-      $('#searchResultsNav-prev').onclick = prev;
-      $('#searchResultsNav-next').onclick = next;
+      $('#search-results-nav-prev').onclick = prev;
+      $('#search-results-nav-next').onclick = next;
       document.body.classList.add('search-results-shown');
       window.scrollTo(0, 0);
     }
@@ -65,20 +65,20 @@
 
         if (isLoading) {
           // Show spinner
-          $('#searchResults').appendChild(
+          $('#search-results').appendChild(
             $create(
               '.lds-spinner',
               new Array(12).fill($create('div')).map(e => e.cloneNode()))
           );
         } else {
           // Hide spinner
-          $.remove('#searchResults > .lds-spinner');
+          $.remove('#search-results > .lds-spinner');
         }
       }
     }
 
     function render() {
-      $('#searchResults-list').textContent = ''; // Clear search results
+      $('#search-results-list').textContent = ''; // Clear search results
 
       const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
       const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
@@ -87,8 +87,8 @@
         createSearchResultNode(resultToDisplay);
       });
 
-      $('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1 || loading);
-      $('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
+      $('#search-results-nav-prev').disabled = (currentDisplayedPage <= 1 || loading);
+      $('#search-results-nav-current-page').textContent = currentDisplayedPage;
 
       let totalResultsCount = processedResults.length;
       if (unprocessedResults.length > 0) {
@@ -96,8 +96,8 @@
         totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
       }
       const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
-      $('#searchResultsNav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
-      $('#searchResultsNav-totalPages').textContent = totalPageCount;
+      $('#search-results-nav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
+      $('#search-results-nav-total-pages').textContent = totalPageCount;
     }
 
     /**
@@ -143,9 +143,9 @@
       } else {
         message = 'Error loading search results: ' + reason;
       }
-      $('#searchResults').classList.add('hidden');
-      $('#searchResults-error').textContent = message;
-      $('#searchResults-error').classList.remove('hidden');
+      $('#search-results').classList.add('hidden');
+      $('#search-results-error').textContent = message;
+      $('#search-results-error').classList.remove('hidden');
     }
 
     /**
@@ -161,13 +161,13 @@
       } else {
         setLoading(true);
         // Search for more results.
-        $('#searchResults').classList.remove('hidden');
-        $('#searchResults-error').classList.add('hidden');
+        $('#search-results').classList.remove('hidden');
+        $('#search-results-error').classList.add('hidden');
 
         // Discover current tab's URL & the "category" for the URL, then search.
         getActiveTab().then(tab => {
           category = searchAPI.getCategory(tab.url);
-          $('#searchResults-terms').textContent = category;
+          $('#search-results-terms').textContent = category;
           searchAPI.search(category)
             .then(searchResults => {
               if (searchResults.data.length === 0) {
@@ -290,19 +290,19 @@
 
       const entry = template.searchResult.cloneNode(true);
       Object.assign(entry, {
-        id: 'searchResult-' + userstyleSearchResult.id,
+        id: 'search-result-' + userstyleSearchResult.id,
         onclick: handleEvent.openURLandHide
       });
       entry.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
-      $('#searchResults-list').appendChild(entry);
+      $('#search-results-list').appendChild(entry);
 
       const searchResultName = userstyleSearchResult.name;
-      const title = $('.searchResult-title', entry);
+      const title = $('.search-result-title', entry);
       Object.assign(title, {
         textContent: searchResultName
       });
 
-      const screenshot = $('.searchResult-screenshot', entry);
+      const screenshot = $('.search-result-screenshot', entry);
       let screenshotUrl = userstyleSearchResult.screenshot_url;
       if (screenshotUrl === null) {
         screenshotUrl = BLANK_PIXEL_DATA;
@@ -315,11 +315,11 @@
         title: searchResultName
       });
 
-      const description = $('.searchResult-description', entry);
+      const description = $('.search-result-description', entry);
       Object.assign(description, {
         textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1')
       });
-      const descriptionExpand = $('.searchResult-description-info', entry);
+      const descriptionExpand = $('.search-result-description-info', entry);
       Object.assign(descriptionExpand, {
         onclick: e => {
           e.stopPropagation();
@@ -328,7 +328,7 @@
         }
       });
 
-      const authorLink = $('.searchResult-authorLink', entry);
+      const authorLink = $('.search-result-authorLink', entry);
       Object.assign(authorLink, {
         textContent: userstyleSearchResult.user.name,
         title: userstyleSearchResult.user.name,
@@ -336,7 +336,7 @@
         onclick: handleEvent.openURLandHide
       });
 
-      const rating = $('.searchResult-rating', entry);
+      const rating = $('.search-result-rating', entry);
       let ratingClass;
       let ratingValue = userstyleSearchResult.rating;
       if (ratingValue === null) {
@@ -354,21 +354,21 @@
       }
       Object.assign(rating, {
         textContent: ratingValue,
-        className: 'searchResult-rating ' + ratingClass
+        className: 'search-result-rating ' + ratingClass
       });
 
-      const installCount = $('.searchResult-installCount', entry);
+      const installCount = $('.search-result-install-count', entry);
       Object.assign(installCount, {
         textContent: userstyleSearchResult.total_install_count.toLocaleString()
       });
 
-      const installButton = $('.searchResult-install', entry);
+      const installButton = $('.search-result-install', entry);
       installButton.onclick = install;
 
       if (userstyleSearchResult.style_settings.length > 0) {
         // Style has customizations
         installButton.classList.add('customize');
-        const customizeButton = $('.searchResult-customize', entry);
+        const customizeButton = $('.search-result-customize', entry);
         customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
         customizeButton.classList.remove('hidden');
         customizeButton.onclick = event => {