complete tryASelector

http://code.google.com/p/fbug/source/detail?r=7640
firebug · Aug 24, 2010 · 6b3c299 · 6b3c299
1 parent 53b1ece
commit 6b3c299
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/content/selectbug.js b/content/selectbug.js
@@ -173,17 +173,24 @@ SelectorPanel.prototype = extend(Firebug.Panel,
                 if (elements && elements.length)
                 {
                     SelectorTemplate.tag.replace({object: elements}, this.panelNode);
+                    this.showTrialSelector(this.trialSelector);
                     return;
                 }
             }
             catch(e)
             {
-                WarningTemplate.selectErrorTag.replace({object: e}, this.panelNode);
+                var table = SelectorTemplate.tag.replace({object: []}, this.panelNode);
+                var tbody = table.lastChild;
+                WarningTemplate.selectErrorTag.insertRows({object: e}, tbody.lastChild);
+                WarningTemplate.selectErrorTextTag.insertRows({object: e}, tbody.lastChild);
+                this.showTrialSelector(this.trialSelector);
                 return;
             }
         }
-
+        var table = SelectorTemplate.tag.replace({object: []}, this.panelNode);
-        WarningTemplate.noSelectionTag.replace({object: this.selection}, this.panelNode);
+        var tbody = table.lastChild;
+        WarningTemplate.noSelectionTag.insertRows({object: this.selection}, tbody.lastChild);
+        this.showTrialSelector(this.trialSelector);
     },
 
     getObjectPath: function(object)
@@ -216,7 +223,16 @@ SelectorPanel.prototype = extend(Firebug.Panel,
             this.editor = new SelectorEditor(this);
 
         return this.editor;
-    }
+    },
+
+    showTrialSelector: function(trialSelector)
+    {
+        var show = trialSelector ? true : false;
+        collapse($('trialHint', this.document), show);
+        var trialSelectorDiv = $('trialSelector', this.document);
+        trialSelectorDiv.textContent = trialSelector;
+        collapse(trialSelectorDiv, !show);
+    },
 
 });
 
@@ -241,11 +257,11 @@ var BaseRep = domplate(Firebug.Rep,
 var TrialRow =
         TR({"class": "watchNewRow", level: 0, onclick: "$onClickEditor"},
             TD({"class": "watchEditCell", colspan: 3},
-                    DIV({"class": "watchEditBox a11yFocusNoTab", role: "button", 'tabindex' : '0',
+                    DIV({"class": "watchEditBox a11yFocusNoTab", "id":"trialHint", role: "button", 'tabindex' : '0',
                         'aria-label' : $STR('a11y.labels.press enter to add new selector')},
-                        $STR("selectbug.TryASelector"),
+                        $STR("selectbug.TryASelector")
-                    DIV({"class": "trialSelector", collapsed: "true"}, "")
+                    ),
-                    )
+                    DIV({"class": "trialSelector", "id":"trialSelector"}, "")
                 )
             );
 
@@ -260,7 +276,7 @@ var SelectorTemplate = domplate(BaseRep,
             TBODY({"class": "cssSelectionTBody"},
                 TrialRow,
                 FOR("element", "$object",
-                    TR({"class": "elementRow", _repObject:"$element"},
+                    TR({"class": "selectionElementRow", _repObject:"$element"},
                         TD({"class": "selectionElement"},
                             TAG( "$element|getNaturalTag", {object: "$element"})
                         )
@@ -296,33 +312,34 @@ function SelectorEditor(panel)
 SelectorEditor.prototype = domplate(Firebug.InlineEditor.prototype,
 {
     tag:
-        INPUT({"class": "fixedWidthEditor a11yFocusNoTab",
+        INPUT({"class": "fixedWidthEditor selectionElement a11yFocusNoTab",
             type: "text", title:$STR("Selector"),
             oninput: "$onInput", onkeypress: "$onKeyPress"}),
 
     endEditing: function(target, value, cancel)
     {
         if (cancel || value == "")
             return;
-        var trialSelector = target.getElementsByClassName('trialSelector')[0];
+        this.panel.trialSelector = value;
-        trialSelector.textContent = value;
+        this.panel.selection = this.panel.trialSelector;
-        collapse(trialSelector, false);
-        this.panel.selection = value;
         this.panel.rebuild();
     }
 });
 
 
 var WarningTemplate = domplate(Firebug.Rep,
 {
-    noSelectionTag: DIV({"class":"selectbugWarning "},
+    noSelectionTag: TR({"class":"selectbugWarning "},
-            SPAN($STR("selectbug.noSelection"))
+                        TD({"class": "selectionElement"}, $STR("selectbug.noSelection"))
-            ),
+                    ),
-
+
-    selectErrorTag: DIV({"class":"selectbugWarning"},
+    selectErrorTag: TR({"class":"selectbugWarning"},
-            DIV($STR("selectbug.selectorError")),
+                        TD({"class": "selectionElement"}, $STR("selectbug.selectorError"))
-            DIV({"class":"selectionErrorText"}, SPAN("$object"))
+                    ),
-            ),
+    selectErrorTextTag:
+                    TR({"class":"selectbugWarning"},
+                        TD({"class":"selectionErrorText selectionElement"}, SPAN("$object"))
+                    ),
 });
 
 // ************************************************************************************************

diff --git a/skin/classic/selectbug.css b/skin/classic/selectbug.css
@@ -1,8 +1,10 @@
 /* Rules for selectbug's Selector panel elements */
 .cssSelectionTable {
-    padding: 2px 0 0 1ex;
     width: 100%;
 }
+.selectionElement {
+    padding: 0 0 0 1ex;
+    }
 
 .selectbugWarning {
     font-size: 11px;
@@ -15,6 +17,7 @@
     padding: 1em;
     background-color: #FFEBEB;
     }
+
 /* Rules for selectbug's effect on CSS stylesheet panel */
 .selectedSelectorRule {
     border-color: Highlight !important;