Hide CI log timestamps on mobile

Details

Based on feedback after the timestamps were rolled out internally for the gitlab.com project and behind a feature flag for self-managed instances, timestamps take up too much room in the job logs on mobile. This feature will help users debug or optimize jobs, and it is extremely unlikely that users will be doing this on mobile.

Proposal

Hide timestamps on mobile by default.

Implementation guide

1. Be sure that your local GDK has a runner configured. If not, see the docs for how to set it up.
2. In your local GDK GitLab instance, create a project.
3. In this project, create a .gitlab-ci.yml config file that runs a job. We need to also enable the FF_TIMESTAMPS feature flag. For example:

   test-job:
     script:
       - echo "Hello world!"
       - sleep 5
       - echo "Another message! :3"
     variables:
       FF_TIMESTAMPS: true

4. Now, if you go to the pipeline on the default branch, you should see the test-job job. If you view it, it should show the timestamps on the left. If not, be sure to update your GDK with gdk update.
5. Timestamps are rendered both in app/assets/javascripts/ci/job_details/components/log/line_header.vue and app/assets/javascripts/ci/job_details/components/log/line.vue. The CSS class of the timestamp is job-log-time.
6. To hide the timestamp on mobile, you can use the gl-hidden CSS utility class and limit it either to the md or lg breakpoint (see the Pajamas Design System docs about breakpoints). You do this by adding e.g. the max-md:gl-hidden class to the elements that already use job-log-time.
7. If you go to the job again, the timestamps should still be shown. But if you turn on your browser’s developer tools mobile mode (see Chrome’s Device Mode or Firefox’ Responsive Design Mode), you should no longer see the timestamps.