Page MenuHomePhabricator

Special:Search should not use <table>
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

Results are rendered with a DOM kind of like this:

<ul class="mw-search-results">
  <li class="mw-search-result mw-search-result-ns-0">
    <table class="searchResultImage">
      <tbody>
        <tr>
          <td class="searchResultImage-thumbnail">
            <a href="..." class="image">
              <img alt="" src="..." decoding="async" data-file-width="1920" data-file-height="2400" width="96" height="120">
            </a>
          </td>
          <td class="searchResultImage-text">
            <div class="mw-search-result-heading">
              <a href="/wiki/Mecca" title="Mecca" data-serp-pos="0">Mecca</a>
            </div>
            <div class="searchresult">
              many tunnels.<span class="searchmatch">&lt;ref&gt;https://www.constructionweekonline.com/projects-tenders/article-22689-makkah-building-eight-tunnels-to-ease-congestion&lt;/ref</span>&gt;

              ===Rapid...
            </div>
            <div class="mw-search-result-data">97 KB (10,753 words) - 09:06, 7 October 2022</div>
          </td>
        </tr>
      </tbody>
    </table>
  </li>
  ...
</ul>

What should have happened instead?: CSS flex should be used. These are not HTML data tables; the tables are being used strictly for presentation. The DOM should look something like this:

<ul class="mw-search-results">
  <li class="mw-search-result mw-search-result-ns-0 searchResultImage">
    <div class="searchResultImage-thumbnail">
      <a href="..." class="image">
        <img alt="" src="..." decoding="async" data-file-width="1920" data-file-height="2400" width="96" height="120">
      </a>
    </div>
    <div class="searchResultImage-text">
      <div class="mw-search-result-heading">
        <a href="/wiki/Mecca" title="Mecca" data-serp-pos="0">Mecca</a>
      </div>
      <div class="searchresult">
              many tunnels.<span class="searchmatch">&lt;ref&gt;https://www.constructionweekonline.com/projects-tenders/article-22689-makkah-building-eight-tunnels-to-ease-congestion&lt;/ref</span>&gt;

              ===Rapid...
      </div>
      <div class="mw-search-result-data">97 KB (10,753 words) - 09:06, 7 October 2022</div>
    </div>
  </li>
  ...
</ul>

with appropriate CSS flex styling.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

https://global-search.toolforge.org/?q=%22mw-search-result%22&namespaces=&title=

Just a quick exploration of how many things might potentially break. It seems Gadget-PrettyLog, Gadget-Cat-a-lot, Gadget-SearchEdit.js, Wdsearch-autodesc.js seem the biggest things that might break if we make changes.

I picked out a couple tours and GalleryDetails when I looked a couple years ago which might(n't) be broken also (related discussion). I think sending a tech news would be enough.

Change #1026988 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/core@master] Search: Remove layout table from search results with images

https://gerrit.wikimedia.org/r/1026988

For now, for compatibility reasons, i'm going with the following structure:

<ul class="mw-search-results">
  <li class="mw-search-result mw-search-result-ns-0">
    <div class="searchResultImage">
          <div class="searchResultImage-thumbnail">
            <a href="..." class="image">
              <img alt="" src="..." decoding="async" data-file-width="1920" data-file-height="2400" width="96" height="120">
            </a>
          </div>
          <div class="searchResultImage-text">
            <div class="mw-search-result-heading">
              <a href="/wiki/Mecca" title="Mecca" data-serp-pos="0">Mecca</a>
            </div>
            <div class="searchresult">
              many tunnels.<span class="searchmatch">&lt;ref&gt;https://www.constructionweekonline.com/projects-tenders/article-22689-makkah-building-eight-tunnels-to-ease-congestion&lt;/ref</span>&gt;

              ===Rapid...
            </div>
            <div class="mw-search-result-data">97 KB (10,753 words) - 09:06, 7 October 2022</div>
          </div>
     </div>
  </li>
  ...
</ul>

This is arguably more html than required, however and there are some other ideas, captured in T320828, but I'd prefer not to break too much at this time.

Change #1026988 merged by jenkins-bot:

[mediawiki/core@master] Search: Remove layout table from search results with images

https://gerrit.wikimedia.org/r/1026988

User Notice suggestion: entries with images on the search results page will have a new html structure. Gadgets and scripts, that rely on the image search result being wrapped in a table, might not work, until the scripts are updated to recognize the new HTML structure.

Added to https://meta.wikimedia.org/wiki/Tech/News/2024/20 -- Thanks for the draft wording, always appreciated! -- It will be frozen for translations in ~21 hours, if any tweaks (or link additions) are needed before then.

Change #1032550 had a related patch set uploaded (by Bartosz Dziewoński; author: TheDJ):

[mediawiki/core@master] Placeholders should size correctly

https://gerrit.wikimedia.org/r/1032550

Change #1032550 merged by jenkins-bot:

[mediawiki/core@master] Placeholders should size correctly

https://gerrit.wikimedia.org/r/1032550

matmarex assigned this task to TheDJ.