Redesigned history page comparison

openlibrary/i18n/messages.pot

@@ -36,7 +36,7 @@ msgid "or"
 msgstr ""
 
 #: account.html databarHistory.html databarTemplate.html databarView.html
-#: design/popover.html my_books/check_ins/check_in_prompt.html
+#: design/popover.html history.html my_books/check_ins/check_in_prompt.html
 #: reading_goals/reading_goal_progress.html subjects.html
 #: type/edition/compact_title.html type/user/view.html
 msgid "Edit"
@@ -712,50 +712,36 @@ msgid "History of edits to"
 msgstr ""
 
 #: history.html
-msgid "Revision"
-msgstr ""
-
-#: RecentChanges.html RecentChangesAdmin.html RecentChangesUsers.html
-#: admin/ip/view.html admin/people/edits.html history.html
-#: recentchanges/render.html recentchanges/updated_records.html
-msgid "When"
-msgstr ""
-
-#: RecentChanges.html admin/history.html admin/ip/view.html
-#: admin/loans_table.html admin/people/edits.html history.html
-#: recentchanges/render.html
-msgid "Who"
-msgstr ""
-
-#: RecentChanges.html RecentChangesUsers.html admin/history.html
-#: admin/ip/view.html admin/people/edits.html history.html
-#: recentchanges/render.html recentchanges/updated_records.html
-msgid "Comment"
+msgid "Rev"
 msgstr ""
 
 #: history.html
 msgid "Diff"
 msgstr ""
 
 #: history.html
-msgid "Compare"
+msgid "Pick (A/B)"
+msgstr ""
+
+#: history.html type/language/view.html
+msgid "Current"
 msgstr ""
 
 #: history.html
-msgid "See Diff"
+msgid "no comment"
 msgstr ""
 
-#: history.html lib/history.html
-#, python-format
-msgid "View revision %s"
+#: history.html
+msgid "See changes"
 msgstr ""
 
 #: history.html
-msgid "Compare this version..."
+msgid "Compare against latest"
 msgstr ""
 
 #: history.html
-msgid "...to this version"
+#, python-format
+msgid "Pick revision %s as A or B for comparison"
 msgstr ""
 
 #: import_preview.html
@@ -2534,10 +2520,21 @@ msgstr ""
 msgid "Date"
 msgstr ""
 
+#: RecentChanges.html admin/history.html admin/ip/view.html
+#: admin/loans_table.html admin/people/edits.html recentchanges/render.html
+msgid "Who"
+msgstr ""
+
 #: admin/history.html
 msgid "Page"
 msgstr ""
 
+#: RecentChanges.html RecentChangesUsers.html admin/history.html
+#: admin/ip/view.html admin/people/edits.html recentchanges/render.html
+#: recentchanges/updated_records.html
+msgid "Comment"
+msgstr ""
+
 #: admin/imports-add.html admin/imports.html admin/imports_by_date.html
 #: admin/menu.html
 msgid "Imports"
@@ -3189,6 +3186,12 @@ msgstr ""
 msgid "Please select the changesets to revert."
 msgstr ""
 
+#: RecentChanges.html RecentChangesAdmin.html RecentChangesUsers.html
+#: admin/ip/view.html admin/people/edits.html recentchanges/render.html
+#: recentchanges/updated_records.html
+msgid "When"
+msgstr ""
+
 #: RecentChanges.html admin/ip/view.html admin/people/edits.html
 #: recentchanges/render.html
 msgid "When you see numbers here, that's the IP address of the anonymous editor"
@@ -5344,6 +5347,11 @@ msgid_plural "%(count)d revisions"
 msgstr[0] ""
 msgstr[1] ""
 
+#: lib/history.html
+#, python-format
+msgid "View revision %s"
+msgstr ""
+
 #: lib/history.html
 msgid "an anonymous user"
 msgstr ""
@@ -7392,10 +7400,6 @@ msgstr ""
 msgid "Code"
 msgstr ""
 
-#: type/language/view.html
-msgid "Current"
-msgstr ""
-
 #: type/language/view.html
 #, python-format
 msgid "Try a <a href=\"%(href)s\">search for readable books in %(language)s</a>?"

openlibrary/plugins/openlibrary/js/history.js

@@ -0,0 +1,43 @@
+/**
+ * Handles arbitrary A/B comparison on the history page.
+ * When both an A and B radio are selected, injects a comparison link
+ * into the Pick cell of the lower-numbered revision's row.
+ * @param {HTMLElement} pageHistoryElement
+ */
+export function initHistory(pageHistoryElement){
+    console.log('initHistory called', pageHistoryElement);
+    console.log('pre-checked a:', pageHistoryElement.querySelector('input[name="a"]:checked'));
+    console.log('pre-checked b:', pageHistoryElement.querySelector('input[name="b"]:checked'));
+
+    const radios = pageHistoryElement.querySelectorAll('input[name="a"], input[name="b"]');
+
+    function updateCompareButton() {
+        const checkedRadioA = pageHistoryElement.querySelector('input[name="a"]:checked');
+        const checkedRadioB = pageHistoryElement.querySelector('input[name="b"]:checked');
+
+        var compareBtns = pageHistoryElement.querySelectorAll('.compare-arbitrary-btn');
+        compareBtns.forEach(btn => btn.remove());
+
+        if (checkedRadioA && checkedRadioB){
+            const valA = parseInt(checkedRadioA.value, 10);
+            const valB = parseInt(checkedRadioB.value, 10);
+
+            const higherRev = Math.max(valA, valB);
+            const lowerRev = Math.min(valA, valB);
+
+            const href = `?m=diff&a=${lowerRev}&b=${higherRev}`;
+
+            const link = document.createElement('a');
+            link.href = href;
+            link.textContent = `Compare ${lowerRev} with ${higherRev}`;
+            link.className = 'compare-arbitrary-btn';
+
+            const lowerRadio = pageHistoryElement.querySelector(`input[name="a"][value="${lowerRev}"]`);
+            const pickCell = lowerRadio.closest('tr').querySelector('.pick-ab');
+            pickCell.appendChild(link);
+        }
+    }
+
+    radios.forEach(radio => radio.addEventListener('change', updateCompareButton));
+    updateCompareButton();
+}

openlibrary/plugins/openlibrary/js/index.js

@@ -598,4 +598,11 @@ jQuery(function() {
         import(/* webpackChunkName: "stats" */ './stats')
             .then(module => module.initUniqueLoginCounts(monthlyLoginStats));
     }
+
+    // History page comparison
+    const pageHistory = document.querySelector('#pageHistory');
+    if (pageHistory){
+        import(/* webpackChunkName: "history" */ './history')
+            .then(module => module.initHistory(pageHistory));
+    }
 });

openlibrary/templates/history.html

@@ -26,51 +26,62 @@ <h1><a href="$page.key">$name</a></h1>
         <table id="pageHistory">
         <thead>
             <tr>
-                <th class="numberhead" style="text-align:center;">$_("Revision")</th>
-                <th class="historyheader">$_("When")</th>
-                <th class="historyheader">$_("Who")</th>
-                <th class="historyheader">$_("Comment")</th>
-                <th class="historyheader" colspan="2" style="text-align:center;">$_("Diff")</th>
+                <th class="numberhead" style="text-align:center;">$_("Rev")</th>
+                <th class="historyheader">$_("Edit")</th>
+                <th class="historyheader" style="text-align:center;">$_("Diff")</th>
+                <th class="historyheader" style="text-align:center;">$_("Pick (A/B)")</th>
             </tr>
         </thead>
         <tbody>
-            <tr>
-                <td colspan="4"></td>
-                <td colspan="1" style="text-align:center;">
-                    <input type="submit" value="$_('Compare')"  name="_compare" title="$_('See Diff')"/>
-                </td>
-            </tr>
             $for v in h:
-                <tr>
-                    <td class="number">$v.revision</td>
-                    <td class="history"><a href="$page.get_url(v=v.revision)" title="$_('View revision %s', v.revision)">$datestr(v.created)</a></td>
-                    $if v.author:
-                        <td class="displayname" style="vertical-align: top;"><div class="truncatedisplayname"><a href="$homepath()$v.author.key" class="truncate">$v.author.displayname</a></div></td>
-                    $elif v.ip and v.ip != '127.0.0.1':
-                        <td class="history" style="vertical-align: top;"><a href="/recentchanges?ip=$v.ip">$v.ip</a></td>
-                    $else:
-                        <td class="history" style="vertical-align: top;">$v.ip</td>
-                    <td class="comment">$:render_template("history/comment", v)</td>
-                    <td class="compare" style="text-align:center;">
-                        <input type="radio" id="a$v.revision" name="a" title="$_('Compare this version...')" value="$v.revision"
-                        $if v.revision == rev - 1:
-                            checked
-                        $elif v.revision == rev:
-                            checked
-                        />
-                        &nbsp;&nbsp;&nbsp;
-                        <input type="radio" id="b$v.revision" name="b" title="$_('...to this version')" value="$v.revision"
+                $ row_class = "history-current-row" if v.revision == rev else ""
+                <tr class="$row_class">
+                    <td class="number">
+                        <div>$v.revision</div>
                         $if v.revision == rev:
-                            checked
-                        />
+                            <div class="history-current-badge">$_("Current")</div>
+                    </td>
+                    <td class="edit">
+                        <div>
+                            $if v.comment:
+                                $:render_template("history/comment", v)
+                            $else:
+                                <span class="history-no-comment">$_("no comment")</span>
+                        </div>
+                        <div>
+                            $if v.author:
+                                <a href="$homepath()$v.author.key">$v.author.displayname</a>
+                            $elif v.ip and v.ip != '127.0.0.1':
+                                <a href="/recentchanges?ip=$v.ip">$v.ip</a>
+                            $else:
+                                $v.ip
+                            <span class="edit-date">· $datestr(v.created)</span>
+                        </div>
+                    </td>
+                    <td class="compare-against" style="text-align:center;">
+                        <a href="$page.key?m=diff&b=$v.revision">$_("See changes")</a>
+                        $if v.revision != rev:
+                            &nbsp;
+                            <a href="$page.key?m=diff&b=$rev&a=$v.revision">$_("Compare against latest")</a>
+                    </td>
+                    <td class="pick-ab">
+                        <fieldset>
+                            <legend class="shift">
+                                $_("Pick revision %s as A or B for comparison", v.revision)
+                            </legend>
+                            <label><input type="radio" name="a" value="$v.revision"
+                                $if v.revision == rev - 1:
+                                    checked
+                                $elif v.revision == rev:
+                                checked
+                            /> A</label>
+                            <label><input type="radio" name="b" value="$v.revision"
+                                $if v.revision == rev:
+                                checked
+                            /> B</label>
+                        </fieldset>
                     </td>
                 </tr>
-            <tr>
-                <td colspan="4"></td>
-                <td colspan="1" style="text-align:center;">
-                    <input type="submit" value="$_('Compare')"  name="_compare" title="$_('See Diff')"/>
-                </td>
-            </tr>
         </tbody>
         </table>
         <input type="hidden" name="m" value="diff"/>

static/css/components/page-history.css

@@ -50,3 +50,103 @@ table.history td.detail {
   padding: 10px;
   width: 100%;
 }
+
+/* History page redesign - #12628 */
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory thead tr th {
+  font-weight: bold;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory tr.history-current-row {
+  background-color: var(--lighter-yellow);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory tbody td.number {
+  font-weight: bold;
+  text-align: center;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory td.edit div {
+  color: var(--link-blue);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory tbody td.number div {
+  color: var(--link-blue);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory td.number .history-current-badge {
+  border: 1px solid var(--brown);
+  border-radius: 3px;
+  color: var(--brown);
+  display: inline-block;
+  font-size: 0.7em;
+  font-weight: bold;
+  margin-top: 4px;
+  padding: 1px 6px;
+  text-transform: uppercase;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory .compare-against a {
+  border: 1px solid var(--light-grey);
+  border-radius: 3px;
+  color: var(--link-blue);
+  display: inline-block;
+  font-weight: bold;
+  padding: 3px 8px;
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory td.edit a {
+  color: var(--link-blue);
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory td.edit .edit-date {
+  color: var(--grey);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory td.pick-ab {
+  text-align: center;
+  vertical-align: middle;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory td.pick-ab fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+table#pageHistory .compare-against a:hover {
+  background-color: var(--lightest-grey);
+}
+
+.compare-arbitrary-btn {
+  background-color: var(--dark-blue);
+  border-radius: 3px;
+  color: var(--white) !important;
+  display: inline-block;
+  font-weight: bold;
+  margin-top: 6px;
+  padding: 4px 8px;
+  text-align: center;
+  text-decoration: none !important;
+}
+
+.compare-arbitrary-btn:hover {
+  opacity: 0.85;
+}
+
+.history-no-comment {
+  color: var(--mid-grey);
+  font-style: italic;
+}