[DevTools] Added regex support to console filters.

Source/devtools/front_end/filter.css

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 11 matching lines @@
  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 .filter-text-filter {
+    display: flex;
     margin-top: 1px;
     margin-left: 1px;
     margin-right: 1px;
-    flex: 0 0 100px;
+    flex: 0 0 200px;

[vsevik, 2013/11/28 10:29:10]

Can we keep it smaller in case there is no regex support?
This is also used on network and timeline panel and there is no much space in
the filter bar there already.
I would keep it smaller than 200px even in case of console if possible.

[Dmitry Zvorygin, 2013/11/28 13:48:33]

200px is just common 100px input box + checkbox + "Regexp" label.

 }
 
 .filter-bitset-filter {
     line-height: 19px;
     padding-right: 10px !important;
     overflow: hidden;
 }
 
 .filter-bitset-filter li {
     display: inline-block;
@@ skipping 43 matching lines @@
 
 .filter-checkbox-filter {
     line-height: 22px;
     padding-left: 4px;
     padding-right: 2px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
+.filter-text-invalid {
+    background-color: rgb(255, 200, 200);
+}
+
 .filter-checkbox-filter .checkbox-filter-checkbox {
     width: 10px;
     height: 10px;
     margin: 0 3px 0 3px;
     padding: 0;
     border-radius: 2px;
     border: solid 1px;
     display: inline-block;
     overflow: visible;
     opacity: 0.8;
@@ skipping 19 matching lines @@
     -webkit-mask-position: -32px -48px;
 }
 
 .filters-toggle.toggled-shown .glyph {
     background-color: rgb(66, 129, 235);
 }
 
 .filters-toggle.toggled-active .glyph {
     background-color: rgb(216, 0, 0);
 }