Add the UI portions of the Scripts panel

[Timothy Hatcher]

The UI refresh did not add the Scripts panel. This bug tracks landing the UI portions of the Scripts panel.

[Timothy Hatcher]

Created attachment 20678 [details]
Initial UI portions of the Scripts panel

[Adam Roben (:aroben)]

Comment on attachment 20678 [details]
Initial UI portions of the Scripts panel

Can we change any existing UI separately from landing new UI/behavior?

[Adam Roben (:aroben)]

Comment on attachment 20678 [details]
Initial UI portions of the Scripts panel

+    this.pauseButton.appendChild(document.createElement("img"));

Why do we need these <img> elements? Can we just set content: on the <button>? Maybe the <img> is needed to autosize the button?

+#scripts-sidebar-resizer-widget {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 225px;
+	width: 16px;
+	cursor: col-resize;
+	background-image: url(Images/statusbarResizerHorizontal.png);
+	background-repeat: no-repeat;
+	background-position: center;
+}

Looks like indentation got screwy here.

r=me, but I do think it would be good to split out the changes to existing UI from the new stuff and land them first.

[Timothy Hatcher]

(In reply to comment #3)
> (From update of attachment 20678 [details] [edit])
> +    this.pauseButton.appendChild(document.createElement("img"));
> 
> Why do we need these <img> elements? Can we just set content: on the <button>?
> Maybe the <img> is needed to autosize the button?

I guess we could use generated content for this. It was just easier to do with an image 

> +#scripts-sidebar-resizer-widget {
> +    position: absolute;
> +    top: 0;
> +    bottom: 0;
> +    right: 225px;
> +       width: 16px;
> +       cursor: col-resize;
> +       background-image: url(Images/statusbarResizerHorizontal.png);
> +       background-repeat: no-repeat;
> +       background-position: center;
> +}
> 
> Looks like indentation got screwy here.

I fixed this.

[Timothy Hatcher]

Fixed in r32343.

[Adam Roben (:aroben)]

(In reply to comment #4)
> (In reply to comment #3)
> > (From update of attachment 20678 [details] [edit] [edit])
> > +    this.pauseButton.appendChild(document.createElement("img"));
> > 
> > Why do we need these <img> elements? Can we just set content: on the <button>?
> > Maybe the <img> is needed to autosize the button?
> 
> I guess we could use generated content for this. It was just easier to do with
> an image 

You already are using generated content, it looks like:

+#scripts-step-out img {
+    content: url(Images/debuggerStepOut.png);
+}