RFC: New CODE block functions

[TerryE]

One of my niggles with phpBB3 vs. phpBB2 is that the CODE blocks are now limited to a 200pt high window. Whilst I agree that it can be quite use whilst you are browsing a post to have vast chunks of code folded out of the way, it would also be nice to be able to expand/contract these on request. So what I have done on my dev sandpit is to develop a straightforward mod to add a EXPAND VIEW / COLLAPSE VIEW toggle next to the SELECT ALL on the header line of the CODE block. Clicking this will do as stated. (Except for MSIE6 and earlier, where there are bugs in the CSS handling which mean that such styles cannot be height limited without refreshing the page). However a side effect of the current implementation is that your cursor loses focus when you click this options (that is you go back to the top of the page).

So what I am asking for before I release it is comments and feedback from those users who use the CODE block for formatting:

• Do you think that adding this option would be useful?
• Would you like the expand/contract per block or for the entire post?
• Is the loss of focus a pain? Should rework the CSS to avoid this?

[probe1]

Yes, I would like such an option.
Expand or contract per block will do.

I have no problem with th focus.... Thanks!

[huw]

How exactly doesn't it work in IE6? A lot of corporate desktops are IE6. So long as it remains usable, minus the expand / collapse feature, I don't see a problem. Loss of focus would annoy me if I needed to use the feature often, but I don't.
Edit: add code box to test behaviour with long content and two boxes on one page:

Code: Select all   Expand viewCollapse view

He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?


[TerryE]

You can see what the bug in MSIE6 is just by hitting SELECT ALL. In FF, Opera, MSIE7, etc. this selects the content of the CODE box without changing its dimensions. In MSIE6 not only is everything selected but the CODE box expands to the full size of the code. If you reset focus to cancel the selection, the full size remains. No doubt MS would call this a 'feature by design' — though no one else has designed it this way.

In MSIE7 and Ff my patch works fine: Click on EXPAND VIEW and the box expands and you the see the button COLLAPSE VIEW instead. Click on this and the view collapses and you see EXPAND VIEW again. In MSIE7 the view expands and once expanded doesn't contract unless you hit page refresh. The EXPAND VIEW / CONTRACT VIEW toggle still works though.

[huw]

Is your dev sandpit public, at a URL I don't know?

Currently I get a standard non-scrollable code box, that shows all code no matter how big it has to go. Select all gives me no problems with this in IE6.

From your description it doesn't sound like it would be a major problem for IE6 users.

Isn't there a BBCode tag CODEBOX in use on a lot of other boards?

[TerryE]

No its not on the public test forum, its on my private sandpit. (Volunteers like yourself can see Using a Forum Playpen and can run up a private copy if they wish to develop their own mods). But I can put it up on the test forum once I've touched base with Drew.

[TerryE]

Drew suggested that I just put it up on the forum. So I have done. Any significant complaints and I'll back it out. So here how a CODE block looks:

Code: Select all   Expand viewCollapse view

1
2
3
4
5
6
7
8
9
a
b
c
d
e
f
h

Just toggle the windowing by clicking Expand/Collapse View. You will see what I meant about losing focus.

[kingfisher]

I think the disadvantage of losing focus is worse than the advantage of expanding the box. Do we need the line numbers? They are a nuisance for anyone wanting to copy and paste the code.

[TerryE]

I think the disadvantage of losing focus is worse than the advantage of expanding the box.

Well don't hit the EXPAND VIEW option

Do we need the line numbers? They are a nuisance for anyone wanting to copy and paste the code.

Sorry but that was me being lazy in my demo. I just entered [CODE]1<cr>2<cr>3<cr>...[/CODE].

I did think about making the EXPAND/CONTRACT VIEW a page global one instead of CODE block specific — that is you can click any EXPAND VIEW and all of the CODE block on the page will expand. Thoughts?

[DrewJensen]

Personally, I would not be in favor of a global change to expanded - unless you mean that each person can set it for themselves

[TerryE]

Sorry, I meant page-wide not system global. In otherwords, by clicking and EXPAND VIEW or CONTRACT view all CODE blocks on that page would expand/contract accordingly. That is if the page contained 3 code blocks and you clicked on any then all 3 would expand. This wouldn't impact other page views or other users.

[huw]

Well I see the EXPAND VIEW link, but it is non-functioning. The box is expanded to full size already, and the code box does not have a scroll bar. IE6 XP sp2, with scripting enabled.

[TerryE]

Sorry but I am explaining myself well. Take an example where user Alan is viewing topic 1234 page 2. This has three CODE blocks on it. Each has the EXPAND VIEW option on it. The variants can be demonstrated by the following use cases:

• Local Block Scope
  Alan clicks on Code block 2 EXPAND VIEW. Block 2 is expanded to its full extent and now shows the option COLLAPSE VIEW. The other two blocks are still in height limited code blocks. The display is redrawn and position at the top of the post.
  He now scrolls down and clicks on Code block 3 EXPAND VIEW. Block 3 is expanded to its full extent and now shows the option COLLAPSE VIEW. The display is redrawn and position at the top of the post. Block 1 is still in height limited code blocks.
  He now scrolls down and clicks on Code block 2 COLLAPSE VIEW. Block 2 is now redrawn as a height limited code block. Block 3 is still expanded.
  In other words the EXPAND / COLLAPSE options only affect the block in which they are clicked.
  
  
• Page-wide Scope
  Alan clicks on Code block 2 EXPAND VIEW. All three blocks are expanded to their full extent and now show the option COLLAPSE VIEW. The display is redrawn and position at the top of the post.
  He now scrolls down and clicks on Code block 3 COLLAPSE VIEW. All three blocks are now redrawn as a height limited code blocks.
  In other words the EXPAND / COLLAPSE option affects all CODE blocks on the page.

In both cases these options do not affect anyone else and are reset when Alan moves onto a new page.

I can implement either but only one will be availalbe. I want to find out which you all prefer. There is a valid argument for the second case, since if you are viewing a topic and are interested in seeing the code displayed then you probably will want to see all code blocks expanded. Doing then in one go means that the page only gets redrawn once.

[huw]

Sorry, I misunderstood. I didn't realise the EXPAND VIEW link was there just for people to test the loss of focus - I thought it meant the expand / collapse functionality was now implemented.

I'd go for Local Block Scope - often the boxes will contain successive itterations of a piece of code, and the earlier ones are obsolete. But then I will rarely benefit from it, so my vote is less important than those from users in the macros & API forums.

Is it possible to have two links at the top of each code box? EXPAND / COLLAPSE THIS BOX and EXPAND / COLLAPSE ALL BOXES? Or could Local Code Box Control & Page-Wide Code Box Control be made two different CSS themes?

The loss of focus thing will annoy me, but is probably better than not having the expand / collapse option.

[Villeroy]

How exactly doesn't it work in IE6? A lot of corporate desktops are IE6. So long as it remains usable, minus the expand / collapse feature, I don't see a problem. Loss of focus would annoy me if I needed to use the feature often, but I don't.
Edit: add code box to test behaviour with long content and two boxes on one page:

Code: Select all   Expand viewCollapse view

He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town?
...

Now I see what disturbes me below threshold when I read code in this forum. The code is in proportional font!
This is what should be changed in the first place, I suggest.

[DrewJensen]

Hi Villeroy,

Not to rain on anyones parade but there is a completely different code formatting engine that I was hoping to employ on the forum,

bbGeshi

You can find the information on the mod at
http://www.phpbb.com/community/viewtopi ... 0&t=564569

I spoke with Terry about this and this expand feature, wanted to try the two together before we brought it up here...so a couple of days and maybe we will have this - By the way support for StarBasic is built right in.

[TerryE]

How exactly doesn't it work in IE6? A lot of corporate desktops are IE6. So long as it remains usable, minus the expand / collapse feature, I don't see a problem. Loss of focus would annoy me if I needed to use the feature often, but I don't.
Edit: add code box to test behaviour with long content and two boxes on one page:

Code: Select all   Expand viewCollapse view

He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?
He heard quiet steps behind him. That didn't bode well. Who could be following him this late at night and in this deadbeat part of town? And at this particular moment, just after he pulled off the big time and was making off with the greenbacks. Was there another crook who'd had the same idea, and was now watching him and waiting for a chance to grab the fruit of his labor? Or did the steps behind him mean that one of many law officers in town was on to him and just waiting to pounce and snap those cuffs on his wrists? He nervously looked all around. Suddenly he saw the alley. Like lightning he darted off to the left and disappeared between the two warehouses almost falling over the trash can lying in the middle of the sidewalk. He tried to nervously tap his way along in the inky darkness and suddenly stiffened: it was a dead-end, he would have to go back the way he had come. The steps got louder and louder, he saw the black outline of a figure coming around the corner. Is this the end of the line? he thought pressing himself back against the wall trying to make himself invisible in the dark, was all that planning and energy wasted? He was dripping with sweat now, cold and wet, he could smell the fear coming off his clothes. Suddenly next to him, with a barely noticeable squeak, a door swung quietly to and fro in the night's breeze. Could this be the haven he'd prayed for? Slowly he slid toward the door, pressing himself more and more into the wall, into the dark, away from his enemy. Would this door save his hide?


This page now has three quote blocks on it. Do you want hitting the expand block to expand only that block ot all three that are one the page. Your collective choice.

[Villeroy]

[X] I want hitting the expand block to expand only that block

[TerryE]

Now I see what disturbs me below threshold when I read code in this forum. The code is in proportional font! This is what should be changed in the first place, I suggest.

V, The CSS inherited font declaration is {font-family: Monaco,"Andale Mono","Courier New",Courier,mono;} This is unchanged from the original phpBB code and these are all mono-spaced fonts. I've checked this on MSIE6, MSIE7 and Ff 2, so I don't understand how you are seeing this as proportional. Could you check this out on your browser using your Web developer tools and tell me what font you are picking up + plus your OS, browser version and which of these fonts you have installed?

Out of interest, the CODE box formatting is picked up from a class="codebox" attribute on the <DL> tag which wraps the <CODE> tag. The EXPAND/COLLAPSE CODE anchors fire a client side javascript which toggles this class with "codeboxexp":

Code: Select all   Expand viewCollapse view

function expandCode(aTag,flag)
{
   aTag.parentNode.parentNode.className = flag ? 'codeboxexp' : 'codebox';
}

And all of the CSS declarations that refer to this codebox class have been cloned so "dl.codebox code {" becomes

dl.codebox code, dl.codeboxexp code {

with the exception that the "max-height: 200px;" modifier only applies to codebox.

The reason for the MSIE6 "feature" is a known bug in how it handles changing max-height styles and MS have fixed this along with many other CSS bugs in MSIE7. The reasons for the re-homing to the top of the page is that when the browser repaints the window it is difficult to track the cursor position and it therefore just goes back to the top of the window.

Drew and discussed this second formatting mod and I have taken an action to integrate these two sets of changes. I've just gone through this mod and it is still very much in the development / alpha stage. The last complete kit is dated Jul last year, and there are six pages of dialogue on how to tweak this to address various fixed and phpBB3 RC release changes. I feel that I don't really want to dash into this one.

Hope that this helps.

[Villeroy]

It was a wrong setting in my Firefox 1.5. However, this was the only forum where code blocks where showing proportional fonts.

[TerryE]

... in my Firefox 1.5...

You old stick-in-the-mud. Still, I propose to leave this mod in place as is for now as it is no worse in functionality than the standard functionality. I'll post separately on this second [CODE] tag engine as I think that this is a separate topic.

[Villeroy]

... in my Firefox 1.5...

You old stick-in-the-mud. Still, I propose to leave this mod in place as is for now as it is no worse in functionality than the standard functionality. I'll post separately on this second [CODE] tag engine as I think that this is a separate topic.

It's my ad-blocking internet viewer with bookmark library plus "duplicate tabs" add-in. It came with my distribution. When I tried 2.0 too many things stopped working, including hyperlinks in other apps. I hate to configure Linux stuff. No, I don't miss a spell checker for input forms. Is my spelling too bad?