Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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 authored
267  extension/content/firebug/html/layout.js
@@ -25,90 +25,170 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
25 25
     {
26 26
         tag:
27 27
             DIV({"class": "outerLayoutBox"},
28  
-                DIV({"class": "positionLayoutBox $outerTopMode $outerRightMode $outerBottomMode $outerLeftMode focusGroup"},
  28
+                DIV({"class": "positionLayoutBox $outerTopMode $outerRightMode $outerBottomMode "+
  29
+                        "$outerLeftMode focusGroup"},
29 30
                     DIV({"class": "layoutEdgeTop layoutEdge"}),
30 31
                     DIV({"class": "layoutEdgeRight layoutEdge"}),
31 32
                     DIV({"class": "layoutEdgeBottom layoutEdge"}),
32 33
                     DIV({"class": "layoutEdgeLeft layoutEdge"}),
33 34
 
34 35
                     DIV({"class": "layoutLabelBottom layoutLabel layoutLabelPosition"},
35  
-                            SPAN({"class": "layoutPosition layoutCaption",
36  
-                                    "aria-label": Locale.$STR("a11y.layout.position")},
37  
-                                Locale.$STR("position") + ": " + "$position"),
38  
-                            SPAN({"class": "layoutBoxSizing layoutCaption",
39  
-                                    "aria-label": Locale.$STR("a11y.layout.box-sizing")},
40  
-                                Locale.$STR("a11y.layout.box-sizing") + ": " + "$boxSizing"),
41  
-                            SPAN({"class": "layoutZIndex v$zIndex",
42  
-                                    "aria-label": Locale.$STR("a11y.layout.z-index")},
43  
-                                "z: " + "$zIndex")
  36
+                        SPAN({"class": "layoutPosition layoutCaption",
  37
+                                "aria-label": Locale.$STR("a11y.layout.position")},
  38
+                            Locale.$STR("position") + ": " + "$position"),
  39
+                        SPAN({"class": "layoutBoxSizing layoutCaption",
  40
+                                "aria-label": Locale.$STR("a11y.layout.box-sizing")},
  41
+                            Locale.$STR("a11y.layout.box-sizing") + ": " + "$boxSizing"),
  42
+                        SPAN({"class": "layoutZIndex", $invisible: "$zIndex|isInvisible",
  43
+                                "aria-label": Locale.$STR("a11y.layout.z-index")},
  44
+                            "z: " + "$zIndex")
44 45
                     ),
45 46
 
46  
-                    DIV({"class": "layoutLabelTop layoutLabel v$outerTop"},
47  
-                        SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.position top')}, '$outerTop')
  47
+                    DIV({"class": "layoutLabelTop layoutLabel",
  48
+                            $invisible: "$outerTop|isInvisible"},
  49
+                        SPAN({"class": "layoutLabelOuterTop editable focusStart",
  50
+                                "aria-label": Locale.$STR("a11y.layout.position top")},
  51
+                            "$outerTop"
  52
+                        )
48 53
                     ),
49  
-                    DIV({"class": "layoutLabelRight layoutLabel v$outerRight"},
50  
-                        SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.position right')}, '$outerRight')
  54
+                    DIV({"class": "layoutLabelRight layoutLabel",
  55
+                            $invisible: "$outerTop|isInvisible"},
  56
+                        SPAN({"class": "layoutLabelOuterRight editable",
  57
+                                "aria-label": Locale.$STR("a11y.layout.position right")},
  58
+                            "$outerRight"
  59
+                        )
51 60
                     ),
52  
-                    DIV({"class": "layoutLabelBottom layoutLabel v$outerBottom"},
53  
-                        SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.position bottom')}, '$outerBottom')
  61
+                    DIV({"class": "layoutLabelBottom layoutLabel", $invisible:
  62
+                            "$outerTop|isInvisible"},
  63
+                        SPAN({"class": "layoutLabelOuterBottom editable",
  64
+                                "aria-label": Locale.$STR("a11y.layout.position bottom")},
  65
+                            "$outerBottom"
  66
+                        )
54 67
                     ),
55  
-                    DIV({"class": "layoutLabelLeft layoutLabel v$outerLeft"},
56  
-                        SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.position left')}, '$outerLeft')
  68
+                    DIV({"class": "layoutLabelLeft layoutLabel",
  69
+                            $invisible: "$outerTop|isInvisible"},
  70
+                        SPAN({"class": "layoutLabelOuterLeft editable",
  71
+                                "aria-label": Locale.$STR("a11y.layout.position left")},
  72
+                            "$outerLeft"
  73
+                        )
57 74
                     ),
58 75
 
59  
-                    DIV({"class": "layoutCaption"}, '$outerLabel'),
  76
+                    DIV({"class": "outerLabel layoutCaption"}, "$outerLabel"),
60 77
 
61 78
 
62 79
                     DIV({"class": "marginLayoutBox layoutBox editGroup focusGroup"},
63 80
                         DIV({"class": "layoutCaption"}, Locale.$STR("LayoutMargin")),
64  
-                        DIV({"class": "layoutLabelTop layoutLabel v$marginTop"},
65  
-                            SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.margin top')}, '$marginTop')
  81
+                        DIV({"class": "layoutLabelTop layoutLabel",
  82
+                                $invisible: "$marginTop|isInvisible"},
  83
+                            SPAN({"class": "layoutLabelMarginTop editable focusStart",
  84
+                                    "aria-label": Locale.$STR("a11y.layout.margin top")},
  85
+                                "$marginTop"
  86
+                            )
66 87
                         ),
67  
-                        DIV({"class": "layoutLabelRight layoutLabel v$marginRight"},
68  
-                            SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout..margin right')}, '$marginRight')
  88
+                        DIV({"class": "layoutLabelRight layoutLabel",
  89
+                                $invisible: "$marginRight|isInvisible"},
  90
+                            SPAN({"class": "layoutLabelMarginRight editable",
  91
+                                    "aria-label": Locale.$STR("a11y.layout..margin right")},
  92
+                                "$marginRight"
  93
+                            )
69 94
                         ),
70  
-                        DIV({"class": "layoutLabelBottom layoutLabel v$marginBottom"},
71  
-                            SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.margin bottom')}, '$marginBottom')
  95
+                        DIV({"class": "layoutLabelBottom layoutLabel",
  96
+                                $invisible: "$marginBottom|isInvisible"},
  97
+                            SPAN({"class": "layoutLabelMarginBottom editable",
  98
+                                    "aria-label": Locale.$STR("a11y.layout.margin bottom")},
  99
+                                "$marginBottom"
  100
+                            )
72 101
                         ),
73  
-                        DIV({"class": "layoutLabelLeft layoutLabel v$marginLeft"},
74  
-                            SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.margin left')}, '$marginLeft')
  102
+                        DIV({"class": "layoutLabelLeft layoutLabel",
  103
+                                $invisible: "$marginLeft|isInvisible"},
  104
+                            SPAN({"class": "layoutLabelMarginLeft editable",
  105
+                                    "aria-label": Locale.$STR("a11y.layout.margin left")},
  106
+                                "$marginLeft"
  107
+                            )
75 108
                         ),
76 109
 
77 110
                         DIV({"class": "borderLayoutBox layoutBox editGroup focusGroup"},
78 111
                             DIV({"class": "layoutCaption"}, Locale.$STR("LayoutBorder")),
79  
-                            DIV({"class": "layoutLabelTop layoutLabel v$borderTop"},
80  
-                                SPAN({"class": "editable  focusStart", 'aria-label' : Locale.$STR('a11y.layout.border top')}, '$borderTop')
  112
+                            DIV({"class": "layoutLabelTop layoutLabel",
  113
+                                    $invisible: "$borderTop|isInvisible"},
  114
+                                SPAN({"class": "layoutLabelBorderTop editable  focusStart",
  115
+                                        "aria-label": Locale.$STR("a11y.layout.border top")},
  116
+                                    "$borderTop"
  117
+                                )
81 118
                             ),
82  
-                            DIV({"class": "layoutLabelRight layoutLabel v$borderRight"},
83  
-                                SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.border right')}, '$borderRight')
  119
+                            DIV({"class": "layoutLabelRight layoutLabel",
  120
+                                    $invisible: "$borderRight|isInvisible"},
  121
+                                SPAN({"class": "layoutLabelBorderRight editable",
  122
+                                        "aria-label": Locale.$STR("a11y.layout.border right")},
  123
+                                    "$borderRight"
  124
+                                )
84 125
                             ),
85  
-                            DIV({"class": "layoutLabelBottom layoutLabel v$borderBottom"},
86  
-                                SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.border bottom')}, '$borderBottom')
  126
+                            DIV({"class": "layoutLabelBottom layoutLabel",
  127
+                                    $invisible: "$borderBottom|isInvisible"},
  128
+                                SPAN({"class": "layoutLabelBorderBottom editable",
  129
+                                        "aria-label": Locale.$STR("a11y.layout.border bottom")},
  130
+                                    "$borderBottom"
  131
+                                )
87 132
                             ),
88  
-                            DIV({"class": "layoutLabelLeft layoutLabel v$borderLeft"},
89  
-                                SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.border left')}, '$borderLeft')
  133
+                            DIV({"class": "layoutLabelLeft layoutLabel",
  134
+                                    $invisible: "$borderLeft|isInvisible"},
  135
+                                SPAN({"class": "layoutLabelBorderLeft editable",
  136
+                                        "aria-label": Locale.$STR("a11y.layout.border left")},
  137
+                                    "$borderLeft"
  138
+                                )
90 139
                             ),
91 140
 
92 141
                             DIV({"class": "paddingLayoutBox layoutBox editGroup focusGroup"},
93 142
                                 DIV({"class": "layoutCaption"}, Locale.$STR("LayoutPadding")),
94  
-                                DIV({"class": "layoutLabelTop layoutLabel v$paddingTop"},
95  
-                                    SPAN({"class": "editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.padding top')}, '$paddingTop')
  143
+                                DIV({"class": "layoutLabelTop layoutLabel",
  144
+                                        $invisible: "$paddingTop|isInvisible"},
  145
+                                    SPAN({"class": "layoutLabelPaddingTop editable focusStart",
  146
+                                            "aria-label": Locale.$STR("a11y.layout.padding top")},
  147
+                                        "$paddingTop"
  148
+                                    )
96 149
                                 ),
97  
-                                DIV({"class": "layoutLabelRight layoutLabel v$paddingRight"},
98  
-                                    SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.padding right')}, '$paddingRight')
  150
+                                DIV({"class": "layoutLabelRight layoutLabel",
  151
+                                        $invisible: "$paddingRight|isInvisible"},
  152
+                                    SPAN(
  153
+                                        {
  154
+                                            "class": "layoutLabelPaddingRight editable",
  155
+                                            "aria-label":
  156
+                                                Locale.$STR("a11y.layout.padding right")
  157
+                                        },
  158
+                                        "$paddingRight"
  159
+                                    )
99 160
                                 ),
100  
-                                DIV({"class": "layoutLabelBottom layoutLabel v$paddingBottom"},
101  
-                                    SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.padding bottom')}, '$paddingBottom')
  161
+                                DIV({"class": "layoutLabelBottom layoutLabel",
  162
+                                        $invisible: "$paddingBottom|isInvisible"},
  163
+                                    SPAN(
  164
+                                        {
  165
+                                            "class": "layoutLabelPaddingBottom editable",
  166
+                                            "aria-label":
  167
+                                                Locale.$STR("a11y.layout.padding bottom")
  168
+                                        },
  169
+                                        "$paddingBottom"
  170
+                                    )
102 171
                                 ),
103  
-                                DIV({"class": "layoutLabelLeft layoutLabel v$paddingLeft"},
104  
-                                    SPAN({"class": "editable", 'aria-label' : Locale.$STR('a11y.layout.padding left')}, '$paddingLeft')
  172
+                                DIV({"class": "layoutLabelLeft layoutLabel",
  173
+                                        $invisible: "$paddingLeft|isInvisible"},
  174
+                                    SPAN({"class": "layoutLabelPaddingLeft editable",
  175
+                                            "aria-label": Locale.$STR("a11y.layout.padding left")},
  176
+                                        "$paddingLeft"
  177
+                                    )
105 178
                                 ),
106 179
 
107 180
                                 DIV({"class": "contentLayoutBox layoutBox editGroup focusGroup"},
108 181
                                     DIV({"class": "layoutLabelCenter layoutLabel"},
109  
-                                        SPAN({"class": "layoutLabelWidth layoutLabel editable focusStart", 'aria-label' : Locale.$STR('a11y.layout.width')}, '$width'),
  182
+                                        SPAN({"class": "layoutLabelWidth layoutLabel editable "+
  183
+                                                "focusStart",
  184
+                                                "aria-label": Locale.$STR("a11y.layout.width")},
  185
+                                            "$width"
  186
+                                        ),
110 187
                                         " x ",
111  
-                                        SPAN({"class": "layoutLabelHeight layoutLabel editable", 'aria-label' : Locale.$STR('a11y.layout.height')}, '$height')
  188
+                                        SPAN({"class": "layoutLabelHeight layoutLabel editable",
  189
+                                                "aria-label": Locale.$STR("a11y.layout.height")},
  190
+                                            "$height"
  191
+                                        )
112 192
                                     )
113 193
                                 )
114 194
                             )
@@ -117,6 +197,11 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
117 197
                 )
118 198
             ),
119 199
 
  200
+        isInvisible: function(value)
  201
+        {
  202
+            return value == 0;
  203
+        },
  204
+
120 205
         getVerticalText: function(n)
121 206
         {
122 207
             return getVerticalText(n);
@@ -218,8 +303,6 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
218 303
         var next = Dom.getNextElement(element.nextSibling);
219 304
 
220 305
         var style = view.getComputedStyle(element, "");
221  
-        var prevStyle = prev ? view.getComputedStyle(prev, "") : null;
222  
-        var nextStyle = next ? view.getComputedStyle(next, "") : null;
223 306
 
224 307
         var args = Css.getBoxFromStyles(style, element);
225 308
 
@@ -233,7 +316,7 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
233 316
 
234 317
         var position = style.getPropertyCSSValue("position").cssText;
235 318
         args.position = position;
236  
-        args.outerLabel = '';
  319
+        args.outerLabel = "";
237 320
 
238 321
         if (Xml.isElementSVG(element) || Xml.isElementMathML(element) || Xml.isElementXUL(element))
239 322
         {
@@ -247,28 +330,87 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
247 330
         }
248 331
 
249 332
         // these Modes are classes on the domplate
250  
-        args.outerLeftMode = args.outerRightMode = args.outerTopMode
251  
-        = args.outerBottomMode = "blankEdge";
  333
+        args.outerLeftMode = args.outerRightMode = args.outerTopMode = args.outerBottomMode =
  334
+            "blankEdge";
252 335
 
253 336
         if (position == "absolute" || position == "fixed" || position == "relative")
254 337
         {
255  
-            function getStyle(style, name) { var v = style.getPropertyCSSValue(name); return (v && v.cssText) ? parseInt(v.cssText) : ' '; }
  338
+            function getStyle(style, name)
  339
+            {
  340
+                var value = style.getPropertyCSSValue(name);
  341
+                return value && value.cssText ? parseInt(value.cssText) : " ";
  342
+            }
256 343
 
257 344
             args.outerLabel = Locale.$STR("LayoutPosition");
258 345
 
259  
-            args.outerLeft = getStyle(style,'left');
260  
-            args.outerTop = getStyle(style,'top');
261  
-            args.outerRight = getStyle(style,'right');
262  
-            args.outerBottom = getStyle(style,'bottom');
  346
+            args.outerLeft = getStyle(style, "left");
  347
+            args.outerTop = getStyle(style, "top");
  348
+            args.outerRight = getStyle(style, "right");
  349
+            args.outerBottom = getStyle(style, "bottom");
  350
+
  351
+            args.outerLeftMode = args.outerRightMode = args.outerTopMode = args.outerBottomMode =
  352
+                "absoluteEdge";
  353
+        }
263 354
 
264  
-            args.outerLeftMode = args.outerRightMode = args.outerTopMode
265  
-                = args.outerBottomMode = "absoluteEdge";
  355
+        var node;
  356
+        // If the layout panel content was already created, just fill in the new values
  357
+        if (this.panelNode.getElementsByClassName("outerLayoutBox").item(0))
  358
+        {
  359
+            // The styles for the positionLayoutBox need to be set manually
  360
+            var positionLayoutBox = this.panelNode.getElementsByClassName("positionLayoutBox").
  361
+                item(0);
  362
+            positionLayoutBox.className = "positionLayoutBox "+args.outerTopMode+" "+
  363
+                args.outerRightMode+" "+args.outerBottomMode+" "+args.outerLeftMode+" focusGroup";
  364
+
  365
+            var values =
  366
+            {
  367
+                layoutPosition: {label: Locale.$STR("position"), value: "position"},
  368
+                layoutBoxSizing: {label: Locale.$STR("a11y.layout.box-sizing"),
  369
+                    value: "boxSizing"},
  370
+                layoutZIndex: {label: "z", value: "zIndex"},
  371
+                layoutLabelOuterTop: {value: "outerTop"},
  372
+                layoutLabelOuterRight: {value: "outerRight"},
  373
+                layoutLabelOuterBottom: {value: "outerBottom"},
  374
+                layoutLabelOuterLeft: {value: "outerLeft"},
  375
+                layoutLabelMarginTop: {value: "marginTop"},
  376
+                layoutLabelMarginRight: {value: "marginRight"},
  377
+                layoutLabelMarginBottom: {value: "marginBottom"},
  378
+                layoutLabelMarginLeft: {value: "marginLeft"},
  379
+                layoutLabelBorderTop: {value: "borderTop"},
  380
+                layoutLabelBorderRight: {value: "borderRight"},
  381
+                layoutLabelBorderBottom: {value: "borderBottom"},
  382
+                layoutLabelBorderLeft: {value: "borderLeft"},
  383
+                layoutLabelPaddingTop: {value: "paddingTop"},
  384
+                layoutLabelPaddingRight: {value: "paddingRight"},
  385
+                layoutLabelPaddingBottom: {value: "paddingBottom"},
  386
+                layoutLabelPaddingLeft: {value: "paddingLeft"},
  387
+                layoutLabelWidth: {value: "width"},
  388
+                layoutLabelHeight: {value: "height"},
  389
+                outerLabel: {value: "outerLabel"},
  390
+            }
  391
+
  392
+            for (val in values)
  393
+            {
  394
+                var element = this.panelNode.getElementsByClassName(val).item(0);
  395
+
  396
+                element.textContent = values[val].label ?
  397
+                    values[val].label+": "+args[values[val].value] : args[values[val].value];
  398
+
  399
+                if (args[values[val].value] == 0)
  400
+                    Css.setClass(element.parentNode, "invisible");
  401
+                else
  402
+                    Css.removeClass(element.parentNode, "invisible");
  403
+            }
  404
+            FBTrace.sysout("layout", args);
  405
+        }
  406
+        else
  407
+        {
  408
+            node = this.template.tag.replace(args, this.panelNode);
266 409
         }
267 410
 
268  
-        var node = this.template.tag.replace(args, this.panelNode);
269 411
         this.adjustCharWidth(this.getMaxCharWidth(args, node), this.panelNode);
270 412
 
271  
-        Events.dispatch(this.fbListeners, 'onLayoutBoxCreated', [this, node, args]);
  413
+        Events.dispatch(this.fbListeners, "onLayoutBoxCreated", [this, node, args]);
272 414
     },
273 415
 
274 416
     /*
@@ -306,7 +448,7 @@ LayoutPanel.prototype = Obj.extend(Firebug.Panel,
306 448
     adjustBoxWidth: function(node, boxName, width)
307 449
     {
308 450
         var box = node.getElementsByClassName(boxName).item(0);
309  
-        box.style.cssText = "right: "+width + 'px;'+" left: "+width + 'px;';
  451
+        box.style.cssText = "right: "+width + 'px;'+" left: "+width + "px;";
310 452
     },
311 453
 
312 454
     getMaxCharWidth: function(args, node)
@@ -386,11 +528,6 @@ LayoutEditor.prototype = domplate(Firebug.InlineEditor.prototype,
386 528
             target.innerHTML = getVerticalText(intValue);
387 529
         else
388 530
             target.innerHTML = intValue;
389  
-
390  
-        if (previousValue == "0" && !!value)
391  
-            Css.removeClass(target.parentNode, "v0");
392  
-        else if (!value)
393  
-            Css.setClass(target.parentNode, "v0");
394 531
     },
395 532
 
396 533
     endEditing: function(target, value, cancel)
2  extension/skin/classic/layout.css
@@ -82,7 +82,7 @@
82 82
     position: absolute;
83 83
 }
84 84
 
85  
-.layoutLabel.v0 {
  85
+.layoutLabel.invisible {
86 86
     opacity: 0.2;
87 87
 }
88 88
 

0 notes on commit 1c44b73

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.