Pipeline replay editor is broken

[bluesliverx]

I finally tracked this down to the font-family used on the editor. Removing the font-family applied from our light blue theme results in the editor working again. The custom font family makes the cursor position wrong (as reported here and here ).

This appears to be the same problem as #48, though that was from 5 years ago and appears to be resolved (even though the issue was not closed). I figured opening a newer issue with a clearer description might be easier at this point.

[ahochsteger]

Until this is fixed, this is a workaround that can be added as extra CSS to the theme configuration of Jenkins:

div.workflow-editor-wrapper,
textarea.ace_text-input,
div.ace_text-layer,
div.ace_line,
div.ace_line span,
div.ace_cursor-layer,
div.ace_editor > div:nth-child(7) > div:last-child {
    font-family: monospace !important
}

[pmorch]

And if you can't modify the Jenkins installation (I can't), then this Violentmonkey(/Tampermonkey/Greasemonkey) script will fix it. Just modify the @match line (or add mulitple):

// ==UserScript==
// @name        Fix Jenkins Editor/Font Problem
// @namespace   Violentmonkey Scripts
// @match       https://jenkins.example.com/**
// @grant       none
// @version     1.0
// @author      -
// @description 4/20/2021, 12:51:16 AM
// ==/UserScript==

/*
 * See these issues:
 * 
 * [JENKINS-53200] Pipeline Replay Editor Displays Offset Cursor - Jenkins Jira
 * https://issues.jenkins.io/browse/JENKINS-53200
 * 
 * Pipeline replay editor is broken · Issue #182 · afonsof/jenkins-material-theme
 * https://github.com/afonsof/jenkins-material-theme/issues/182
 * 
 */

function addStyle(css) {
  const style = document.getElementById("GM_addStyleBy8626") || (function() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = "GM_addStyleBy8626";
    document.head.appendChild(style);
    return style;
  })();
  const sheet = style.sheet;
  sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}

addStyle(`
  div.workflow-editor-wrapper,
  textarea.ace_text-input,
  div.ace_text-layer,
  div.ace_line,
  div.ace_line span,
  div.ace_cursor-layer,
  div.ace_editor > div:nth-child(7) > div:last-child {
      font-family: monospace !important
  }
`);

[dankirkd]

I'm seeing the same issues for Replay and Console text. I'm using Firefox Developer Edition, and Jenkins console output and text area output that should be monospace is being overridden by

:not(div.ace_editor) {
    font-family: Roboto,sans-serif !important;
    outline: 0;
}

I've had to add injected rules in my browser to override the override for the console:

#main-panel>pre.console-output span, #main-panel>pre.console-output a {
    font-family: Roboto Mono,monospace !important
}

However, this does not work when the console is tailing the logs.