[cc] Initial checkin of cc-frame-viewer

tools/cc-frame-viewer/src/ui.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('cr.ui', function() {
+base.exportTo('ui', function() {
 
   /**
    * Decorates elements as an instance of a class.
    * @param {string|!Element} source The way to find the element(s) to decorate.
    *     If this is a string then {@code querySeletorAll} is used to find the
    *     elements to decorate.
    * @param {!Function} constr The constructor to decorate with. The constr
    *     needs to have a {@code decorate} function.
    */
   function decorate(source, constr) {
     var elements;
     if (typeof source == 'string')
-      elements = cr.doc.querySelectorAll(source);
+      elements = base.doc.querySelectorAll(source);
     else
       elements = [source];
 
     for (var i = 0, el; el = elements[i]; i++) {
       if (!(el instanceof constr))
         constr.decorate(el);
     }
   }
 
   /**
    * Helper function for creating new element for define.
    */
   function createElementHelper(tagName, opt_bag) {
     // Allow passing in ownerDocument to create in a different document.
     var doc;
     if (opt_bag && opt_bag.ownerDocument)
       doc = opt_bag.ownerDocument;
     else
-      doc = cr.doc;
+      doc = base.doc;
     return doc.createElement(tagName);
   }
 
   /**
    * Creates the constructor for a UI element class.
    *
    * Usage:
    * <pre>
-   * var List = cr.ui.define('list');
+   * var List = ui.define('list');
    * List.prototype = {
    *   __proto__: HTMLUListElement.prototype,
    *   decorate: function() {
    *     ...
    *   },
    *   ...
    * };
    * </pre>
    *
    * @param {string|Function} tagNameOrFunction The tagName or
@@ skipping 42 matching lines @@
     return f;
   }
 
   /**
    * Input elements do not grow and shrink with their content. This is a simple
    * (and not very efficient) way of handling shrinking to content with support
    * for min width and limited by the width of the parent element.
    * @param {HTMLElement} el The element to limit the width for.
    * @param {number} parentEl The parent element that should limit the size.
    * @param {number} min The minimum width.
-   * @param {number} opt_scale Optional scale factor to apply to the width.
    */
-  function limitInputWidth(el, parentEl, min, opt_scale) {
+  function limitInputWidth(el, parentEl, min) {
     // Needs a size larger than borders
     el.style.width = '10px';
     var doc = el.ownerDocument;
     var win = doc.defaultView;
     var computedStyle = win.getComputedStyle(el);
     var parentComputedStyle = win.getComputedStyle(parentEl);
     var rtl = computedStyle.direction == 'rtl';
 
     // To get the max width we get the width of the treeItem minus the position
     // of the input.
     var inputRect = el.getBoundingClientRect();  // box-sizing
     var parentRect = parentEl.getBoundingClientRect();
     var startPos = rtl ? parentRect.right - inputRect.right :
         inputRect.left - parentRect.left;
 
     // Add up border and padding of the input.
     var inner = parseInt(computedStyle.borderLeftWidth, 10) +
         parseInt(computedStyle.paddingLeft, 10) +
         parseInt(computedStyle.paddingRight, 10) +
         parseInt(computedStyle.borderRightWidth, 10);
 
     // We also need to subtract the padding of parent to prevent it to overflow.
     var parentPadding = rtl ? parseInt(parentComputedStyle.paddingLeft, 10) :
         parseInt(parentComputedStyle.paddingRight, 10);
 
     var max = parentEl.clientWidth - startPos - inner - parentPadding;
-    if (opt_scale)
-      max *= opt_scale;
 
     function limit() {
       if (el.scrollWidth > max) {
         el.style.width = max + 'px';
       } else {
         el.style.width = 0;
         var sw = el.scrollWidth;
         if (sw < min) {
           el.style.width = min + 'px';
         } else {
@@ skipping 11 matching lines @@
    * subpixel layout issues, the value is rounded to the nearest integral value.
    * @param {number} pixels The number of pixels.
    * @return {string} e.g. '16px'.
    */
   function toCssPx(pixels) {
     if (!window.isFinite(pixels))
       console.error('Pixel value is not a number: ' + pixels);
     return Math.round(pixels) + 'px';
   }
 
+  function createSpan(opt_text) {
+    var spanEl = document.createElement('span');
+    if (opt_text)
+      spanEl.textContent = opt_text;
+    return spanEl;
+  };
+
   return {
     decorate: decorate,
     define: define,
     limitInputWidth: limitInputWidth,
     toCssPx: toCssPx,
+    createSpan: createSpan
   };
 });