Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Better fix for issue 5885 (Layout side panel doesn't refresh data when

resizing browser window)
http://code.google.com/p/fbug/issues/detail?id=5885

Also formatted the code
  • Loading branch information...
commit 1c44b73ae853582cbfc7fd42bb7ce6c10bc5ab06 1 parent 90fa86d
Sebastian Zartner SebastianZ authored
267 extension/content/firebug/html/layout.js
View
@@ -25,90 +25,170 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
{
tag:
DIV({"class": "outerLayoutBox"},
- DIV({"class": "positionLayoutBox $outerTopMode $outerRightMode $outerBottomMode $outerLeftMode focusGroup"},
+ DIV({"class": "positionLayoutBox $outerTopMode $outerRightMode $outerBottomMode "+
+ "$outerLeftMode focusGroup"},
DIV({"class": "layoutEdgeTop layoutEdge"}),
DIV({"class": "layoutEdgeRight layoutEdge"}),
DIV({"class": "layoutEdgeBottom layoutEdge"}),
DIV({"class": "layoutEdgeLeft layoutEdge"}),
DIV({"class": "layoutLabelBottom layoutLabel layoutLabelPosition"},
- SPAN({"class": "layoutPosition layoutCaption",
- "aria-label": Locale.$STR("a11y.layout.position")},
- Locale.$STR("position") + ": " + "$position"),
- SPAN({"class": "layoutBoxSizing layoutCaption",
- "aria-label": Locale.$STR("a11y.layout.box-sizing")},
- Locale.$STR("a11y.layout.box-sizing") + ": " + "$boxSizing"),
- SPAN({"class": "layoutZIndex v$zIndex",
- "aria-label": Locale.$STR("a11y.layout.z-index")},
- "z: " + "$zIndex")
+ SPAN({"class": "layoutPosition layoutCaption",
+ "aria-label": Locale.$STR("a11y.layout.position")},
+ Locale.$STR("position") + ": " + "$position"),
+ SPAN({"class": "layoutBoxSizing layoutCaption",
+ "aria-label": Locale.$STR("a11y.layout.box-sizing")},
+ Locale.$STR("a11y.layout.box-sizing") + ": " + "$boxSizing"),
+ SPAN({"class": "layoutZIndex", $invisible: "$zIndex|isInvisible",
+ "aria-label": Locale.$STR("a11y.layout.z-index")},
+ "z: " + "$zIndex")
),
- DIV({"class": "layoutLabelTop layoutLabel v$outerTop"},
- SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.position top')}, '$outerTop')
+ DIV({"class": "layoutLabelTop layoutLabel",
+ $invisible: "$outerTop|isInvisible"},
+ SPAN({"class": "layoutLabelOuterTop editable focusStart",
+ "aria-label": Locale.$STR("a11y.layout.position top")},
+ "$outerTop"
+ )
),
- DIV({"class": "layoutLabelRight layoutLabel v$outerRight"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.position right')}, '$outerRight')
+ DIV({"class": "layoutLabelRight layoutLabel",
+ $invisible: "$outerTop|isInvisible"},
Simon Lindholm Owner

$outerRight, I assume. Same on similar lines.

Sebastian Zartner Owner

Damn you copy & paste! :-)
Fixed in 3d13f4e.

Sebastian

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ SPAN({"class": "layoutLabelOuterRight editable",
+ "aria-label": Locale.$STR("a11y.layout.position right")},
+ "$outerRight"
+ )
),
- DIV({"class": "layoutLabelBottom layoutLabel v$outerBottom"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.position bottom')}, '$outerBottom')
+ DIV({"class": "layoutLabelBottom layoutLabel", $invisible:
+ "$outerTop|isInvisible"},
+ SPAN({"class": "layoutLabelOuterBottom editable",
+ "aria-label": Locale.$STR("a11y.layout.position bottom")},
+ "$outerBottom"
+ )
),
- DIV({"class": "layoutLabelLeft layoutLabel v$outerLeft"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.position left')}, '$outerLeft')
+ DIV({"class": "layoutLabelLeft layoutLabel",
+ $invisible: "$outerTop|isInvisible"},
+ SPAN({"class": "layoutLabelOuterLeft editable",
+ "aria-label": Locale.$STR("a11y.layout.position left")},
+ "$outerLeft"
+ )
),
- DIV({"class": "layoutCaption"}, '$outerLabel'),
+ DIV({"class": "outerLabel layoutCaption"}, "$outerLabel"),
DIV({"class": "marginLayoutBox layoutBox editGroup focusGroup"},
DIV({"class": "layoutCaption"}, Locale.$STR("LayoutMargin")),
- DIV({"class": "layoutLabelTop layoutLabel v$marginTop"},
- SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.margin top')}, '$marginTop')
+ DIV({"class": "layoutLabelTop layoutLabel",
+ $invisible: "$marginTop|isInvisible"},
+ SPAN({"class": "layoutLabelMarginTop editable focusStart",
+ "aria-label": Locale.$STR("a11y.layout.margin top")},
+ "$marginTop"
+ )
),
- DIV({"class": "layoutLabelRight layoutLabel v$marginRight"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout..margin right')}, '$marginRight')
+ DIV({"class": "layoutLabelRight layoutLabel",
+ $invisible: "$marginRight|isInvisible"},
+ SPAN({"class": "layoutLabelMarginRight editable",
+ "aria-label": Locale.$STR("a11y.layout..margin right")},
Simon Lindholm Owner

Should this really be "a11y.layout..margin right"?

Sebastian Zartner Owner

Good catch. This was obviously never seen so far and I also missed it.
Also fixed in 3d13f4e.

Sebastian

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ "$marginRight"
+ )
),
- DIV({"class": "layoutLabelBottom layoutLabel v$marginBottom"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.margin bottom')}, '$marginBottom')
+ DIV({"class": "layoutLabelBottom layoutLabel",
+ $invisible: "$marginBottom|isInvisible"},
+ SPAN({"class": "layoutLabelMarginBottom editable",
+ "aria-label": Locale.$STR("a11y.layout.margin bottom")},
+ "$marginBottom"
+ )
),
- DIV({"class": "layoutLabelLeft layoutLabel v$marginLeft"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.margin left')}, '$marginLeft')
+ DIV({"class": "layoutLabelLeft layoutLabel",
+ $invisible: "$marginLeft|isInvisible"},
+ SPAN({"class": "layoutLabelMarginLeft editable",
+ "aria-label": Locale.$STR("a11y.layout.margin left")},
+ "$marginLeft"
+ )
),
DIV({"class": "borderLayoutBox layoutBox editGroup focusGroup"},
DIV({"class": "layoutCaption"}, Locale.$STR("LayoutBorder")),
- DIV({"class": "layoutLabelTop layoutLabel v$borderTop"},
- SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.border top')}, '$borderTop')
+ DIV({"class": "layoutLabelTop layoutLabel",
+ $invisible: "$borderTop|isInvisible"},
+ SPAN({"class": "layoutLabelBorderTop editable focusStart",
+ "aria-label": Locale.$STR("a11y.layout.border top")},
+ "$borderTop"
+ )
),
- DIV({"class": "layoutLabelRight layoutLabel v$borderRight"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.border right')}, '$borderRight')
+ DIV({"class": "layoutLabelRight layoutLabel",
+ $invisible: "$borderRight|isInvisible"},
+ SPAN({"class": "layoutLabelBorderRight editable",
+ "aria-label": Locale.$STR("a11y.layout.border right")},
+ "$borderRight"
+ )
),
- DIV({"class": "layoutLabelBottom layoutLabel v$borderBottom"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.border bottom')}, '$borderBottom')
+ DIV({"class": "layoutLabelBottom layoutLabel",
+ $invisible: "$borderBottom|isInvisible"},
+ SPAN({"class": "layoutLabelBorderBottom editable",
+ "aria-label": Locale.$STR("a11y.layout.border bottom")},
+ "$borderBottom"
+ )
),
- DIV({"class": "layoutLabelLeft layoutLabel v$borderLeft"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.border left')}, '$borderLeft')
+ DIV({"class": "layoutLabelLeft layoutLabel",
+ $invisible: "$borderLeft|isInvisible"},
+ SPAN({"class": "layoutLabelBorderLeft editable",
+ "aria-label": Locale.$STR("a11y.layout.border left")},
+ "$borderLeft"
+ )
),
DIV({"class": "paddingLayoutBox layoutBox editGroup focusGroup"},
DIV({"class": "layoutCaption"}, Locale.$STR("LayoutPadding")),
- DIV({"class": "layoutLabelTop layoutLabel v$paddingTop"},
- SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.padding top')}, '$paddingTop')
+ DIV({"class": "layoutLabelTop layoutLabel",
+ $invisible: "$paddingTop|isInvisible"},
+ SPAN({"class": "layoutLabelPaddingTop editable focusStart",
+ "aria-label": Locale.$STR("a11y.layout.padding top")},
+ "$paddingTop"
+ )
),
- DIV({"class": "layoutLabelRight layoutLabel v$paddingRight"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.padding right')}, '$paddingRight')
+ DIV({"class": "layoutLabelRight layoutLabel",
+ $invisible: "$paddingRight|isInvisible"},
+ SPAN(
+ {
+ "class": "layoutLabelPaddingRight editable",
+ "aria-label":
+ Locale.$STR("a11y.layout.padding right")
+ },
+ "$paddingRight"
+ )
),
- DIV({"class": "layoutLabelBottom layoutLabel v$paddingBottom"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.padding bottom')}, '$paddingBottom')
+ DIV({"class": "layoutLabelBottom layoutLabel",
+ $invisible: "$paddingBottom|isInvisible"},
+ SPAN(
+ {
+ "class": "layoutLabelPaddingBottom editable",
+ "aria-label":
+ Locale.$STR("a11y.layout.padding bottom")
+ },
+ "$paddingBottom"
+ )
),
- DIV({"class": "layoutLabelLeft layoutLabel v$paddingLeft"},
- SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.padding left')}, '$paddingLeft')
+ DIV({"class": "layoutLabelLeft layoutLabel",
+ $invisible: "$paddingLeft|isInvisible"},
+ SPAN({"class": "layoutLabelPaddingLeft editable",
+ "aria-label": Locale.$STR("a11y.layout.padding left")},
+ "$paddingLeft"
+ )
),
DIV({"class": "contentLayoutBox layoutBox editGroup focusGroup"},
DIV({"class": "layoutLabelCenter layoutLabel"},
- SPAN({"class": "layoutLabelWidth layoutLabel editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.width')}, '$width'),
+ SPAN({"class": "layoutLabelWidth layoutLabel editable "+
+ "focusStart",
+ "aria-label": Locale.$STR("a11y.layout.width")},
+ "$width"
+ ),
" x ",
- SPAN({"class": "layoutLabelHeight layoutLabel editable", 'aria-label' : Locale.$STR('a11y.layout.height')}, '$height')
+ SPAN({"class": "layoutLabelHeight layoutLabel editable",
+ "aria-label": Locale.$STR("a11y.layout.height")},
+ "$height"
+ )
)
)
)
@@ -117,6 +197,11 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
)
),
+ isInvisible: function(value)
+ {
+ return value == 0;
+ },
+
getVerticalText: function(n)
{
return getVerticalText(n);
@@ -218,8 +303,6 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
var next = Dom.getNextElement(element.nextSibling);
var style = view.getComputedStyle(element, "");
- var prevStyle = prev ? view.getComputedStyle(prev, "") : null;
- var nextStyle = next ? view.getComputedStyle(next, "") : null;
var args = Css.getBoxFromStyles(style, element);
@@ -233,7 +316,7 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
var position = style.getPropertyCSSValue("position").cssText;
args.position = position;
- args.outerLabel = '';
+ args.outerLabel = "";
if (Xml.isElementSVG(element) || Xml.isElementMathML(element) || Xml.isElementXUL(element))
{
@@ -247,28 +330,87 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
}
// these Modes are classes on the domplate
- args.outerLeftMode = args.outerRightMode = args.outerTopMode
- = args.outerBottomMode = "blankEdge";
+ args.outerLeftMode = args.outerRightMode = args.outerTopMode = args.outerBottomMode =
+ "blankEdge";
if (position == "absolute" || position == "fixed" || position == "relative")
{
- function getStyle(style, name) { var v = style.getPropertyCSSValue(name); return (v && v.cssText) ? parseInt(v.cssText) : ' '; }
+ function getStyle(style, name)
+ {
+ var value = style.getPropertyCSSValue(name);
+ return value && value.cssText ? parseInt(value.cssText) : " ";
+ }
args.outerLabel = Locale.$STR("LayoutPosition");
- args.outerLeft = getStyle(style,'left');
- args.outerTop = getStyle(style,'top');
- args.outerRight = getStyle(style,'right');
- args.outerBottom = getStyle(style,'bottom');
+ args.outerLeft = getStyle(style, "left");
+ args.outerTop = getStyle(style, "top");
+ args.outerRight = getStyle(style, "right");
+ args.outerBottom = getStyle(style, "bottom");
+
+ args.outerLeftMode = args.outerRightMode = args.outerTopMode = args.outerBottomMode =
+ "absoluteEdge";
+ }
- args.outerLeftMode = args.outerRightMode = args.outerTopMode
- = args.outerBottomMode = "absoluteEdge";
+ var node;
+ // If the layout panel content was already created, just fill in the new values
+ if (this.panelNode.getElementsByClassName("outerLayoutBox").item(0))
+ {
+ // The styles for the positionLayoutBox need to be set manually
+ var positionLayoutBox = this.panelNode.getElementsByClassName("positionLayoutBox").
+ item(0);
+ positionLayoutBox.className = "positionLayoutBox "+args.outerTopMode+" "+
+ args.outerRightMode+" "+args.outerBottomMode+" "+args.outerLeftMode+" focusGroup";
+
+ var values =
+ {
+ layoutPosition: {label: Locale.$STR("position"), value: "position"},
+ layoutBoxSizing: {label: Locale.$STR("a11y.layout.box-sizing"),
+ value: "boxSizing"},
+ layoutZIndex: {label: "z", value: "zIndex"},
+ layoutLabelOuterTop: {value: "outerTop"},
+ layoutLabelOuterRight: {value: "outerRight"},
+ layoutLabelOuterBottom: {value: "outerBottom"},
+ layoutLabelOuterLeft: {value: "outerLeft"},
+ layoutLabelMarginTop: {value: "marginTop"},
+ layoutLabelMarginRight: {value: "marginRight"},
+ layoutLabelMarginBottom: {value: "marginBottom"},
+ layoutLabelMarginLeft: {value: "marginLeft"},
+ layoutLabelBorderTop: {value: "borderTop"},
+ layoutLabelBorderRight: {value: "borderRight"},
+ layoutLabelBorderBottom: {value: "borderBottom"},
+ layoutLabelBorderLeft: {value: "borderLeft"},
+ layoutLabelPaddingTop: {value: "paddingTop"},
+ layoutLabelPaddingRight: {value: "paddingRight"},
+ layoutLabelPaddingBottom: {value: "paddingBottom"},
+ layoutLabelPaddingLeft: {value: "paddingLeft"},
+ layoutLabelWidth: {value: "width"},
+ layoutLabelHeight: {value: "height"},
+ outerLabel: {value: "outerLabel"},
+ }
+
+ for (val in values)
+ {
+ var element = this.panelNode.getElementsByClassName(val).item(0);
+
+ element.textContent = values[val].label ?
+ values[val].label+": "+args[values[val].value] : args[values[val].value];
+
+ if (args[values[val].value] == 0)
Simon Lindholm Owner

I'd reuse isInvisible, and use classList.add/.remove instead of our home-made helpers.
Also: left-over tracing!

Sebastian Zartner Owner

I'd reuse isInvisible

Did so in 3d13f4e.

and use classList.add/.remove instead of our home-made helpers.

I didn't do that yet. Please talk to Honza on the conf call about improving or removing the CSS helpers instead. I won't be there today.

Also: left-over tracing!

Again! :-/ Removed in 315d4c0.

Sebastian

Simon Lindholm Owner

My technique for not forgetting tracing like that is to put all debug code on column 0, so that it really stands out in git diff etc. (Also makes it easily searchable with /^FB in vim.)

Sebastian Zartner Owner

My technique for not forgetting tracing like that is to put all debug code on column 0, so that it really stands out in git diff etc.

Good point. Then I just shouldn't forget to put the debug code to column 0. :-)

(Also makes it easily searchable with /^FB in vim.)

I don't understand why people are voluntarily using text editors without UI. IDEs cover all what vi(m) does (and you also don't have to use the mouse in them for most of the tasks) and offer much more comfort. Anyway, that's just my opinion.

Sebastian

Simon Lindholm Owner

Good point. Then I just shouldn't forget to put the debug code to column 0. :-)

In vim, I've made "sp insert FBTrace.sysout(""); on column 0 of the next line. ;)

I don't understand why people are voluntarily using text editors without UI. IDEs cover all what vi(m) does (and you also don't have to use the mouse in them for most of the tasks) and offer much more comfort. Anyway, that's just my opinion.

From a vim perspective, the UI doesn't matter much, what matters is efficient editing. In usual editors, I would scroll around with the mouse wheel, click with the mouse to choose a place to edit, move with (Control+)Left Arrow/Right Arrow, enter something, move some more with Ctrl+Left/Right, select something to delete with Ctrl+Shift+Left Arrow/Right Arrow, and delete with backspace. Vim does all of those plain better:

  • Jumping around is with things like marks for jumping to pre-selected positions (ma creates a mark "a" at the current line; 'a jumps to it), searching (/autocomp<enter> jumps to getAutoCompleteRange in cssPanel.js), jumping to the previous place jumped from (Ctrl+O - resumes working after I've checked the auto-completion code), navigating by several lines at a time (}, ), L, etc.). I can get to the right code line within a second or so.
  • Entering text is easy, of course. o and O are particularly notable for adding new lines above/below (very common in coding), and there are lots of useful commands for replacing old code with new (e.g., cw for "change word", the equivalent of Ctrl+Shift+Right Arrow + entering text).
  • Deleting text is just dw or dd or dj or whatever.

I can imagine most things mentioned being doable in other editors too, but they generally require Ctrl to be held (which is clumsy, so you don't use them), and they aren't necessary, so you don't bother learning them.

Comfort is subjective. :)

Sebastian Zartner Owner

I can imagine most things mentioned being doable in other editors too, but they generally require Ctrl to be held (which is clumsy, so you don't use them)

Therefore you have to press i to write something and Esc to leave editing mode. I don't think Ctrl is clumsy, it clearly separates entering text from commands and can be much faster in some cases. E.g. selecting the lines you want to delete and pressing Ctrl+d in comparison to having to count the lines and write e.g. 21dd or press d 42 times. :-)
Anyway, I didn't want to start a big discussion about this.

Comfort is subjective. :)

That's the point. :-)

Sebastian

Simon Lindholm Owner

Therefore you have to press i to write something and Esc to leave editing mode.

Very often I don't use i but o, O, cw, s, which are faster than conventional editing. Though even with i it's not a big problem because it's already part of an editing sequence - e.g. dwi is roughly as fast as dw.
Esc is more of a problem, but remapped to jk/kj it's bearable.

E.g. selecting the lines you want to delete and pressing Ctrl+d in comparison to having to count the lines and write e.g. 21dd or press d 42 times. :-)

Rather than counting, I'd use vim's selection mode here. V}}}d or so (depending on to where you are selecting). And of course, better than (d times 42) would be dd(. times 20).

Anyway, I didn't want to start a big discussion about this.

I can understand that. Defending vim is fun though. :^

Sebastian Zartner Owner

Anyway, I didn't want to start a big discussion about this.

I can understand that. Defending vim is fun though. :^

But mainly a waste of time. Not because I hate vim (I actually don't) but because I'm not using vim often enough to remember all these key combos. :-) And btw. my memory is pretty bad... Who are you again? ;-)

Na, thanks for the info, anyway. I'll use it wisely when I work with it.
Though it doesn't make me a fan of it like I'll never be a fan of git (as I already stated earlier).

Sebastian

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ Css.setClass(element.parentNode, "invisible");
+ else
+ Css.removeClass(element.parentNode, "invisible");
+ }
+ FBTrace.sysout("layout", args);
+ }
+ else
+ {
+ node = this.template.tag.replace(args, this.panelNode);
}
- var node = this.template.tag.replace(args, this.panelNode);
this.adjustCharWidth(this.getMaxCharWidth(args, node), this.panelNode);
- Events.dispatch(this.fbListeners, 'onLayoutBoxCreated', [this, node, args]);
+ Events.dispatch(this.fbListeners, "onLayoutBoxCreated", [this, node, args]);
},
/*
@@ -306,7 +448,7 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
adjustBoxWidth: function(node, boxName, width)
{
var box = node.getElementsByClassName(boxName).item(0);
- box.style.cssText = "right: "+width + 'px;'+" left: "+width + 'px;';
+ box.style.cssText = "right: "+width + 'px;'+" left: "+width + "px;";
},
getMaxCharWidth: function(args, node)
@@ -386,11 +528,6 @@ LayoutEditor.prototype = domplate(Firebug.InlineEditor.prototype,
target.innerHTML = getVerticalText(intValue);
else
target.innerHTML = intValue;
-
- if (previousValue == "0" && !!value)
- Css.removeClass(target.parentNode, "v0");
- else if (!value)
- Css.setClass(target.parentNode, "v0");
},
endEditing: function(target, value, cancel)
2  extension/skin/classic/layout.css
View
@@ -82,7 +82,7 @@
position: absolute;
}
-.layoutLabel.v0 {
+.layoutLabel.invisible {
opacity: 0.2;
}
Simon Lindholm

$outerRight, I assume. Same on similar lines.

Simon Lindholm

Should this really be "a11y.layout..margin right"?

Simon Lindholm

I'd reuse isInvisible, and use classList.add/.remove instead of our home-made helpers.
Also: left-over tracing!

Sebastian Zartner

Damn you copy & paste! :-)
Fixed in 3d13f4e.

Sebastian

Sebastian Zartner

Good catch. This was obviously never seen so far and I also missed it.
Also fixed in 3d13f4e.

Sebastian

Sebastian Zartner

I'd reuse isInvisible

Did so in 3d13f4e.

and use classList.add/.remove instead of our home-made helpers.

I didn't do that yet. Please talk to Honza on the conf call about improving or removing the CSS helpers instead. I won't be there today.

Also: left-over tracing!

Again! :-/ Removed in 315d4c0.

Sebastian

Simon Lindholm

My technique for not forgetting tracing like that is to put all debug code on column 0, so that it really stands out in git diff etc. (Also makes it easily searchable with /^FB in vim.)

Sebastian Zartner

My technique for not forgetting tracing like that is to put all debug code on column 0, so that it really stands out in git diff etc.

Good point. Then I just shouldn't forget to put the debug code to column 0. :-)

(Also makes it easily searchable with /^FB in vim.)

I don't understand why people are voluntarily using text editors without UI. IDEs cover all what vi(m) does (and you also don't have to use the mouse in them for most of the tasks) and offer much more comfort. Anyway, that's just my opinion.

Sebastian

Simon Lindholm

Good point. Then I just shouldn't forget to put the debug code to column 0. :-)

In vim, I've made "sp insert FBTrace.sysout(""); on column 0 of the next line. ;)

I don't understand why people are voluntarily using text editors without UI. IDEs cover all what vi(m) does (and you also don't have to use the mouse in them for most of the tasks) and offer much more comfort. Anyway, that's just my opinion.

From a vim perspective, the UI doesn't matter much, what matters is efficient editing. In usual editors, I would scroll around with the mouse wheel, click with the mouse to choose a place to edit, move with (Control+)Left Arrow/Right Arrow, enter something, move some more with Ctrl+Left/Right, select something to delete with Ctrl+Shift+Left Arrow/Right Arrow, and delete with backspace. Vim does all of those plain better:

  • Jumping around is with things like marks for jumping to pre-selected positions (ma creates a mark "a" at the current line; 'a jumps to it), searching (/autocomp<enter> jumps to getAutoCompleteRange in cssPanel.js), jumping to the previous place jumped from (Ctrl+O - resumes working after I've checked the auto-completion code), navigating by several lines at a time (}, ), L, etc.). I can get to the right code line within a second or so.
  • Entering text is easy, of course. o and O are particularly notable for adding new lines above/below (very common in coding), and there are lots of useful commands for replacing old code with new (e.g., cw for "change word", the equivalent of Ctrl+Shift+Right Arrow + entering text).
  • Deleting text is just dw or dd or dj or whatever.

I can imagine most things mentioned being doable in other editors too, but they generally require Ctrl to be held (which is clumsy, so you don't use them), and they aren't necessary, so you don't bother learning them.

Comfort is subjective. :)

Sebastian Zartner

I can imagine most things mentioned being doable in other editors too, but they generally require Ctrl to be held (which is clumsy, so you don't use them)

Therefore you have to press i to write something and Esc to leave editing mode. I don't think Ctrl is clumsy, it clearly separates entering text from commands and can be much faster in some cases. E.g. selecting the lines you want to delete and pressing Ctrl+d in comparison to having to count the lines and write e.g. 21dd or press d 42 times. :-)
Anyway, I didn't want to start a big discussion about this.

Comfort is subjective. :)

That's the point. :-)

Sebastian

Simon Lindholm

Therefore you have to press i to write something and Esc to leave editing mode.

Very often I don't use i but o, O, cw, s, which are faster than conventional editing. Though even with i it's not a big problem because it's already part of an editing sequence - e.g. dwi is roughly as fast as dw.
Esc is more of a problem, but remapped to jk/kj it's bearable.

E.g. selecting the lines you want to delete and pressing Ctrl+d in comparison to having to count the lines and write e.g. 21dd or press d 42 times. :-)

Rather than counting, I'd use vim's selection mode here. V}}}d or so (depending on to where you are selecting). And of course, better than (d times 42) would be dd(. times 20).

Anyway, I didn't want to start a big discussion about this.

I can understand that. Defending vim is fun though. :^

Sebastian Zartner

Anyway, I didn't want to start a big discussion about this.

I can understand that. Defending vim is fun though. :^

But mainly a waste of time. Not because I hate vim (I actually don't) but because I'm not using vim often enough to remember all these key combos. :-) And btw. my memory is pretty bad... Who are you again? ;-)

Na, thanks for the info, anyway. I'll use it wisely when I work with it.
Though it doesn't make me a fan of it like I'll never be a fan of git (as I already stated earlier).

Sebastian

Please sign in to comment.
Something went wrong with that request. Please try again.