Reworking select-all and default setting selection, + other styling, fixes, and cleanup

content-search-filtering.js

@@ -95,13 +95,18 @@ function insertCSS() {
     .iwb-notice button:hover {
       outline: 1px solid !important;
     }
-    .iwb-new-link {
+    .iwb-new-link-container {
       display: inline-block;
       font-size: 12px !important;
       text-decoration: none;
       padding-left: 5px;
       position: relative;
     }
+    .iwb-new-link {
+      display: inline-block;
+      text-decoration: none;
+      position: relative;
+    }
     .iwb-new-link:hover {
       text-decoration: none;
       z-index: 9999999;
@@ -145,20 +150,30 @@ function insertCSS() {
       text-decoration: line-through !important;
     }
 
-    .iwb-enable-result {
+    .iwb-result-controls {
-      display: none;
+      display: inline-block;
-      padding: 2px 8px;
+      margin: .5em;
-      margin: 2px 8px;
-      cursor: pointer;
       font-size: 12px;
       color: white !important;
-      border: 1px solid white;
-      border-radius: 10px;
       mix-blend-mode: difference !important;
     }
-    .iwb-disavow .iwb-enable-result {
+    .iwb-result-controls > div {
       display: inline-block;
+      cursor: pointer;
+      text-decoration: underline;
+      text-decoration-style: dotted;
+      text-decoration-thickness: 1px;
+      padding: 0 1em;
     }
+
+    .iwb-notice .iwb-result-controls {
+      margin: 8px 0 0 0;
+    }
+    .iwb-notice .iwb-result-controls > div{
+      padding: .5em 1em 0 0;
+    }
+
+    
   `
   style = document.createElement('style');
   style.classList.add('iwb-styles');
@@ -192,25 +207,27 @@ function replaceSearchResults(searchResultContainer, site, link) {
         searchParams = 'start?do=search&q=' + article;
         break;
     }
-    newURL = 'https://' + site["destination_base_url"] + site["destination_content_path"] + searchParams;
+    newURL = 'https://' + site['destination_base_url'] + site['destination_content_path'] + searchParams;
   } else {
-    newURL = 'https://' + site["destination_base_url"];
+    newURL = 'https://' + site['destination_base_url'];
   }
 
   if (searchResultContainer && !searchResultContainer.classList.contains('iwb-detected')) {
     searchResultContainer.classList.add('iwb-detected');
-    var indieResultLink = document.createElement('a');
+    let indieContainer = document.createElement('div');
+    indieContainer.classList.add('iwb-new-link-container');
+    let indieResultLink = document.createElement('a');
     indieResultLink.href = newURL;
     indieResultLink.classList.add('iwb-new-link');
-    var indieResultButton = document.createElement('button');
+    let indieResultButton = document.createElement('button');
-    var indieResultFaviconContainer = document.createElement('div');
+    let indieResultFaviconContainer = document.createElement('div');
-    var indieResultFavicon = document.createElement('img');
+    let indieResultFavicon = document.createElement('img');
     indieResultFavicon.alt = '';
     indieResultFavicon.width = '12';
     indieResultFavicon.height = '12';
     indieResultFavicon.src = chrome.runtime.getURL('favicons/' + site.lang.toLowerCase() + '/' + site.destination_icon);
     indieResultFaviconContainer.append(indieResultFavicon);
-    var indieResultText = document.createElement('span');
+    let indieResultText = document.createElement('span');
     if (article) {
       indieResultText.innerText = 'Look up "' + decodeURIComponent(decodeURIComponent(article.replaceAll('_', ' '))) + '" on ' + site.destination;
     } else {
@@ -219,17 +236,24 @@ function replaceSearchResults(searchResultContainer, site, link) {
     indieResultButton.append(indieResultFaviconContainer);
     indieResultButton.append(indieResultText);
     indieResultLink.appendChild(indieResultButton);
+    indieContainer.appendChild(indieResultLink);
+
+    // Output container for result controls:
+    let resultControls = document.createElement('div');
+    resultControls.classList.add('iwb-result-controls');
 
     // Output link to re-enable disabled result:
-    enableResult = document.createElement('div');
+    let enableResultButton = document.createElement('div');
-    enableResult.classList.add('iwb-enable-result');
+    enableResultButton.innerText = 'Re-enable the result below';
-    enableResult.innerText = 'Re-enable original result';
+    resultControls.prepend(enableResultButton);
-    enableResult.addEventListener('click', function (e) {
+    enableResultButton.addEventListener('click', function (e) {
       e.target.closest('.iwb-disavow').classList.remove('iwb-disavow');
+      e.target.classList.add('iwb-hide');
     });
 
-    searchResultContainer.prepend(enableResult);
+    indieContainer.appendChild(indieResultLink);
-    searchResultContainer.prepend(indieResultLink);
+    indieContainer.appendChild(resultControls);
+    searchResultContainer.prepend(indieContainer);
     searchResultContainer.classList.add('iwb-disavow');
     countFiltered++;
   }
@@ -259,12 +283,15 @@ function hideSearchResults(searchResultContainer, searchEngine, site) {
     searchRemovalNotice.appendChild(searchRemovalNoticePosttext);
     searchRemovalNotice.appendChild(linebreak);
 
-    // Output "show results" button
+    // Output container for result controls:
-    let showResultsButton = document.createElement('button');
+    let resultControls = document.createElement('div');
-    showResultsButton.classList.add('iwb-show-results-button');
+    resultControls.classList.add('iwb-result-controls');
+
+    // Output link to show hidden results:
+    let showResultsButton = document.createElement('div');
     showResultsButton.setAttribute('data-group', 'iwb-search-result-' + elementId);
-    showResultsButton.textContent = 'Show filtered results';
+    showResultsButton.innerText = 'Show filtered results';
-    searchRemovalNotice.appendChild(showResultsButton);
+    resultControls.appendChild(showResultsButton)
     showResultsButton.onclick = function (e) {
       if (e.target.textContent.includes('Show')) {
         e.target.textContent = 'Re-hide filtered results';
@@ -283,27 +310,7 @@ function hideSearchResults(searchResultContainer, searchEngine, site) {
       }
     }
  
-    // Output "disable filtering" button
+    searchRemovalNotice.appendChild(resultControls);
-    let disableFilterButton = document.createElement('button');
-    disableFilterButton.classList.add('iwb-disable-filtering-button');
-    disableFilterButton.textContent = 'Stop filtering ' + site.origin_group + ' in future searches';
-    disableFilterButton.style.border = '1px solid';
-    searchRemovalNotice.appendChild(disableFilterButton);
-    disableFilterButton.onclick = function (e) {
-      if (e.target.textContent.includes('Stop')) {
-        chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
-          response.searchEngineSettings.get(site.id).set('action', 'disabled');
-          chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
-          e.target.textContent = 'Re-enable filtering for ' + site.origin_group;
-        })
-      } else {
-        chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
-          response.searchEngineSettings.get(site.id).set('action', 'hide');
-          chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
-          e.target.textContent = 'Stop filtering ' + site.origin_group + ' in future searches';
-        })
-      }
-    }
 
     switch (searchEngine) {
       case 'google':

guide.html

@@ -142,12 +142,7 @@
         <h2>Individual wiki settings help</h2>
         <p>
           In the individual settings section, you can configure your settings per-wiki.
-          <br />
+          You can refer to the legend or hover over the icons to learn what each column controls.
-          <br />
-          The "Default settings for future wikis" options let you set the default behavior for wikis added to Indie Wiki Buddy in the future.
-          <br />
-          <br />
-          Below that is a list of all supported wikis. You can select what happens whenever you visit each listed non-indie wiki.
         </p>
         <p>
           The first set of radio buttons controls what happens when you visit the listed non-indie wikis.
@@ -187,9 +182,9 @@
           </li>
         </ul>
         <p>
+          In the table header, clicking on the icons will apply that setting to all wikis in the table.
+          In the second row, the stars represent the default settings for wikis that are added in future updates.
           By default, all wikis will be set to alert, with search engine replacement enabled.
-          You can quickly change the settings for all wikis in the current language view by using the control
-          buttons above the list of wikis.
         </p>
         <h2>Have questions or feedback?</h2>
         <p>

popup.html

@@ -86,8 +86,8 @@
         padding: 1em;
         display: none;
       }
-      #notificationBannerContainer span[style*="display: block"] + span[style*="display: block"]{
+      #notificationBannerContainer span ~ span[style] {
-        border-top: 1px solid #000;
+        border-top: 1px solid #005799;
       }
 
       /* POWER TOGGLE */

settings.html

@@ -7,24 +7,6 @@
   <link rel="icon" href="images/logo.png" />
   <title>Indie Wiki Buddy settings</title>
   <style>
-    #togglesKey > div {
-      position: relative;
-    }
-
-    #togglesKey > div:hover::after {
-      content: attr(data-title);
-      padding: 5px;
-      width: fit-content;
-      border: 1px solid #000;
-      position: absolute;
-      color: #fff;
-      background: #000;
-      z-index: 999999;
-      transform: translateX(calc(-100% - 24px));
-      opacity: 80%;
-      top: 30px;
-    }
-
     /* ELEMENTS */
     body {
       max-width: 700px;
@@ -84,18 +66,34 @@
     }
 
     fieldset>span {
-      margin: .4rem .8rem 0;
+      margin: .8rem 0 .4rem;
       display: block;
     }
 
     legend {
-      margin-left: .5rem;
+      font-weight: 600;
     }
 
+    /* CONTAINERS AND LAYOUT */ 
     .container {
       background: #fff;
     }
 
+    .two-col {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1em;
+      padding-bottom: .5rem;
+    }
+    .two-col>div {
+      flex: 1;
+    }
+    @media (max-width: 600px) {
+      .two-col>div {
+        flex: 100%;
+      }
+    }
+
     /* HEADER */
     #header {
       line-height: 1.5rem;
@@ -155,13 +153,15 @@
       font-size: .9em;
       line-height: 1.3em;
     }
-
     #notificationBannerContainer span {
       padding: .5rem 1rem;
       display: none;
     }
+    #notificationBannerContainer span ~ span[style] {
+      border-top: 1px solid #005799;
+    }
 
-    /* GLOBAL SETTINGS SECTION */
+    /* SETTINGS SECTION */
     .options {
       box-sizing: border-box;
       padding-bottom: .5rem;
@@ -169,34 +169,6 @@
       width: 100%;
     }
 
-    /* GLOBAL SETTING TOGGLES */
-    #power input {
-      height: 0;
-      width: 0;
-      margin: 0;
-      border: none;
-      appearance: none;
-    }
-
-    #power img {
-      margin-left: -8px;
-    }
-
-    .two-col {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1em;
-      padding-bottom: .5rem;
-    }
-    .two-col>div {
-      flex: 1;
-    }
-    @media (max-width: 600px) {
-      .two-col>div {
-        flex: 100%;
-      }
-    }
-
     .settingToggle {
       cursor: pointer;
       width: fit-content;
@@ -224,37 +196,14 @@
       cursor: default;
     }
 
-    /* WIKI CONTROLS */
+    #legend {
-    #wikiControls {
-      margin: 0 auto;
-      padding-bottom: .5rem;
-    }
-
-    #wikiControls button {
-      background: #ffffff;
-      border: 1px solid #333333;
-      color: #333333;
-      border-radius: 5px;
-      padding: 3px 5px;
-      margin: 3px 5px;
-    }
-
-    #wikiControls button:hover {
-      cursor: pointer;
-      background: #005799;
-      border: 1px solid#005799;
-      color: #ffffff;
-    }
-
-    #wikiControls button:hover img {
-      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(100%);
-    }
-
-    #individualWikiSettings {
       text-align: center;
     }
-    #individualWikiSettings legend {
+
-      text-align: left;
+    #legend div {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
     }
 
     #langSelectContainer {
@@ -267,31 +216,132 @@
       white-space: nowrap;
       position: relative;
     }
-
+    .toggles img {
+      line-height: 1.2rem;
+    }
+    .toggles a img {
+      padding-right: .5rem;
+    }
+    .toggles span {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     .toggles label {
       display: flex;
       align-items: center;
     }
-
-    .toggles>div:hover {
-      background-color: #e8f0fe;
-    }
-
     .toggles input {
       cursor: pointer;
       margin: 0;
     }
-
     .toggles>div {
       line-height: 2rem;
       display: flex;
       flex-direction: row;
-      padding: 0 1rem;
+      padding: 0 .5rem;
     }
-
     .toggles .inputsContainer {
       display: flex;
       float: right;
+      width: 150px;
+      justify-content: space-between;
+    }
+
+    .togglesHeader {
+      border-bottom: 1px solid #ccc;
+      background-color: #f5fbff;
+    }
+    .togglesHeader span {
+      text-align: right;
+      font-style: italic;
+      margin-right: 1em;
+    }
+    .togglesHeader img {
+      cursor: pointer;
+    }
+    .togglesHeader .inputsContainer img {
+      width: auto;
+      max-width: 17px;
+      height: auto;
+      max-height: 18px;
+      vertical-align: middle;
+    }
+
+    .togglesHeader .inputsContainer>div:nth-child(4),
+    .toggles>div>div>label:nth-child(4) {
+      padding-left: 5px;
+      border-left: 1px solid #ccc;
+    }
+
+    #toggles>div:hover {
+      background-color: #e8f0fe;
+    }
+
+    #togglesKeys {
+      position: sticky;
+      top: 0;
+      z-index: 999;
+    }
+    #togglesKeys button {
+      all: unset;
+      height: 18px;
+      display: block;
+    }
+    #togglesKeys button:focus {
+      outline: revert;
+    }
+    #togglesKeys .inputsContainer>div {
+      position: relative;
+    }
+
+    #togglesDefaults input[type=radio] {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    #togglesDefaults input+label {
+      width: 100%;
+      height: 100%;
+      background-image: url('images/star-off.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 18px;
+    }
+    #togglesDefaults input:checked+label {
+      background-image: url('images/star-on.png');
+    }
+    #togglesDefaults label {
+      cursor: pointer;
+    }
+
+    #togglesKeys .inputsContainer button:hover::after,
+    #togglesDefaults .inputsContainer label:hover::after {
+      content: attr(data-title);
+      padding: 5px;
+      width: fit-content;
+      border: 1px solid #000;
+      position: absolute;
+      color: #fff;
+      background: #000;
+      z-index: 999999;
+      transform: translateX(calc(-100% - 24px));
+      top: 30px;
+    }
+
+    #togglesColumnLabels>div>div {
+      display: flex;
+      width: 150px;
+    }
+    #togglesColumnLabels>div>div>div {
+      flex: 1 1 0;
+      font-weight: 600;
+      font-size: .9em;
+      white-space: break-spaces;
+      line-height: initial;
+      text-align: center;
     }
 
     .inputsContainer>label,
@@ -301,45 +351,9 @@
       text-align: center;
     }
 
-    #togglesKey img {
+    .inputsContainer label:nth-child(1) input,
-      width: auto;
+    .inputsContainer label:nth-child(4) input {
-      max-width: 17px;
+      accent-color: #bc3c3c;
-      height: auto;
-      max-height: 18px;
-      vertical-align: middle;
-    }
-
-    .toggles img {
-      line-height: 1.2rem;
-    }
-
-    .toggles a img {
-      padding-right: .5rem;
-    }
-
-    .toggles span {
-      flex-grow: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    #defaultToggles {
-      border-bottom: 1px solid #ccc;
-      background-color: #f5fbff;
-      position: sticky;
-      top: 0;
-      z-index: 999;
-    }
-
-    #togglesKey>div:nth-child(3),
-    .toggles>div>div>label:nth-child(3) {
-      padding-right: .4rem;
-    }
-
-    #togglesKey>div:nth-child(4),
-    .toggles>div>div>label:nth-child(4) {
-      padding-left: .4rem;
-      border-left: 1px solid #333;
     }
 
     /* CONTROL CLASSES */
@@ -414,20 +428,21 @@
         Use the links above to see the full guide, submit new wikis, or contact the developer.
         <br /><br />
         In the settings below, you can toggle features on and off.
-        By default, search engine filtering and notifications when you are redirected are turned on.
+        This includes the option to enable <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>,
-        You can also turn on <a href="https://breezewiki.com/" target="_blank">BreezeWiki</a>, which will render Fandom
+        an alternative frontend that renders Fandom wikis without ads or bloat.
-        wikis without ads or bloat.
         <br /><br />
         Below that, you can configure what happens when you visit each Fandom and Fextralife wiki that has an
-        independent alternative.
+        independent alternative, as well as what happens to their results in search engines.
-        This includes whether you want to be
+        For visiting wikis, you can choose to be
         <img src="images/toggle-alert.png" width="12" alt="" /> alerted (default)
         or
         <img src="images/toggle-redirect.png" width="12" alt="" />
         automatically redirected.
-        You can also toggle whether you want to
+        On search engines, you can choose to 
-        <img src="images/toggle-search-filter.png" width="12" alt="" />
+        <img src="images/toggle-replace.png" width="12" alt="" /> replace (default)
-        filter the non-indie wikis from search engines (on by default).
+        or
+        <img src="images/toggle-hide.png" width="12" alt="" /> hide
+        search results.
         <br /><br />
         You can access these settings in the future via the extension's icon
         <img src="./images/logo-32.png" width="15" alt="icon of an arrow pointing to the right" />
@@ -471,144 +486,138 @@
             <select name="breezewikiHost" id="breezewikiHostSelect"></select>
           </div>
         </fieldset>
-        <div id="wikiControls">
+        <h2>Individual wiki settings</h2>
-          <h2>Individual wiki settings</h2>
+        <fieldset id="legend">
-          <fieldset id="defaultBehaviorSettings">
+          <legend>
-            <legend>
+            Legend
-              <span aria-hidden="true">📥</span> Default settings for future wikis
+          </legend>
-            </legend>
+          <span class="text-sm">When visiting a Fandom or Fextralife wiki that has an independent alternative, Indie
-            <div class="two-col">
+            Wiki Buddy can:</span>
-              <div>
+          <div>
-                <span class="text-sm">When visiting a Fandom or Fextralife wiki:</span>
+            <img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
-                <div class="settingToggle">
-                  <label for="defaultWikiActionDisabledRadio">
-                    <input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled" />
-                    <span id="defaultWikiActionDisabledText">
-                      <img src="images/toggle-disabled.png" width="16" alt="" /> Do nothing
-                    </span>
-                  </label>
-                </div>
-                <div class="settingToggle">
-                  <label for="defaultWikiActionRedirectRadio">
-                    <input id="defaultWikiActionRedirectRadio" type="radio" name="defaultWikiAction" value="redirect" />
-                    <span id="defaultWikiActionRedirectText">
-                      <img src="images/toggle-redirect.png" width="16" alt="" /> Redirect to indie wiki
-                    </span>
-                  </label>
-                </div>
-                <div class="settingToggle">
-                  <label for="defaultWikiActionAlertRadio">
-                    <input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert" />
-                    <span id="defaultWikiActionAlertText">
-                      <img src="images/toggle-alert.png" width="16" alt="" /> Display banner linking to indie wiki
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div>
-                <span class="text-sm">When using search engines:</span>
-                <div class="settingToggle">
-                  <label for="defaultSearchActionDisabledRadio">
-                    <input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction"
-                      value="disabled" />
-                    <span id="defaultSearchActionDisabledText">
-                      <img src="images/toggle-disabled.png" width="16" alt="" /> Do nothing
-                    </span>
-                  </label>
-                </div>
-                <div class="settingToggle">
-                  <label for="defaultSearchActionHideRadio">
-                    <input id="defaultSearchActionHideRadio" type="radio" name="defaultSearchAction" value="hide" />
-                    <span id="defaultSearchActionHideText">
-                      <img src="images/toggle-hide.png" width="16" alt="" /> Hide non-indie results
-                    </span>
-                  </label>
-                </div>
-                <div class="settingToggle">
-                  <label for="defaultSearchActionReplaceRadio">
-                    <input id="defaultSearchActionReplaceRadio" type="radio" name="defaultSearchAction"
-                      value="replace" />
-                    <span id="defaultSearchActionReplaceText">
-                      <img src="images/toggle-replace.png" width="16" alt="" /> Replace non-indie results
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <span class="text-sm">Tip: These settings are for wikis added in the future. To change settings for current wikis, use the settings below.</span>
-          </fieldset>
-          <fieldset id="individualWikiSettings">
-            <legend>
-              <span aria-hidden="true">🎛</span>
-              Change settings for all wikis displayed below
-            </legend>
-            <span class="text-sm">When visiting a Fandom or Fextralife wiki:</span>
-            <button id="setAllDisabled" type="button">
-              <img src="images/toggle-disabled.png" width="12" height="12" alt="" /> Do nothing
-            </button>
-            <button id="setAllRedirect" type="button">
-              <img src="images/toggle-redirect.png" width="12" height="12" alt="" /> Redirect to
-              indie wiki
-            </button>
-            <button id="setAllAlert" type="button">
-              <img src="images/toggle-alert.png" width="12" height="12" alt="" /> Display banner
-              linking to indie wiki
-            </button>
-            <br />
-            <span class="text-sm">When using search engines:</span>
-            <button id="setAllSearchEngineDisabled" type="button">
-              <img src="images/toggle-search-filter.png" width="12" height="12" alt="" /> Do nothing
-            </button>
-            <button id="setAllSearchEngineHide" type="button">
-              <img src="images/toggle-hide.png" width="12" height="12" alt="" /> Hide non-indie results
-            </button>
-            <button id="setAllSearchEngineReplace" type="button">
-              <img src="images/toggle-replace.png" width="12" height="12" alt="" /> Replace non-indie results
-            </button>
-          </fieldset>
-          <div id="langSelectContainer">
-            Filter wikis by language:&nbsp;
-            <select name="lang" id="langSelect">
-              <option value="ALL" selected>All languages</option>
-              <option value="DE">Deutsch (DE)</option>
-              <option value="EN">English (EN)</option>
-              <option value="ES">Español (ES)</option>
-              <option value="FR">Français (FR)</option>
-              <option value="IT">Italiano (IT)</option>
-              <option value="PL">Polski (PL)</option>
-              <option value="TOK">Toki Pona (TOK)</option>
-            </select>
           </div>
+          <div>
+            <img src="images/toggle-alert.png" width="18" height="18" alt="" /> Display a banner
+            linking to indie wiki
+          </div>
+          <div>
+            <img src="images/toggle-redirect.png" width="18" height="18" alt="" /> Redirect to
+            indie wiki
+          </div>
+          <br />
+          <span class="text-sm">When using search engines, Indie Wiki Buddy can:</span>
+          <div>
+            <img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
+          </div>
+          <div>
+            <img src="images/toggle-replace.png" width="18" height="18" alt="" /> Replace non-indie results with links
+            to indie wikis
+          </div>
+          <div>
+            <img src="images/toggle-hide.png" width="18" height="18" alt="" /> Hide non-indie results when an
+            indie wiki is avialable
+          </div>
+        </fieldset>
+        <div id="langSelectContainer">
+          Filter wikis by language:&nbsp;
+          <select name="lang" id="langSelect">
+            <option value="ALL" selected>All languages</option>
+            <option value="DE">Deutsch (DE)</option>
+            <option value="EN">English (EN)</option>
+            <option value="ES">Español (ES)</option>
+            <option value="FR">Français (FR)</option>
+            <option value="IT">Italiano (IT)</option>
+            <option value="PL">Polski (PL)</option>
+            <option value="TOK">Toki Pona (TOK)</option>
+          </select>
         </div>
-        <div id="defaultToggles" class="toggles">
+        <div id="togglesColumnLabels" class="toggles">
           <div>
             <span></span>
-            <div id="togglesKey" class="inputsContainer">
+            <div>
-              <div data-title="Do nothing when visiting non-indie wiki">
+              <div>Wiki experience</div>
-                <img src="images/toggle-disabled.png" width="15" alt="Do nothing" />
+              <div>Search experience</div>
+            </div>
+          </div>
+        </div>
+        <div id="togglesKeys" class="toggles togglesHeader">
+          <div>
+            <span>Click icon to set all wikis in column:</span>
+            <div class="inputsContainer">
+              <div>
+                <button id="setAllDisabled" type="button" data-title="Do nothing when visiting non-indie wiki">
+                  <img src="images/toggle-disabled.png" width="18" alt="" />
+                </button>
               </div>
-              <div data-title="Automatically redirect to indie wiki">
+              <div>
-                <img src="images/toggle-redirect.png" width="15" alt="Automatically redirect to indie wiki" />
+                <button id="setAllAlert" type="button" data-title="Show banner when indie wiki is available">
+                  <img src="images/toggle-alert.png" width="18" alt="" />
+                </button>
               </div>
-              <div data-title="Show banner when indie wiki is available">
+              <div>
-                <img src="images/toggle-alert.png" width="15"
+                <button id="setAllRedirect" type="button" data-title="Automatically redirect to indie wiki">
-                  alt="Show banner when indie wiki is available" />
+                  <img src="images/toggle-redirect.png" width="18" alt="Automatically redirect to indie wiki" />
+                </button>
               </div>
-              <div data-title="Do nothing on search engines">
+              <div>
-                <img src="images/toggle-search-filter.png" width="15" alt="Do nothing" />
+                <button id="setAllSearchEngineDisabled" type="button" data-title="Do nothing on search engines">
+                  <img src="images/toggle-disabled.png" width="18" alt="" />
+                </button>
               </div>
-              <div data-title="Hide non-indie wiki from search results">
+              <div>
-                <img src="images/toggle-hide.png" width="15" alt="Hide non-indie wiki from search results" />
+                <button id="setAllSearchEngineReplace" type="button" data-title="Replace non-indie search results">
+                  <img src="images/toggle-replace.png" width="18" alt="" />
+                </button>
               </div>
-              <div data-title="Replace non-indie search results">
+              <div>
-                <img src="images/toggle-replace.png" width="15" alt="Replace non-indie search results" />
+                <button id="setAllSearchEngineHide" type="button" data-title="Hide non-indie wiki from search results">
+                  <img src="images/toggle-hide.png" width="18" alt="" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="togglesDefaults" class="toggles togglesHeader">
+          <div>
+            <span>Default for new wikis in future updates:</span>
+            <div class="inputsContainer">
+              <div>
+                <input id="defaultWikiActionDisabledRadio" type="radio" name="defaultWikiAction" value="disabled"
+                  title="Do nothing" />
+                <label data-title="Do nothing when visiting non-indie wiki"
+                  for="defaultWikiActionDisabledRadio"></label>
+              </div>
+              <div>
+                <input id="defaultWikiActionAlertRadio" type="radio" name="defaultWikiAction" value="alert"
+                  title="Display a banner linking to indie wiki" />
+                <label data-title="Show banner when indie wiki is available" for="defaultWikiActionAlertRadio"></label>
+              </div>
+              <div>
+                <input id="defaultWikiActionRedirectRadio" type="radio" name="defaultWikiAction" value="redirect"
+                  title="Redirect to indie wiki" />
+                <label data-title="Automatically redirect to indie wiki" for="defaultWikiActionRedirectRadio"></label>
+              </div>
+              <div>
+                <input id="defaultSearchActionDisabledRadio" type="radio" name="defaultSearchAction" value="disabled"
+                  title="Do nothing" />
+                <label data-title="Do nothing on search engines" for="defaultSearchActionDisabledRadio"></label>
+              </div>
+              <div>
+                <input id="defaultSearchActionReplaceRadio" type="radio" name="defaultSearchAction" value="replace"
+                  title="Replace non-indie results" />
+                <label data-title="Replace non-indie search results" for="defaultSearchActionReplaceRadio"></label>
+              </div>
+              <div>
+                <input id="defaultSearchActionHideRadio" type="radio" name="defaultSearchAction" value="hide"
+                  title="Hide non-indie results" />
+                <label data-title="Hide non-indie wiki from search results" for="defaultSearchActionHideRadio"></label>
               </div>
             </div>
           </div>
         </div>
         <div id="toggles" class="toggles"></div>
       </form>
-      <br />
+      <hr />
       <div id="footer">
         <h2>Fun Stats</h2>
         Alerted to indie wikis <span id="countAlerts"></span> times

settings.js

@@ -200,16 +200,6 @@ async function loadOptions(lang) {
           inputDisabled.lang = sites[i].language;
           inputDisabled.setAttribute('data-wiki-key', key);
 
-          // Create radio for redirecting wiki:
-          let labelRedirect = document.createElement("label");
-          let inputRedirect = document.createElement("input");
-          inputRedirect.classList = 'toggleRedirect';
-          inputRedirect.type = "radio";
-          inputRedirect.name = key + '-wiki-action';
-          inputRedirect.title = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
-          inputRedirect.lang = sites[i].language;
-          inputRedirect.setAttribute('data-wiki-key', key);
-
           // Create radio for inserting banner on wiki:
           let labelAlert = document.createElement("label");
           let inputAlert = document.createElement("input");
@@ -220,6 +210,16 @@ async function loadOptions(lang) {
           inputAlert.lang = sites[i].language;
           inputAlert.setAttribute('data-wiki-key', key);
 
+          // Create radio for redirecting wiki:
+          let labelRedirect = document.createElement("label");
+          let inputRedirect = document.createElement("input");
+          inputRedirect.classList = 'toggleRedirect';
+          inputRedirect.type = "radio";
+          inputRedirect.name = key + '-wiki-action';
+          inputRedirect.title = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
+          inputRedirect.lang = sites[i].language;
+          inputRedirect.setAttribute('data-wiki-key', key);
+          
           // Create radio for disabling action on search engines:
           let labelSearchEngineDisabled = document.createElement("label");
           let inputSearchEngineDisabled = document.createElement("input");
@@ -230,16 +230,6 @@ async function loadOptions(lang) {
           inputSearchEngineDisabled.lang = sites[i].language;
           inputSearchEngineDisabled.setAttribute('data-wiki-key', key);
 
-          // Create radio for hiding results on search engines:
-          let labelSearchEngineHide = document.createElement("label");
-          let inputSearchEngineHide = document.createElement("input");
-          inputSearchEngineHide.classList = 'toggleSearchEngineHide';
-          inputSearchEngineHide.type = "radio";
-          inputSearchEngineHide.name = key + '-search-engine-action';
-          inputSearchEngineHide.title = 'Hide ' + sites[i].origins_label + ' from search engine results';
-          inputSearchEngineHide.lang = sites[i].language;
-          inputSearchEngineHide.setAttribute('data-wiki-key', key);
-
           // Create radio for replacing results on search engines:
           let labelSearchEngineReplace = document.createElement("label");
           let inputSearchEngineReplace = document.createElement("input");
@@ -250,6 +240,16 @@ async function loadOptions(lang) {
           inputSearchEngineReplace.lang = sites[i].language;
           inputSearchEngineReplace.setAttribute('data-wiki-key', key);
 
+          // Create radio for hiding results on search engines:
+          let labelSearchEngineHide = document.createElement("label");
+          let inputSearchEngineHide = document.createElement("input");
+          inputSearchEngineHide.classList = 'toggleSearchEngineHide';
+          inputSearchEngineHide.type = "radio";
+          inputSearchEngineHide.name = key + '-search-engine-action';
+          inputSearchEngineHide.title = 'Hide ' + sites[i].origins_label + ' from search engine results';
+          inputSearchEngineHide.lang = sites[i].language;
+          inputSearchEngineHide.setAttribute('data-wiki-key', key);          
+
           // Check radio buttons based on user's settings
           if (siteSettings[key] && siteSettings[key].action) {
             if (siteSettings[key].action === 'disabled') {
@@ -298,10 +298,10 @@ async function loadOptions(lang) {
           }
 
           // Add listeners for when user clicks control:
-          inputRedirect.addEventListener('click', function (input) {
+          inputDisabled.addEventListener('click', function (input) {
             chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
               var key = input.target.getAttribute('data-wiki-key');
-              response.siteSettings.get(key).set('action', 'redirect');
+              response.siteSettings.get(key).set('action', 'disabled');
               chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
             });
           });
@@ -312,10 +312,10 @@ async function loadOptions(lang) {
               chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
             });
           });
-          inputDisabled.addEventListener('click', function (input) {
+          inputRedirect.addEventListener('click', function (input) {
             chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
               var key = input.target.getAttribute('data-wiki-key');
-              response.siteSettings.get(key).set('action', 'disabled');
+              response.siteSettings.get(key).set('action', 'redirect');
               chrome.storage.sync.set({ 'siteSettings': response.siteSettings });
             });
           });
@@ -326,13 +326,6 @@ async function loadOptions(lang) {
               chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
             });
           });
-          inputSearchEngineHide.addEventListener('click', function (input) {
-            chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
-              var key = input.target.getAttribute('data-wiki-key');
-              response.searchEngineSettings.get(key).set('action', 'hide');
-              chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
-            });
-          });
           inputSearchEngineReplace.addEventListener('click', function (input) {
             chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
               var key = input.target.getAttribute('data-wiki-key');
@@ -340,6 +333,13 @@ async function loadOptions(lang) {
               chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
             });
           });
+          inputSearchEngineHide.addEventListener('click', function (input) {
+            chrome.storage.sync.get({ 'searchEngineSettings': {} }, function (response) {
+              var key = input.target.getAttribute('data-wiki-key');
+              response.searchEngineSettings.get(key).set('action', 'hide');
+              chrome.storage.sync.set({ 'searchEngineSettings': response.searchEngineSettings });
+            });
+          });
 
           // Output wiki disable radio button:
           let inputDisabledText = document.createElement('span');
@@ -348,13 +348,6 @@ async function loadOptions(lang) {
           labelDisabled.appendChild(inputDisabled);
           labelDisabled.appendChild(inputDisabledText);
 
-          // Output wiki redirect radio button:
-          let inputRedirectText = document.createElement('span');
-          inputRedirectText.classList.add('visuallyHidden');
-          inputRedirectText.textContent = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
-          labelRedirect.appendChild(inputRedirect);
-          labelRedirect.appendChild(inputRedirectText);
-
           // Output wiki alert radio button:
           let inputAlertText = document.createElement('span');
           inputAlertText.classList.add('visuallyHidden');
@@ -362,6 +355,13 @@ async function loadOptions(lang) {
           labelAlert.appendChild(inputAlert);
           labelAlert.appendChild(inputAlertText);
 
+          // Output wiki redirect radio button:
+          let inputRedirectText = document.createElement('span');
+          inputRedirectText.classList.add('visuallyHidden');
+          inputRedirectText.textContent = 'Automatically redirect ' + sites[i].origins_label + ' to ' + sites[i].destination;
+          labelRedirect.appendChild(inputRedirect);
+          labelRedirect.appendChild(inputRedirectText);
+
           // Output search engine disable radio button:
           let inputSearchEngineDisabledText = document.createElement('span');
           inputSearchEngineDisabledText.classList.add('visuallyHidden');
@@ -369,13 +369,6 @@ async function loadOptions(lang) {
           labelSearchEngineDisabled.appendChild(inputSearchEngineDisabled);
           labelSearchEngineDisabled.appendChild(inputSearchEngineDisabledText);
 
-          // Output search engine hide radio button:
-          let inputSearchEngineHideText = document.createElement('span');
-          inputSearchEngineHideText.classList.add('visuallyHidden');
-          inputSearchEngineHideText.textContent = 'Hide ' + sites[i].origins_label + ' from search engines';
-          labelSearchEngineHide.appendChild(inputSearchEngineHide);
-          labelSearchEngineHide.appendChild(inputSearchEngineHideText);
-        
           // Output search engine replace radio button:
           let inputSearchEngineReplaceText = document.createElement('span');
           inputSearchEngineReplaceText.classList.add('visuallyHidden');
@@ -383,6 +376,13 @@ async function loadOptions(lang) {
           labelSearchEngineReplace.appendChild(inputSearchEngineReplace);
           labelSearchEngineReplace.appendChild(inputSearchEngineReplaceText);
 
+          // Output search engine hide radio button:
+          let inputSearchEngineHideText = document.createElement('span');
+          inputSearchEngineHideText.classList.add('visuallyHidden');
+          inputSearchEngineHideText.textContent = 'Hide ' + sites[i].origins_label + ' from search engines';
+          labelSearchEngineHide.appendChild(inputSearchEngineHide);
+          labelSearchEngineHide.appendChild(inputSearchEngineHideText);
+
           // Output wiki info:
           let wikiInfo = document.createElement('span');
           let wikiLink = document.createElement("a");
@@ -407,11 +407,11 @@ async function loadOptions(lang) {
           // Output inputs container:
           let inputsContainer = document.createElement('div');
           inputsContainer.appendChild(labelDisabled);
-          inputsContainer.appendChild(labelRedirect);
           inputsContainer.appendChild(labelAlert);
+          inputsContainer.appendChild(labelRedirect);
           inputsContainer.appendChild(labelSearchEngineDisabled);
-          inputsContainer.appendChild(labelSearchEngineHide);
           inputsContainer.appendChild(labelSearchEngineReplace);
+          inputsContainer.appendChild(labelSearchEngineHide);
           inputsContainer.classList = 'inputsContainer';
           siteContainer.appendChild(wikiInfo);
           siteContainer.appendChild(inputsContainer);