New issue
Advanced search Search tips
Starred by 44 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature



Sign in to add a comment
link

Issue 328431: Add code folding/collapsing in Dev Tools source editor for JS and CSS/SCSS files

Reported by raina...@gmail.com, Dec 13 2013

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1734.5 Safari/537.36

Steps to reproduce the problem:
1. View source for any JS, CSS, SCSS [SASS, etc..] file
2. Look for a way to collapse code to definitions, regions, etc..
3. 

What is the expected behavior?
I should be able to highlight some code or act on an entire file by hitting a keyboard shortcut (I'm accustomed to Ctrl-M, Ctrl-M to collapse/expand a selected chunk) and have that code visually collapse to just the definition/signature line and a + show up on the left side of the IDE which I could click to re-expand that collapsed piece of code. Ideally, collapsing would also work anywhere there are mandatory closing symbols on a separate like (such as each/while/do/if/else/etc...)

What went wrong?
The behavior just doesn't exist as of right now that I can find.

Did this work before? No 

Chrome version: 33.0.1734.5  Channel: canary
OS Version: 6.3
Flash Version: Shockwave Flash 11.9 r900

The value of this behavior is evident when you consider how often it appears elsewhere even in Chrome (any collapsable treeview demonstrates this). Elements tab does it, all the tabs in the right-pane of Elements (Styles, Computed, Event Listeners, etc..) also do it. Nearly every major IDE does it (Netbeans, VIM, Eclipse, Visual Studio, etc..)

This is extremely valuable to me when working with larger code files to the extent that I'm still using other IDEs instead of DevTools when working with larger or more complex files.
 

Comment 1 by raina...@gmail.com, Dec 13 2013

http://vimeo.com/4020903 does a great job at showing the behavior, some potentially configurable options and perhaps a pattern to emulate since it's VIM and oss.

Comment 2 by lushnikov@chromium.org, Dec 14 2013

Labels: -Type-Bug -OS-Windows Type-Feature OS-All
Owner: lushnikov@chromium.org
Status: Assigned

Comment 3 by pfeldman@chromium.org, Dec 16 2013

Status: WontFix
Not sure it is hipri since we are not an IDE.

Comment 4 by raina...@gmail.com, Dec 16 2013

Hipri? It's an editor feature, not IDE. That's why it can be found in virtually every editor out there. If it's just as common in IDEs, that's because they are nearly always editors as well.

Regardless, Chrome Dev Tools is an IDE now. Editor, debugger, code completion, interpreter, warnings, errors, syntax checking.

What else would you call it?

Comment 5 by pfeldman@chromium.org, Dec 17 2013

Status: Assigned
Ok, ok :)

Comment 6 by raina...@gmail.com, Dec 17 2013

Thank you

Comment 7 by renaudi...@gmail.com, Jun 13 2014

Here is how it works in sublime: http://wesbos.com/sublime-text-code-folding/

Comment 8 by Deleted ...@, Aug 29 2014

Just wondering where we are at with this ?

Comment 9 by boyko.va...@gmail.com, Sep 22 2014

It will be great to have support of netbeans-like custom folds:
http://wiki.netbeans.org/FaqCustomCodeFolds

// <editor-fold desc="Description"> 
    Your code goes here... 
// </editor-fold> 

F.e. in webStorm:
http://www.jetbrains.com/webstorm/webhelp/folding-custom-regions-with-line-comments.html

Comment 10 by lushnikov@chromium.org, Oct 13 2014

Status: WontFix
No plans to support folding for now; might get back to this later though.

Comment 11 by james.wi...@inmobi.com, Apr 21 2015

code folding is so vital for me

Comment 12 by Deleted ...@, Jun 25 2015

Would but nice if this was enabled +1

Comment 13 by vladimir...@gmail.com, Jun 26 2015

I would love this as well +1

Comment 14 by Deleted ...@, Jun 27 2015

please please please +1

Comment 15 by red2...@gmail.com, Jun 27 2015

Dang, you can fold the HTML, why not anything else +100)

Comment 16 Deleted

Comment 17 by lushnikov@chromium.org, Jun 29 2015

Status: Assigned

Comment 18 Deleted

Comment 19 by lushnikov@chromium.org, Dec 18 2015

Labels: Cr-Platform-DevTools-Editing

Comment 20 by paulir...@chromium.org, Sep 29 2016

Components: Platform>DevTools>Authoring

Comment 21 by c...@softvision.com, Oct 20 2016

+1... I need code folding! I can do everything else in Chrome Dev Tools but when I am editing a large file and want to see where a method/function/block ends I can either place the cursor next to the opening curly brace, get a magnifying glass and painstakingly scan for the tiny little, nearly in detectable mark that will appear on the closing curly brace OR I can count the braces OR I can open brackets, sublime, notepad ++, atom, netbeans, eclipse, or dreamweaver, VS Code, and a few others so that I can quickly see where a block begins/ends by either folding it :) or by placing the cursor next to the opening brace and easily finding the respective closing brace which is a lot easier to see in the other editors mentioned.   You need to immediately add this functionality if you want devs to continue devving in devtools.

Comment 22 by c...@softvision.com, Oct 21 2016

....Hopefully I didn't sound like a jerk.  I love everything else about chrome dev tools!

Comment 23 by lushnikov@chromium.org, Oct 21 2016

Labels: -Pri-2 Pri-3
Owner: einbinder@chromium.org

Comment 24 by danijel....@gmail.com, Nov 25 2016

Where we are at with this ?

Comment 25 by eng.a7ma...@gmail.com, Dec 16 2016

was going to submit an issue, glad I found this
+ 10

Comment 26 by redtra...@gmail.com, Apr 3 2017

+1 - I would be more interested in using dev tools to edit code if this feature existed.

Comment 27 by ciprian....@gmail.com, Jul 8 2017

How do other devs live without this ? It is useful even for debugging, so you can minimize (fold) blocks that you are not interested in. Please enable this. It should only be an option on CodeMirror, right ?

Comment 28 by garg10...@gmail.com, Jul 30 2018

It was assigned in 2016 :(
Pls pls provide it +1

Comment 29 by chrisrar...@gmail.com, Nov 2

What is taking so long?

Comment 30 by bugdroid1@chromium.org, Dec 15

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9e5bce11314b18020acc24e078f2ccc723be3867

commit 9e5bce11314b18020acc24e078f2ccc723be3867
Author: Joel Einbinder <einbinder@chromium.org>
Date: Sat Dec 15 00:05:35 2018

DevTools: Code Folding

This adds the ability to collapse sections of code in the Sources and
Network panels.

https://i.imgur.com/CkREJEV.png

Bug: 328431

Change-Id: I88e44d86c7fd2e6dbf076cc734aa538836516cf0
Reviewed-on: https://chromium-review.googlesource.com/c/1014386
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#616885}
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/BUILD.gn
[add] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/cm/brace-fold.js
[add] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/cm/foldcode.js
[add] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/cm/foldgutter.js
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/cm/module.json
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/externs.js
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/source_frame/SourcesTextEditor.js
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/sources/module.json
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/text_editor/CodeMirrorTextEditor.js
[modify] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/renderer/devtools/front_end/text_editor/cmdevtools.css
[add] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/web_tests/http/tests/devtools/editor/text-editor-code-folding-expected.txt
[add] https://crrev.com/9e5bce11314b18020acc24e078f2ccc723be3867/third_party/blink/web_tests/http/tests/devtools/editor/text-editor-code-folding.js

Comment 31 by bugdroid1@chromium.org, Dec 18

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/87b1e4b4c4908281cb602c44f4a757fd653ec4b4

commit 87b1e4b4c4908281cb602c44f4a757fd653ec4b4
Author: Joel Einbinder <einbinder@chromium.org>
Date: Tue Dec 18 03:26:45 2018

DevTools: Use geometry instead of CSS for code folding hover

The previous CL's CSS hack incorrectly cut off breakpoints, caused the
gutter to be transparent when scrolling code horizontally, and made
closed folding triangles invisible.

Bug: 328431
Change-Id: Iba9482efd4bfd13d750580746f5507dadd0c73b2
Reviewed-on: https://chromium-review.googlesource.com/c/1380557
Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#617362}
[modify] https://crrev.com/87b1e4b4c4908281cb602c44f4a757fd653ec4b4/third_party/blink/renderer/devtools/front_end/source_frame/SourcesTextEditor.js
[modify] https://crrev.com/87b1e4b4c4908281cb602c44f4a757fd653ec4b4/third_party/blink/renderer/devtools/front_end/text_editor/CodeMirrorTextEditor.js
[modify] https://crrev.com/87b1e4b4c4908281cb602c44f4a757fd653ec4b4/third_party/blink/renderer/devtools/front_end/text_editor/cmdevtools.css

Sign in to add a comment