Display Full URL in Results and Make it Clickable

[yaaax]

User description

Fixes #250

---

Type

Enhancement

---

Description

This PR introduces several enhancements to the way URLs are displayed in the results:

• The full URL is now displayed instead of just the hostname.
• The URL is made clickable by changing the span element to an a element.
• New CSS rules have been added to handle the display of the full URL on different screen sizes.
• The ResultScore and ResultScoreExplainationKnowMore i18n strings now use safeHTML to correctly display HTML characters.
• The h1 tags in the result intro content for both English and French have been updated to use the new result-url-wrapper class.

---

Changes walkthrough

	Relevant files
Enhancement	SiteAnalysisResult.js                                                                              assets/js/components/SiteAnalysisResult.js Added a new method _updateUrl to update the href and title attribute of the element that contains the analyzed URL. Also, updated the _getDataValueFrom method to return the full URL instead of just the hostname. +13/-1 result-url.html                                                                                          layouts/partials/components/result-url.html The span element with class result-url has been replaced with an a element to make the URL clickable. +1/-1 51_page-result.css                                                                                    assets/css/51_page-result.css Added new CSS rules for .result-url-wrapper and .result-url to handle the display of the full URL in different screen sizes. +26/-0 _#first_intro.md                                                                                        content/en/result/_#first_intro.md Updated the h1 tag to use the class result-url-wrapper for displaying the full URL. +1/-1 _#first_intro.md                                                                                        content/fr/result/_#first_intro.md Updated the h1 tag to use the class result-url-wrapper for displaying the full URL. +2/-2
Bug fix	result-appreciation.html                                                                        layouts/partials/widgets/result-appreciation.html Updated the ResultScore and ResultScoreExplainationKnowMore i18n strings to use safeHTML. +2/-2

---

✨ Usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe --pr_description.add_original_user_description=true" "--pr_description.keep_original_user_title=true", ...] meaning the describe tool will run automatically on every PR, will keep the original title, and will add the original user description above the generated description. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions=""" - The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[yaaax]

@Bastou, I'm not sure if this fix is safe.
Should we clarify the purpose of _getDataValueFrom function ?

[github-actions]

Cette pull request a été marquée comme inactive car elle n'a pas eu de mise à jour depuis 30 jours. Si elle n'est pas mise à jour d'ici 7 jours, elle sera fermée automatiquement. Pour éviter qu'elle soit fermée, vous pouvez ajouter le label keep open.

[bgatellier]

I've add a first version of the feature @vvatelot :

• use a link instead of a span
• add href, rel="nofollow" and title attributes on the link, with the title being the URL to make it visible on hover

Desktop :

Mobile (landscape) :

Mobile (portrait) :

[vvatelot]

For the smartphone version, as the hover function is not availble, shouldn't we propose an icon that could open a pop/up/in ?

[guillaumew]

My point of views: there is on drawback on deploying this solution. It can still be enhanced on mobile, but it is already better even on touch screen devices.
My 2 cents: deploy this fix and open a new issue in order to improve the touch screen experience.

[Walfal]

In fact, it's not better in any case on mobile, because if the domain is to long, you can't see it completly.
Not wrapping it on mobile can be an easy temporarily solution

[yaaax]

PageSpeedInsights is using an input.
Example : https://pagespeed.web.dev/analysis/https-ecoindex-fr/ecddu8tnwu?hl=fr&form_factor=mobile

What do you think about that design ?

[vvatelot]

OK, @yaaax solution is maybe the simplest solution to implement... What do you think @bgatellier @guillaumew @Walfal ?

[bgatellier]

Agree with you.
Moreover, the input solution may be the less complicated one to implement and the most accessible.
I will not be able to do the changes until beginning of january, so if some of you want to do it, feel free!

[vvatelot]

Hello all, I thought about a last solution that can fit all our requirements: using summary / details tags...

Here is an example of all the solutions we listed: https://ecoindex.w3spaces.com/show-full-URL-result-mv7ro.html

Let's vote?

• 🎉 for the simple shortened a link
• ❤️ for the input solution
• 🚀 for the summary / details solution

[guillaumew]

I can't use digital emojis to your post. M'y vote goes for solution 3️⃣.

[bgatellier]

I am really not sure about your last solution @vvatelot from an accessibility point of view: screen readers already read the entire URL with the CSS truncation method.

What do you think @yaaax ?
As the accessibility is something we care about (see #71 ), I think we must ensure that new feature does not break anything

[vvatelot]

PR Description updated to latest commit (860756a)

[vvatelot]

In the end, what do we decide here ? 🤔

[yaaax]

The idea with the <input> element was to copy PageSpeed Insights : the input can be used (and modified) to retest.
This probably implies to move the "Retest" button close to the input.

See for example https://pagespeed.web.dev/analysis/https-www-parcoursup-fr-index-php/3g2jfjdh4y?form_factor=mobile

[vvatelot]

About the pagespeed insights result page, even if there is the input field (which is used for the retest), you have the display of the full url:

So in this case, they display both (input + full url)

[yaaax]

About the pagespeed insights result page, even if there is the input field (which is used for the retest), you have the display of the full url: So in this case, they display both (input + full url)

Yes indeed… in case of redirect they display it underneath. But that's a special case.
I've check with the long ubereat URL : https://pagespeed.web.dev/analysis/https-www-ubereats-com-fr/qdx2akrrma?form_factor=mobile
…only the input is displayed.

[bgatellier]

Here is the new version with the input.

With input

Current