v2.7.0 merge

* Fix bugs in various features (thanks @double-beep for many of these!)
* Add feature to copy markdown for comments
* Add feature to add scrolling to room list in usercards in chat
* Only run SOX on HTTPS
* Deprecate "add timeline button" feature (now natively implemented!
* Deprecate "show question state in suggested edit review queue" (now
native!)

Author: shu8

README.md

@@ -1,6 +1,6 @@
 [![Join the chat at https://gitter.im/soscripted/sox](https://badges.gitter.im/soscripted/sox.svg)](https://gitter.im/soscripted/sox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-### SOX v2.6.0
+### SOX v2.7.0
 
 Stack Overflow Extras (*SOX*) is a project that stemmed from the [Stack Overflow Optional Features (SOOF)](https://github.com/shu8/Stack-Overflow-Optional-Features) project.
 
@@ -22,7 +22,7 @@ Note: This project has no relation to Stack Overflow or Stack Exchange; it is si
 
 2. Install the script. Clicking on 'install' below will make Tampermonkey prompt you automatically to install it.
 
-    - Official Version: <kbd>[install](https://github.com/soscripted/sox/raw/v2.6.0/sox.user.js)</kbd>. <kbd>[view source](https://github.com/soscripted/sox/blob/v2.6.0/sox.user.js)</kbd>
+    - Official Version: <kbd>[install](https://github.com/soscripted/sox/raw/v2.7.0/sox.user.js)</kbd>. <kbd>[view source](https://github.com/soscripted/sox/blob/v2.7.0/sox.user.js)</kbd>
     - Development Version: <kbd>[install](https://github.com/soscripted/sox/raw/dev/sox.user.js)</kbd>. <kbd>[view source](https://github.com/soscripted/sox/blob/dev/sox.user.js)</kbd>
 
 3. Go to any site in the Stack Exchange Network (e.g. [Super User](http://superuser.com/) or [Stack Overflow](http://stackoverflow.com/)). You will automatically be asked to choose and save your settings. A toggle button (gears icon) will be added to your topbar where you can change these later on:

icons/sox_search.svg

@@ -171,6 +171,7 @@
         sitename,
         filter,
         limit,
+        page,
         featureId,
         cacheDuration = 3, // Minutes to cache data for
       } = details;
@@ -197,6 +198,7 @@
       if (filter) queryParams.push(`filter=${filter}`);
       if (order) queryParams.push(`order=${order}`);
       if (limit) queryParams.push(`pagesize=${limit}`);
+      if (page) queryParams.push(`page=${page}`);
       queryParams.push(`sort=${sort}`);
       queryParams.push(`site=${sitename}`);
       queryParams.push(`key=${sox.info.apikey}`);

sox.common.js

@@ -19,7 +19,6 @@
 }
 
 #sox-settings-dialog .modal-content {
-    /* max-height: calc(100vh - 175px); */
     max-height: none;
     min-height: inherit;
 }
@@ -35,6 +34,8 @@
 
 #sox-settings-dialog #search-container {
     min-height: 0;
+    width: 570px;
+    left: 10px;
 }
 
 #sox-settings-dialog #search-container .sox-sprite-search {
@@ -54,12 +55,11 @@
 }
 
 #sox-settings-dialog #search-container #search {
-    width: 490px;
-    text-indent: 20px;
+    max-width: 90%;
 }
 
 #sox-settings-dialog-features {
-    /* padding: 0 10px 10px 10px; */
+    padding: 0 10px 10px 10px;
     overflow-y: scroll;
     height: calc(100vh - 250px);
 }
@@ -70,7 +70,7 @@
 }
 
 #sox-settings-dialog-features .modal-content div:hover {
-    background-color: #f7f8f8;
+    background-color: var(--black-075);
 }
 
 #sox-settings-dialog-features .modal-content label>input {
@@ -89,7 +89,7 @@
 
 #sox-settings-dialog-actions .action {
     float: right;
-    padding: 11px;
+    padding: 13px 11px;
 }
 
 #sox-settings-dialog .sox-new-version-item {
@@ -109,10 +109,6 @@
     height: 24px !important;
 }
 
-.sox-settings-button:hover {
-    color: #999;
-}
-
 #sox-settings-dialog-check-toggle>i {
     padding: 14px 0;
 }
@@ -128,7 +124,7 @@
 
 .sox-feature-info,
 .sox-feature-settings {
-    background-color: whitesmoke;
+    background-color: var(--black-025);
     border-radius: 9px;
     margin-left: 20px;
     padding: 8px;
@@ -170,6 +166,7 @@
     padding: 10px;
     border-radius: 9px;
     background-color: lightgrey;
+    color: #3c4146; /* dark mode compatibility */
     cursor: pointer;
 }
 
@@ -460,6 +457,15 @@
     background: black;
 }
 
+/* spoilerTip -- for the red 'hover to show spoiler' text */
+
+.isSpoiler {
+    color: red;
+    font-size: smaller;
+    float: right;
+    opacity: 1 !important;
+}
+
 /*commentReplies -- for the reply buttons*/
 
 .soxReplyLink {
@@ -589,6 +595,7 @@
     padding: 2px;
     margin: 2px;
     border: 1px dotted black;
+    display: block;
 }
 
 /* editComment -- for the dialog and checkboxes shown when editing */
@@ -618,6 +625,11 @@
     color: white;
 }
 
+#currentValues section {
+    display: inline-block !important;
+    padding: 0px 10px;
+}
+
 /* customMagicLinks -- for the settings table in the dialog */
 .sox-customMagicLinks-settings-table {
     margin-bottom: 10px;
@@ -651,6 +663,11 @@
     margin-right: 5px;
 }
 
+.sox-quickAuthorInfo-unregistered {
+    margin-left: 5px;
+    font-size: smaller;
+}
+
 /* markEmployees -- for the SE icon */
 .sox-markEmployees-logo {
     margin-left: 5px;
@@ -665,3 +682,45 @@
     font-weight: bold;
     font-style: italic;
 }
+
+/* sox-scrollChatRoomsList -- for the user popup and sidebar scrollbar */
+.sox-scrollChatRoomsList-user-popup {
+    max-height: calc(100vh - 90px);
+}
+
+.sox-scrollChatRoomsList-user-popup ul.no-bullets {
+    max-height: calc(100vh - 500px);
+    overflow-y: auto;
+}
+
+.sox-scrollChatRoomsList-sidebar {
+    max-height: calc(40vh);
+    overflow: auto;
+}
+
+.sox-scrollChatRoomsList-sidebar > #my-rooms {
+    height: 100%;
+    overflow: auto;
+}
+
+/* tabularReviewerStats -- for the table with user's stats */
+.sox-tabularReviewerStats-table tr,
+.sox-tabularReviewerStats-table th,
+.sox-tabularReviewerStats-table td:not(:first-child) {
+  border: 1px solid #cccccc;
+  border-collapse: collapse;
+}
+
+.sox-tabularReviewerStats-table th, .sox-tabularReviewerStats-table td {
+    padding: 4px;
+}
+
+/* stickyVoteButtons -- for the vote buttons on the left of the post */
+.sox-stickyVoteButtons > .js-voting-container {
+    position: -webkit-sticky;
+    position: sticky;
+}
+
+.sox-stickyVoteButtons .s-popover {
+    width: max-content;
+}

sox.css

@@ -7,9 +7,9 @@ <h3>
     <div class="header">
         <h3>search</h3>
     </div>
-    <div class="modal-content" id="search-container">
-        <input type="text" id="search" placeholder="looking for a specific feature?">
-        <svg role="img" title="delete" class="sox-sprite sox-sprite-search"> <use xlink:href="#sox_search"> </use> </svg>
+    <div class="grid--cell ps-relative fl1 modal-content" id="search-container">
+        <input class="s-input s-input__search js-search-field" type="text" placeholder="looking for a feature?" id="search">
+        <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon s-input-icon s-input-icon__search iconSearch" aria-hidden="true" viewBox="0 0 18 18" width="18" height="18"><path d="M 18 16.5 l -5.14 -5.18 h -0.35 a 7 7 0 1 0 -1.19 1.19 v 0.35 L 16.5 18 l 1.5 -1.5 Z M 12 7 A 5 5 0 1 1 2 7 a 5 5 0 0 1 10 0 Z" /></svg>
     </div>
     <div id="sox-settings-dialog-features">
         <div id="sox-settings-dialog-features-packs">
@@ -25,10 +25,10 @@ <h3>Feature Packs</h3>
         </div>
     </div>
     <div id="sox-settings-dialog-actions">
-        <input id="sox-settings-dialog-save" type="submit" value="Save Changes">
-        <a class="action" id="sox-settings-dialog-reset" title="reset SOX (deletes everything, including your settings and access token)">Reset</a>
-        <a class="action" id="sox-settings-dialog-report" title="report issue on Github" target="_blank" href="https://github.com/soscripted/sox/issues/new">Report Issue</a>
-        <a class="action" id="sox-settings-dialog-debugging">Enable Debugging</a>
+        <input class="s-btn s-btn__primary s-btn__sm" id="sox-settings-dialog-save" type="submit" value="Save Changes">
+        <a class="action s-btn s-btn__secondary s-btn__sm" id="sox-settings-dialog-reset" title="reset SOX (deletes everything, including your settings and access token)">Reset</a>
+        <a class="action s-btn s-btn__secondary s-btn__sm" id="sox-settings-dialog-report" title="report issue on Github" target="_blank" href="https://github.com/soscripted/sox/issues/new">Report Issue</a>
+        <a class="action s-btn s-btn__secondary s-btn__sm" id="sox-settings-dialog-debugging">Enable Debugging</a>
         <a class="action" id="sox-settings-dialog-access-token" title="request a new access token">
             <svg role="img" class="sox-sprite sox-sprite-key"> <use xlink:href="#sox_key"> </use> </svg>
         </a>

sox.dialog.html

@@ -27,11 +27,12 @@
 
       // Array of HTML strings that will be displayed as `li` items if the user has installed a new version.
       const changes = [
-        'Fix bugs in various features',
-        'Add feature to open imgur images in a modal on click',
-        'Update many features to work with recent SE HTML markup/CSS changes',
-        'Removed dependency on Font Awesome for icons, use SVG sprites instead',
-        'Add support for StylishThemes/StackOverflow-Dark theme',
+        'Fix bugs in various features (thanks @double-beep for many of these!)',
+        'Add feature to copy markdown for comments',
+        'Add feature to add scrolling to room list in usercards in chat',
+        'Only run SOX on HTTPS',
+        'Deprecate "add timeline button" feature (now natively implemented!)',
+        'Deprecate "show question state in suggested edit review queue" (now native!)'
       ];
 
       function addCategory(name) {
@@ -46,7 +47,7 @@
 
         const $content = $('<div/>', {
           id: name,
-          class: 'modal-content features',
+          'class': 'modal-content features',
         });
         $div.append($h3);
 
@@ -76,6 +77,7 @@
         const $label = $('<label/>');
         const $input = $('<input/>', {
           id: name,
+          'class': 's-checkbox',
           type: 'checkbox',
         }).prop('disabled', blockFeatureSelection);
 
@@ -110,19 +112,20 @@
           for (let i = 0; i < featureSettings.length; i++) {
             const currentSetting = featureSettings[i];
             $settingsDiv
-              .append(currentSetting.desc)
-              .append('<br>')
               .append(sox.helpers.newElement(currentSetting.type, { //use newElement helper so the type can be things like 'checkbox' or 'radio'
                 id: currentSetting.id,
-                'class': 'featureSetting',
+                'class': currentSetting.type === 'textarea' ? 'featureSetting s-input' : 'featureSetting s-checkbox',
+                'style': 'margin-right: 5px',
                 'checked': (currentSetting.type === 'checkbox' ? JSON.parse(optionalSettings)[currentSetting.id] : false),
                 value: (optionalSettings === -1 ? '' : JSON.parse(optionalSettings)[currentSetting.id]),
               }))
+              .append(currentSetting.desc)
               .append('<br>');
           }
 
           const $saveFeatureSettings = $('<a/>', {
             id: 'saveSettings-' + name,
+            'class': 'action s-btn s-btn__secondary s-btn__sm',
             text: 'Save Settings',
             click: function(e) {
               e.preventDefault(); //don't uncheck the checkbox
@@ -277,14 +280,15 @@
       // create sox settings button
       const $soxSettingsButton = $('<a/>', {
         id: 'soxSettingsButton',
-        class: 'sox-settings-button -link',
+        'class': 'sox-settings-button -link',
         title: 'Change SOX settings',
         href: '#',
         click: function(e) {
           e.preventDefault();
           $('#sox-settings-dialog').toggle();
           if ($soxSettingsDialog.is(':visible')) {
             $(this).addClass('topbar-icon-on');
+            $soxSettingsDialog.find('#search').focus();
           } else {
             $(this).removeClass('topbar-icon-on');
           }