Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-38276

Increase size of text area for pipeline script code

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Major Major
    • workflow-cps-plugin
    • Jenkins 2.7.2
      Pipeline plugin 2.11
      Window 7 x64 SP1
    • workflow-cps 2.84

      The text area for pipeline script code is too small, and neither Chrome or Firefox allow for custom resizing; text area size is likely hard coded in Jenkins.

      This issue becomes critical on 13" laptop screens even if they are retina as the edit window becomes almost impossible to use due to both lack of horizontal and vertical space.

          [JENKINS-38276] Increase size of text area for pipeline script code

          Count me in as a plaintive requester for a resizeable text box. I know we can use a script that we edit a file outside of Jenkins, but I'm poking at it in an iterative fashion and having a window large enough to do something more than "Hello World" would be peachy. I use Safari 9.1.1 and Chrome version 53.0.2785.116 (64-bit). Will not try on Firefox because of my personal history of "Why is this taking up so much memory?"

          Elaine Richards added a comment - Count me in as a plaintive requester for a resizeable text box. I know we can use a script that we edit a file outside of Jenkins, but I'm poking at it in an iterative fashion and having a window large enough to do something more than "Hello World" would be peachy. I use Safari 9.1.1 and Chrome version 53.0.2785.116 (64-bit). Will not try on Firefox because of my personal history of "Why is this taking up so much memory?"

          I'll be interested in this enhancement as well

          Tony Xynidakis added a comment - I'll be interested in this enhancement as well

          Matt Friedman added a comment -

          Making the window for editing bigger would be great. If there were a way to open an external editor such as vi, even better.

          Matt Friedman added a comment - Making the window for editing bigger would be great. If there were a way to open an external editor such as vi, even better.

          Jon B added a comment -

          +1 for this. The textarea is so small it's virtually useless. I have to copy/paste the content of that into an IDE and then back again. Very very user unfriendly the way it is

          Jon B added a comment - +1 for this. The textarea is so small it's virtually useless. I have to copy/paste the content of that into an IDE and then back again. Very very user unfriendly the way it is

          +1

          That tiny box is impossible to work with, even for minor script changes. I'm always copying/pasting to/from a real text editor.

          Julio Morimoto added a comment - +1 That tiny box is impossible to work with, even for minor script changes. I'm always copying/pasting to/from a real text editor.

          Sorin Sbarnea added a comment -

          Can we do something about this bug as it makes extremely hard even to view to change one line in the pipeline (not to mention being impossible to see an entire block).

          Sorin Sbarnea added a comment - Can we do something about this bug as it makes extremely hard even to view to change one line in the pipeline (not to mention being impossible to see an entire block).

          Jesse Glick added a comment -

          Pull requests would be welcome. I am not aware of anyone who is planning to work on it.

          Jesse Glick added a comment - Pull requests would be welcome. I am not aware of anyone who is planning to work on it.

          I had the same problem and was able to resolve it by installing jquery-ui plugin. Looks like the resizable window depends on a css supplied by jquery-ui, but this dependency is not specified properly.

          Igor Litmanovich added a comment - I had the same problem and was able to resolve it by installing jquery-ui plugin. Looks like the resizable window depends on a css supplied by jquery-ui, but this dependency is not specified properly.

          Hats off to igorlitmanovich. Installing jquery-ui plugin has brought back the resizable editor with a wider view.

          Thank you!

          Julio Morimoto added a comment - Hats off to igorlitmanovich . Installing jquery-ui plugin has brought back the resizable editor with a wider view. Thank you!

          Jesse Glick added a comment -

          tfennelly care to comment? I do not think the jquery-ui plugin is maintained and intended for use in Jenkins 2.x-style UIs. Unfortunately there is no active maintainer of the UI code in workflow-cps.

          Jesse Glick added a comment - tfennelly care to comment? I do not think the jquery-ui plugin is maintained and intended for use in Jenkins 2.x-style UIs. Unfortunately there is no active maintainer of the UI code in workflow-cps .

          Tom FENNELLY added a comment -

          jglick as I remember it, jquery-ui used to be provided by core. Maybe that has changed. If it has and we want resizing to work, then is it an option to add a dep between the workflow-cps and jquery-ui plugins?

          Tom FENNELLY added a comment - jglick as I remember it, jquery-ui used to be provided by core. Maybe that has changed. If it has and we want resizing to work, then is it an option to add a dep between the workflow-cps and jquery-ui plugins?

          Jesse Glick added a comment -

          I guess? I do not really know anything about usage of various JS-related plugins in Jenkins, but I thought that these old plugins were obsoleted by core assets and the new packaging system in 2.0.

          Jesse Glick added a comment - I guess? I do not really know anything about usage of various JS-related plugins in Jenkins, but I thought that these old plugins were obsoleted by core assets and the new packaging system in 2.0.

          Jesse Glick added a comment -

          Possibly duplicate of JENKINS-37183.

          Jesse Glick added a comment - Possibly duplicate of  JENKINS-37183 .

          Victor Toulouse added a comment - - edited

          Hi. I made a userscript as a workaround.

          https://gist.github.com/vctls/26883c250d89bca0630d8712ab04fffd

          Victor Toulouse added a comment - - edited Hi. I made a userscript as a workaround. https://gist.github.com/vctls/26883c250d89bca0630d8712ab04fffd

          Matt Friedman added a comment -

          Hi vctls - that looks very helpful. How do I use this in Jenkins? Do I put this script in a particular location? 

          Matt Friedman added a comment - Hi vctls - that looks very helpful. How do I use this in Jenkins? Do I put this script in a particular location? 

          No, you need a browser extension like greasemonkey or tampermonkey.
          There may be a way of overriding the layout through a plugin or something, but I'm new to Jenkins so I don't know.

          Victor Toulouse added a comment - No, you need a browser extension like greasemonkey or tampermonkey. There may be a way of overriding the layout through a plugin or something, but I'm new to Jenkins so I don't know.

          If you click F12, go to the Console tab and paste the commands below, it will improve a little:

           

          {{ document.querySelector('.container').style.width = '100%';}}
          {{ document.querySelector('.container').style.padding = '0';}}
          {{ document.querySelector('.col-md-offset-2').style.width = '100%';}}
          document.querySelector('.col-md-offset-2').style.margin = '0';

          Paulo Eduardo Neves added a comment - If you click F12, go to the Console tab and paste the commands below, it will improve a little:   {{ document.querySelector('.container').style.width = '100%';}} {{ document.querySelector('.container').style.padding = '0';}} {{ document.querySelector('.col-md-offset-2').style.width = '100%';}} document.querySelector('.col-md-offset-2').style.margin = '0';

          Jesse Glick added a comment -

          A pull request (tested against major browsers) would be very welcome.

          Jesse Glick added a comment - A pull request (tested against major browsers) would be very welcome.

          Oleg Nenashev added a comment -

          https://github.com/jenkinsci/jenkins/pull/2837 improves the situation a bit, but I rather prefer the proposal from vctls . It would be nice to gave a pull request

          Oleg Nenashev added a comment - https://github.com/jenkinsci/jenkins/pull/2837  improves the situation a bit, but I rather prefer the proposal from vctls . It would be nice to gave a pull request

          Andrew Allen added a comment -

          Made some enhancements to vctls's solution/hack (thanks!) that allows resizing by restyling a parent container with resize:both and calling aceEditor.resize() at the proper times. Like his solution, you'll need Tampermonkey installed to run this UserScript, and since it uses ResizeObserver, it only works with modern Chrome versions. https://gist.github.com/a2intl/293a76ae3323ec21d7cdceb6f7cd63af 

          Andrew Allen added a comment - Made some enhancements to vctls 's solution/hack (thanks!) that allows resizing by restyling a parent container with resize:both and calling aceEditor.resize() at the proper times. Like his solution, you'll need Tampermonkey installed to run this UserScript, and since it uses ResizeObserver , it only works with modern Chrome versions. https://gist.github.com/a2intl/293a76ae3323ec21d7cdceb6f7cd63af  

          The replay function is very useful, but with this stupid limitation it's a pain in the neck.

          Please fix

          Marcel Meschenmoser added a comment - The replay function is very useful, but with this stupid limitation it's a pain in the neck. Please fix

          stupid limitation

          mmeschenmoser Refrain from posting such offensive comment. It's generally undesired, and even more on an opensource project where nobody is paying for the time of others.

          Baptiste Mathus added a comment - stupid limitation mmeschenmoser Refrain from posting such offensive comment. It's generally undesired, and even more on an opensource project where nobody is paying for the time of others.

          Jon B added a comment -

          mmeschenmoser Can you improve it please?

          I took a look at it and the widget that is being used didn't have a way to resize it at the time. If Marcel is passionate about it maybe he can close this ticket. I couldn't figure it out.

          Jon B added a comment - mmeschenmoser Can you improve it please? I took a look at it and the widget that is being used didn't have a way to resize it at the time. If Marcel is passionate about it maybe he can close this ticket. I couldn't figure it out.

          Jan Klass added a comment -

          The editor div has class ui-resizable, and contains a div with class ui-resizable-handle. So I guess the intent was that it should be resizable? But it is not?

          Where would you start looking to fix this issue?

          Jan Klass added a comment - The editor div has class ui-resizable , and contains a div with class ui-resizable-handle . So I guess the intent was that it should be resizable? But it is not? Where would you start looking to fix this issue?

          Matt Dee added a comment -

          Fixing this text box would really help productivity. Another user here hoping to see this delivered. 

          Matt Dee added a comment - Fixing this text box would really help productivity. Another user here hoping to see this delivered. 

          This CSS fixes it. The link to the pipeline syntax can get messy, but better than not having resize.

          .ace_editor {
            resize:vertical; overflow:auto !important;
          }
          

          Christian Höltje added a comment - This CSS fixes it. The link to the pipeline syntax can get messy, but better than not having resize. .ace_editor { resize:vertical; overflow:auto !important; }

          Even better: The ui-resizable-handle actually works!

          This CSS makes it available (with horrible colors!):

           

          .ui-resizable-handle {
           position: absolute;
           bottom: 0;
           background-color: #1f7313;
           width: 100%;
           height: 10px;
           cursor: row-resize;
           opacity: 0.1;
          }
          .ui-resizable-handle:hover {
           opacity: 0.6;
          }
          

           

           

          Christian Höltje added a comment - Even better: The ui-resizable-handle actually works! This CSS makes it available (with horrible colors!):   .ui-resizable-handle { position: absolute; bottom: 0; background-color: #1f7313; width: 100%; height: 10px; cursor: row-resize; opacity: 0.1; } .ui-resizable-handle:hover { opacity: 0.6; }    

          Jesse Glick added a comment -

          Tested pull requests would be very welcome!

          Jesse Glick added a comment - Tested pull requests would be very welcome!

          I have created a PR that upgrades jQuery and fixes the issue based on Christian's comment. It is https://github.com/jenkinsci/workflow-cps-plugin/pull/391 . 

          Félix Queiruga Balado added a comment - I have created a PR that upgrades jQuery and fixes the issue based on Christian's comment. It is https://github.com/jenkinsci/workflow-cps-plugin/pull/391  . 

          Jesse Glick added a comment -

          fqueiruga can you please go through issues linked from here or the PR and either assign to yourself, In Review, or just mark as Duplicate?

          Jesse Glick added a comment - fqueiruga can you please go through issues linked from here or the PR and either assign to yourself, In Review , or just mark as Duplicate ?

          Sure

          Devin Nusbaum added a comment -

          The Pipeline editor is now resizable in Pipeline: Groovy plugin version 2.84.

          Devin Nusbaum added a comment - The Pipeline editor is now resizable in Pipeline: Groovy plugin version 2.84.

            fqueiruga Félix Queiruga Balado
            raffinyc Raffi B
            Votes:
            36 Vote for this issue
            Watchers:
            38 Start watching this issue

              Created:
              Updated:
              Resolved: