From b30c4d1932f7c547a431d2a67f939a8305644fdc Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 4 Nov 2022 12:34:24 -0700 Subject: [PATCH 1/2] rustdoc: simplify search results CSS and DOM There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it. --- src/librustdoc/html/static/css/rustdoc.css | 20 ++++++------------- src/librustdoc/html/static/js/search.js | 6 ++---- .../rustdoc-gui/search-result-display.goml | 2 +- 3 files changed, 9 insertions(+), 19 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 54f6e1ed4d515..227d9ac464bad 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -889,23 +889,17 @@ so that we can apply CSS-filters to change the arrow color in themes */ } .search-results > a { - display: block; + display: flex; /* A little margin ensures the browser's outlining of focused links has room to display. */ margin-left: 2px; margin-right: 2px; border-bottom: 1px solid var(--border-color); + gap: 1em; } .search-results > a > div { - display: flex; - flex-flow: row wrap; -} - -.search-results .result-name, .search-results div.desc { - width: 50%; -} -.search-results .result-name { - padding-right: 1em; + flex: 1; + overflow: hidden; } .search-results a:hover, @@ -1867,7 +1861,8 @@ in storage.js } /* Display an alternating layout on tablets and phones */ - .item-table, .item-row, .item-left, .item-right { + .item-table, .item-row, .item-left, .item-right, + .search-results > a, .search-results > a > div { display: block; } @@ -1875,9 +1870,6 @@ in storage.js .search-results > a { padding: 5px 0px; } - .search-results .result-name, .search-results div.desc { - width: 100%; - } .search-results div.desc, .item-right { padding-left: 2em; } diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index d04ec357c40ac..ef3c74f5faa60 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -1593,7 +1593,6 @@ function initSearch(rawSearchIndex) { link.className = "result-" + type; link.href = item.href; - const wrapper = document.createElement("div"); const resultName = document.createElement("div"); resultName.className = "result-name"; @@ -1614,7 +1613,7 @@ function initSearch(rawSearchIndex) { resultName.insertAdjacentHTML( "beforeend", item.displayPath + "" + name + extra + ""); - wrapper.appendChild(resultName); + link.appendChild(resultName); const description = document.createElement("div"); description.className = "desc"; @@ -1622,8 +1621,7 @@ function initSearch(rawSearchIndex) { spanDesc.insertAdjacentHTML("beforeend", item.desc); description.appendChild(spanDesc); - wrapper.appendChild(description); - link.appendChild(wrapper); + link.appendChild(description); output.appendChild(link); }); } else if (query.error === null) { diff --git a/src/test/rustdoc-gui/search-result-display.goml b/src/test/rustdoc-gui/search-result-display.goml index 053bfd8c905d9..b8abd9f906242 100644 --- a/src/test/rustdoc-gui/search-result-display.goml +++ b/src/test/rustdoc-gui/search-result-display.goml @@ -7,7 +7,7 @@ press-key: 'Enter' wait-for: "#crate-search" // The width is returned by "getComputedStyle" which returns the exact number instead of the // CSS rule which is "50%"... -assert-css: (".search-results div.desc", {"width": "318px"}) +assert-css: (".search-results div.desc", {"width": "310px"}) size: (600, 100) // As counter-intuitive as it may seem, in this width, the width is "100%", which is why // when computed it's larger. From 4bd6748bb9b73c210558498070ae0b7ed8193ddf Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 4 Nov 2022 13:19:33 -0700 Subject: [PATCH 2/2] rustdoc: get rid of CSS/DOM `div.desc span`, which isn't really needed --- src/librustdoc/html/static/css/rustdoc.css | 15 +++++++-------- src/librustdoc/html/static/js/search.js | 4 +--- src/test/rustdoc-gui/search-result-color.goml | 8 ++++---- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 227d9ac464bad..7c0dab1c527d1 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -881,13 +881,6 @@ so that we can apply CSS-filters to change the arrow color in themes */ display: block; } -.search-results .desc > span { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - display: block; -} - .search-results > a { display: flex; /* A little margin ensures the browser's outlining of focused links has room to display. */ @@ -899,7 +892,13 @@ so that we can apply CSS-filters to change the arrow color in themes */ .search-results > a > div { flex: 1; +} + +.search-results > a > div.desc { + white-space: nowrap; + text-overflow: ellipsis; overflow: hidden; + display: block; } .search-results a:hover, @@ -1870,7 +1869,7 @@ in storage.js .search-results > a { padding: 5px 0px; } - .search-results div.desc, .item-right { + .search-results > a > div.desc, .item-right { padding-left: 2em; } diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index ef3c74f5faa60..dd0531c5e70e4 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -1617,10 +1617,8 @@ function initSearch(rawSearchIndex) { const description = document.createElement("div"); description.className = "desc"; - const spanDesc = document.createElement("span"); - spanDesc.insertAdjacentHTML("beforeend", item.desc); + description.insertAdjacentHTML("beforeend", item.desc); - description.appendChild(spanDesc); link.appendChild(description); output.appendChild(link); }); diff --git a/src/test/rustdoc-gui/search-result-color.goml b/src/test/rustdoc-gui/search-result-color.goml index 37d7b03a09958..0c3b111907424 100644 --- a/src/test/rustdoc-gui/search-result-color.goml +++ b/src/test/rustdoc-gui/search-result-color.goml @@ -67,7 +67,7 @@ reload: // Waiting for the search results to appear... wait-for: "#titles" assert-css: ( - "//*[@class='desc']//*[text()='Just a normal struct.']", + "//*[@class='desc'][text()='Just a normal struct.']", {"color": "rgb(197, 197, 197)"}, ) assert-css: ( @@ -159,7 +159,7 @@ assert-css: ( ) // Checking color and background on hover. -move-cursor-to: "//*[@class='desc']//*[text()='Just a normal struct.']" +move-cursor-to: "//*[@class='desc'][text()='Just a normal struct.']" assert-css: ( "//*[@class='result-name']/*[text()='test_docs::']", {"color": "rgb(255, 255, 255)"}, @@ -179,7 +179,7 @@ reload: // Waiting for the search results to appear... wait-for: "#titles" assert-css: ( - "//*[@class='desc']//*[text()='Just a normal struct.']", + "//*[@class='desc'][text()='Just a normal struct.']", {"color": "rgb(221, 221, 221)"}, ) assert-css: ( @@ -276,7 +276,7 @@ reload: // Waiting for the search results to appear... wait-for: "#titles" assert-css: ( - "//*[@class='desc']//*[text()='Just a normal struct.']", + "//*[@class='desc'][text()='Just a normal struct.']", {"color": "rgb(0, 0, 0)"}, ) assert-css: (