Explain scroll skin

Question

Copying an example I was able to get a scroll bar to appear.  I can understand the theory that removing this from components will make them lighter weight and the functionality can be added back when needed.  But I would like to know why it looks like it does.  Neither Adobe 4 Training from the Source nor the web sources I looked at nor the one where I copyied it explained it.  Hopefully, someone here can.  Here is the source:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    alpha.disabled="0.5">
    <fx:Metadata>
        [HostComponent("spark.components.BorderContainer")]
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect
        id="backgroundRect"
        left="0" right="0"
        top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor
                id="bgRectFill"
                color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
    <s:Group
        left="0" right="0"
        top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout
                gap="0"
                horizontalAlign="justify" />
        </s:layout>
        <!--- Application Control Bar -->
        <s:Group
            id="topGroup"
            minWidth="0" minHeight="0" >
            <!-- layer 0: control bar highlight -->
            <s:Rect
                left="0" right="0"
                top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke
                        rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>
            <!-- layer 1: control bar fill -->
            <s:Rect
                left="1" right="1"
                top="1" bottom="2" >
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
            <!-- layer 2: control bar divider line -->
            <s:Rect
                left="0" right="0"
                bottom="0" height="1"
                alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup"
                        left="0" right="0"
                        top="1" bottom="1"
                        minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout
                        paddingLeft="10" paddingRight="10"
                        paddingTop="7" paddingBottom="7"
                        gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
        <s:Scroller
            id="contentScroller"
            width="100%" height="700"
            minWidth="0" minHeight="0">
            <s:Group
                id="contentGroup"
                width="100%" height="100%"
                minWidth="0" minHeight="0" />
        </s:Scroller>
    </s:Group>
</s:Skin>

Answer 1

The problem is it doesn't explain itself.  The cryptic notes may mean something, but not to me. Example:
<fx:Script fb:purpose="styling">
private var paddingChanged:Boolean;
/* Define the skin elements that should not be colorized. */
static private const exclusions:Array = ["background", "textDisplay"];
So what is being colorized?  The text, if any?  The border, if any?  The background, if any?  Based on the above it isn't possible to know unless you already know in which case it is redundent.  It gets even worse when you have:
*  @private
override public function get contentItems():Array {return contentFill};
"Private" is real helpful in describing a public function.  A wonderful comment full of meaning.
Further, exactly what "contentItmes" are we talking about?  This is from a TextInput skin BTW.  What array of items are in an input?
I could go on, but the point has been made.  The comments are NOT descriptions of the various points in the skin.  This skin is about 200 lines long and it is hopefully going to replace the two lines of CSS that formerly worked.
I think a better place to start with skins is here where someone (so far no one) can explain what the heck is happening in one.  Since there is not a single comment in that entire skin that explains how to use it or what the areas of it mean, I ask the question.