Maniphest T320295

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

Assigned To

Authored By

	Izno
	Oct 7 2022, 10:38 PM

Description

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

Make a search

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.

Details

	Subject	Repo	Branch	Lines +/-
	Placeholders should size correctly	mediawiki/core	master	+1 -0
	Search: Remove layout table from search results with images	mediawiki/core	master	+14 -11

Customize query in gerrit

Related Objects

Mentioned In: T367122: Repair search image thumbnails for Commons
T364158: Wikimedia commons thumbnails in Special:Search not rendering correctly in Chrome on Android
T320828: Special:Search should use <h*> and maybe a <p>
Mentioned Here: T320828: Special:Search should use <h*> and maybe a <p>

Event Timeline

Izno created this task.Oct 7 2022, 10:38 PM

Restricted Application added a project: Discovery-Search. · View Herald TranscriptOct 7 2022, 10:38 PM

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

Izno updated the task description. (Show Details)Oct 7 2022, 10:40 PM

Reedy added a project: MediaWiki-Search.Oct 7 2022, 10:43 PM

Izno updated the task description. (Show Details)Oct 7 2022, 10:56 PM

Izno added a parent task: T306883: [L] Searchers see thumbnails next to search results on the special:search page.Oct 8 2022, 1:42 AM

Izno updated the task description. (Show Details)Oct 8 2022, 1:58 AM

Aklapper added a project: Accessibility.Oct 10 2022, 1:19 PM

• MPhamWMF added a project: Structured-Data-Backlog.Oct 10 2022, 1:51 PM

• MPhamWMF added a project: SDAW-Search-Improvements.

• MPhamWMF moved this task from needs triage to watching / waiting on the Discovery-Search board.Oct 10 2022, 3:19 PM

CBogen edited projects, added Structured-Data-Backlog (Current Work); removed Structured-Data-Backlog.Oct 11 2022, 4:14 PM

CBogen moved this task from Incoming to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.

stjn awarded a token.Oct 13 2022, 9:46 PM

Lectrician1 subscribed.Oct 14 2022, 1:04 AM

Izno mentioned this in T320828: Special:Search should use <h*> and maybe a <p>.Oct 14 2022, 5:31 PM

CBogen moved this task from Ready for Estimation to Needs Community Liaison Input on the Structured-Data-Backlog (Current Work) board.Oct 18 2022, 1:28 PM

CBogen edited projects, added Structured-Data-Backlog; removed Structured-Data-Backlog (Current Work).Oct 20 2022, 1:27 PM

CBogen moved this task from Triage to SDAW Search Improvements on the Structured-Data-Backlog board.

TheDJ added a project: User-TheDJ.Oct 17 2023, 10:29 PM

Izno removed a parent task: T306883: [L] Searchers see thumbnails next to search results on the special:search page.May 3 2024, 2:37 AM

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

gerritbot added a project: Patch-For-Review.May 3 2024, 5:44 PM

TheDJ added a project: Wikimedia-Hackathon-2024.May 3 2024, 5:47 PM

I notified the most important gadget here: https://commons.wikimedia.org/wiki/MediaWiki_talk:Gadget-Cat-a-lot.js#Searchpage_results

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.

Jdforrester-WMF moved this task from Backlog to Hacking projects on the Wikimedia-Hackathon-2024 board.May 4 2024, 1:02 PM

Jdforrester-WMF added a project: User-notice.May 7 2024, 7:03 AM

Change #1026988 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.May 7 2024, 7:30 AM

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.5; 2024-05-14).May 7 2024, 8:00 AM

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.

Quiddity moved this task from To Triage to In current Tech/News draft on the User-notice board.May 9 2024, 11:50 PM

Quiddity moved this task from In current Tech/News draft to Already announced/Archive on the User-notice board.May 15 2024, 6:39 PM

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

gerritbot added a project: Patch-For-Review.May 16 2024, 7:43 PM

Change #1032550 merged by jenkins-bot:

[mediawiki/core@master] Placeholders should size correctly

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

Maintenance_bot removed a project: Patch-For-Review.May 16 2024, 8:31 PM

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.6; 2024-05-21); removed MW-1.43-notes (1.43.0-wmf.5; 2024-05-14).May 16 2024, 9:00 PM

matmarex closed this task as Resolved.May 16 2024, 10:54 PM